vue组件由3部分组成：1、template，设置组件的模板结构；2、script，设置组件的JavaScript行为；3、style，设置组件的样式。每个组件中必须包含template模板结构，而script行为和style样式是可选的组成部分；“”是vue提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的DOM元素。”是vue提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的DOM元素。
本教程操作环境：windows7系统、vue3版，DELL G3电脑。
vue 是一个完全支持组件化开发的框架。vue 中规定组件的后缀名是 .vue。之前接触到的 App.vue 文件本质 上就是一个 vue 的组件。每个 .vue 组件都由 3 部分构成，分别是：
template -> 组件的模板结构
-
script -> 组件的 JavaScript 行为
立即学习“前端免费学习笔记（深入）”；
style -> 组件的样式
其中，每个组件中必须包含 template 模板结构，而 script 行为和 style 样式是可选的组成部分。vue 规定：每个组件对应的模板结构，需要定义到 节点中。
生成一个随机数字: {{ (Math. random() * 10). toFixed(2) }}
我在黑马程序员学习vue. js
这是App根组件
这是副标题
但是，在 vue 3.x 的版本中， 中支持定义多个根节点：
这是App根组件
这是副标题
组件的 script 节点
vue 规定：组件内的
script 中的 name 节点
mallcloud商城基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba并采用前后端分离vue的企业级微服务敏捷开发系统架构。并引入组件化的思想实现高内聚低耦合，项目代码简洁注释丰富上手容易，适合学习和企业中使用。真正实现了基于RBAC、jwt和oauth2的无状态统一权限认证的解决方案，面向互联网设计同时适合B端和C端用户，支持CI/CD多环境部署，并提
可以通过 name 节点为当前组件定义一个名称，代码如下：
在使用 vue-devtools 进行项目调试的时候，自定义的组件名称可以清晰的区分每个组件：
script 中的data节点
vue 组件渲染期间需要用到的数据，可以定义在data 节点中：
其中组件中的data 必须是函数，vue 规定：组件中的data 必须是一个函数，不能直接指向一个数据对象。因此在组件中定义data 数据节点时，下面的方式是错误的：
data: { //组件中，不能直接让data 指向一个数据对象(会报错)
count: 0
}script 中的methods节点
组件中的事件处理函数，必须定义到methods 节点中，示例代码如下：
export default {
name :' MyApp', //组件的名称
data() { //组件的数据
return {
count: 0,
}
},
methods: { //处理函数
addCount() {
this . count++
},
},
}组件的style 节点
vue 规定：组件内的
其中
多学一招：让style 中支持less 语法
如果希望使用less 语法编写组件的style 样式，可以按照如下两个步骤进行配置：
①运行npm install less -D 命令安装依赖包，从而提供less 语法的编译支持
②在
