vue2【组件的构成】

约定不等于承诺〃 2024-02-17 09:43 43阅读 0赞

**目录**

1：什么是组件化开发

2：vue中的组件化开发

3：vue组件的三个组成部分

4：组件中定义方法，监听器，过滤器，计算属性节点。

5：template中只允许唯一根节点，style默认只支持css样式可开启less语法

--------------------

#### 1：什么是组件化开发 ####

组件化开发就是指：根据封装的思想，把页面上可重用的UI结构封装为组件，从而方便开发和维护

#### 2：vue中的组件化开发 ####

vue是支持组件化开发的前端框架，vue中规定的组件格式为：组件名称.vue。

#### 3：vue组件的三个组成部分 ####

template：组件中的模板结构（dom标签Html）

![1d4452fc9bda49209518051f1a2baf80.png][]

script：组件的Javascript行为（像数据，方法，侦听器，拦截器）等

![02a2c719ea6140819142aa2645756ba5.png][]

style：组件中的样式（美化模板结构的样式）![239616ce8fbd43fdaf55411a27b5c3b3.png][]

#### 4：组件中定义方法，监听器，过滤器，计算属性节点。 ####

![2dee500e79654d22bb6b12b66c667d32.png][]

#### 5：template中只允许唯一根节点，style默认只支持css样式可开启less语法 ####

![873bd5eecc584873a25e1b13f9adb6a3.png][]

[1d4452fc9bda49209518051f1a2baf80.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/8accdf521bde4b70bf21b24ad0b79d07.png
[02a2c719ea6140819142aa2645756ba5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/99498fa728b045508f9548849a2b7dda.png
[239616ce8fbd43fdaf55411a27b5c3b3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/d082a1aaa4c34aae8fce72e1c5f0dfcd.png
[2dee500e79654d22bb6b12b66c667d32.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/d43ba4a1e550471e88ba196dcd307120.png
[873bd5eecc584873a25e1b13f9adb6a3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/90c9a6ebde034d6195b749b260e1310f.png