vue组件的构成 ＜template＞ ＜script＞ ＜style＞节点的使用 ＜

1.vue组件组成结构

每个.vue组件都由3部分构成，分别是:

• template ->组件的模板结构
• script ->组件的JavaScript行为
• style ->组件的样式

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

2.组件的template节点

vue规定：每个组件对应的模板结构，需要定义到<template>节点中
注意: <template>是 vue提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的DOM元素。

2.1在template中使用指令

在组件的<template>节点中，支持使用所学的指令语法，来辅助开发者渲染当前组件的DOM结构。

2.2在 template中定义根节点

在vue 2.x的版本中，<template>节点内的DOM结构仅支持单个根节点；
但是，在vue 3.x的版本中，中支持定义多个根节点；

3.组件的script节点

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

3.1 script中的name节点

可以通过name节点为当前组件定义一个名称；
在使用vue-devtools进行项目调试的时候，自定义的组件名称可以清晰的区分每个组件；

3.2 script中的data节点

vue组件渲染期间需要用到的数据，可以定义在data节点中；
注意： vue规定:组件中的data必须是一个函数，不能直接指向一个数据对象。

3.3 script中的methods节点

组件中的事件处理函数，必须定义到 methods节点中。

4.组件的style节点

vue规定︰组件内的<style>节点是可选的，开发者可以在<style>节点中编写样式美化当前组件的UI结构。
其中<style>标签上的lang="css”属性是可选的，它表示所使用的样式语言。默认只支持普通的css语法，可选值还有less、scss等。

4.1让 style 中支持less语法

如果希望使用less语法编写组件的style 样式，可以按照如下两个步骤进行配置:

• 运行npm install less -D命令安装依赖包，从而提供less语法的编译支持
• 在<style>标签上添加lang="less"属性，即可使用less语法编写组件的样式