组件化编程
模块与组件
模块
1.理解: 向外提供特定功能的 js 程序, 一般就是一个 js 文件
2.作用: 复用 js, 简化 js 的编写, 提高 js 运行效率
组件
1.理解: 用来实现局部(特定)功能效果的代码集合(html/css/js/image…..)
2.作用: 复用编码, 简化项目编码, 提高运行效率
模块化：当应用中的 js 都以模块来编写的, 那这个应用就是一个模块化的应用。
组件化：当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用。
非单文件组件
问题：
- 模板编写没有提示
- 没有构建过程, 无法将 ES6 转换成 ES5
- 不支持组件的 CSS
- 真正开发中几乎不用
创建步骤：
1.创建组件，const app = Vue.extend( data({ return xxx; }) )
注意区别：1.el 不要写，因为 el 由最终的 vm 来管理。2.data 必须写成函数，避免组件复用数据存在引用。
备注：使用 template 可以配置组件结构。
2.注册组件
1）局部注册：new Vue({ components: { app } })
2）全局注册：Vue.component('组件名'，组件)
3.编写组件标签
<hello></hello>
组件名
1.单词拼写
一个单词组成：school School均可
多个单词组成：my-school √ MySchool ×（需要脚手架支持）
尽可能回避HTML已有元素名称，可以使用name配置项指定组件在开发者工具中呈现的名字。
2.组件标签
<school></school> √
<school/> 不使用脚手架时，会导致后续组件不能渲染。
VueComponent构造函数
1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
2.我们只需要写<school></school>，Vue解析时会帮我们创建school组件的实例对象，Vue会执行new VueComponent(options)。
3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent。
4.关于this指向：
（1）组件配置中：data函数、methods函数、watch函数、computed函数，它们的this均是VueComponent实例对象。
（2）new Vue()配置中：data函数、methods函数、watch函数、computed函数，它们的this均是Vue实例对象。
5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。Vue的实例对象简称vm。
以下是VueComponent关系图谱：
单文件组件
单文件组件的使用简单，耦合度低，是开发中最常用的写法。
创建步骤：
- 引入组件
- 映射成标签
- 使用组件标签
单文件组件的书写格式详见脚手架章节