组件化开发思想

1. 什么是组件化开发

组件化开发指的是：根据封装的思想，把页面上可重用的部分封装，从而方便项目的开发和维护。

2. 组件化开发的好处

①提高了前端代码的复用性和灵活性

②提升了开放效率和后期的可维护性

Vue组件的构成

1. vue组件组成结构

每个vue组件都是由3部分构成：

① template --> 组件的模板结构

② script --> 组件的javaScript行为

③ style --> 组件的样式

其中，每个组件中必须包含 template模板结构，而script行为和style样式是可选的组成部分。

2. 组件的template节点

vue规定：每个组件对应的模板结构，需要定义到<template>节点中。

注意： <template>是vue提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的DOM元素。

①在template中使用指令

②在template 中定义根节点

3. 组件的script节点

Vue规定：组件内的<script>节点是可选的，开发者可以在<script>节点中封装组件的JavaScript业务逻辑。

①script中的name节点

②script中的data节点

③script中的methods节点

4. 组件的style节点

Vue规定：组件内的<style>节点是可选的，开发者可以在<style>节点中编写样式美化当前组件的UI结构。

其中<style>标签上的lang=”css”属性是可选的，它表示所使用的样式语言。默认只支持普通的css语法，可选值还有less、scss等。

①让style中支持less语法