Vue|Vue 组件化前端|javascript|vue.js

目录
1. 概念
2. 非单文件组件的使用
2.1 组件注意点
2.2 组件嵌套
2.3 VueComponent 函数
2.4 内置关系
3. 单文件组件（重点）
3.1 Student.vue
3.2App.vue
3.3 main.js 文件：
3.4 index. html
3.5 总结

1. 概念

组件定义：实现局部功能代码和资源的集合
非单文件组件：一个文件中包含n个组件
单文件组件：一个文件只有一个组件

2. 非单文件组件的使用 1.创建组件

const student=Vue.extend({ date(){}; })
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别：
- 1.el不要写，因为最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
- 2.data必须写成函数，为避免组件被复用时，数据存在引用关系。
备注：使用template可以配置组件结构。

2. 注册(局部)组件：

new Vue({template` `,components:{组件名student} })
局部注册：靠new Vue的时候传入components选项
全局注册：靠Vue.component('组件名',组件)

3. 编写组件标签：

在html里面写

Document - 锐客网vue组件化学习

2.1 组件注意点组件名写法

一个单词组成： (首字母小写)school，(首字母大写)：School
多个单词组成：(kebab-case命名)：my-school、(CamelCase命名)：MySchool (需要Vue脚手架支持)
一般使用首字符大写的写法，到开发者工具相同
组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
可以使用name配置项指定组件在开发者工具中呈现的名字。

组件标签:

第一种写法：
第二种写法：
备注：不用使用脚手架时，会导致后续组件不能渲染。

简写方式：

const school = Vue.extend(options) 可简写为：const school = options

2.2 组件嵌套如嵌套一个student 和 teacher，student和teacher是兄弟关系
注意在创建（定义）组件时写，关系要从小到大的顺序写，如先有兄弟，再写父级关系

const school = Vue.extend({ template:``, components:{ student, teacher } })

2.3 VueComponent 函数

1.vue组件本质是个构造函数且不是程序员定义的，是Vue.extend生成的。
2. 需要写或，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。
3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent
4.关于this指向：
(1).组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象】。
(2).new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【Vue实例对象】。
5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。Vue的实例对象，以后简称vm。

2.4 内置关系