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语法编写组件的样式