vue 组件

1. 什么是组件化开发

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

2. vue 中的组件化开发

• vue 是一个支持组件化开发的前端框架。

• vue 中规定：组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。

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

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

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

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

3.1 template

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

• template 是 vue 提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的 DOM 元素
• template 中只能包含唯一的根节点

3.2 script

vue 规定：开发者可以script节点中封装组件的 JavaScript 业务逻辑。

script标签节点的基本结构如下：

.vue 组件中的 data 必须是函数

vue 规定：.vue 组件中的 data 必须是一个函数，不能直接指向一个数据对象，因此在组件中定义 data 数据节点时，下面的方式是错误的：

会导致多个组件实例共用同一份数据的问题，请参考官方给出的示例：

https://cn.vuejs.org/v2/guide/components.html

data必须是一个函数

3.3 style

vue