第二章、Vue组件化编程

1、定义

1、模块

1、理解：向外提供特定功能的js程序，一般是一个js文件

2、作用：

2、组件

1、组件：实现应用中局部功能代码和资源的集合

2、作用：复用编码，简化项目编码

3、图片

3、模块化

1、当应用的js都以模块来编写的，那这个应用就是一个模块化的应用

4、组件化

1、当应用中的功能都是多组件的方式来编写的，那这个应用是一个组件化的应用

2、Vue使用组件（非文件组件）

1、Vue使用组件的三大步骤

1、定义组件（创建组件）

2、注册组件

3、使用组件（写组件标签）

2、如何定义一个组件？

1、格式

Vue.extend(options) 
其中options和new Vue(optinos)时传入的那个options几乎一样，但是也有点区别

2、区别

1、el不要写，为什么？    因为：最终组件都是vm管理，由vm中的el决定服务哪个容器
2、data必须写成函数，为什么？   因为：避免组件被复用时，数据存在引用关系
3、使用template可以配置组件结构

3、如何注册组件？

1、局部注册

靠new Vue的时候传入的Options选项

2、全局属性

靠Vue.component('组件名'，组件)

4、如何使用组件？

1、使用：就直接写

<创建的组件名></创建的组件名>

5、几个组件注意点

1、关于组件名

1、一个单词组成

1、第一种写法（首字母小写）

2、第二种方法（首字母大写）

2、多个单词组成

1、第一种写法（Kebab-case）：my-school

2、第二种写法（CamelCase）：MySchool（需要Vue脚手架）

2、关于组件标签

1、第一种写法：\>\

2、第二种写法：\

3、一个简写方法

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

6、关于VueComponent

1、介绍

1、school组件的本质是一个名为VueComponent的构造函数，是Vue.extend生成的

2、我们只需要写\\、Vue解析时会帮我们创建school组件的实例对象

3、特别注意：每次调用Vue.extend，返回的都是一个新的VueComponent！！！

2、关于this指向

1、组件配置中

1、data函数、methods函数、watch函数、conputed中的函数，它们的this均为【VueCompoent实例对象】

2、new Vue(Component)配置中

1、data函数、methods函数、watch函数、conputed中的函数，它们的this均为【Vue实例对象】

3、注意

1、VueComponent的实例对象、以后简称为VC（也可以称为是组件实例对象）

2、Vue的实例对象，简称为vm

7、一个重要的内置关系

1、是什么

1、一个重要的内置关系：

VueComponent.prototype.__proto__===Vue.prototype

2、为什么要有这个

1、让组件实例对象（vc）可以访问到Vue原型上的属性、方法

2、图示