Vue|第二章（Vue组件化编程）前端|javascript|vue.js

第二章：Vue组件化编程 2.1：模块与组件、模块化与组件化

模块
1. 理解：向外提供特定功能的js程序，一般就是一个js文件。
2. 为什么：js文件很多很复杂。
3. 作用：复用js，简化js的编写，提高js运行效率。
组件
1. 理解：用来实现局部(特定)功能效果的代码集合(html/css/js/images)
2. 为什么：一个界面的功能很复杂
3. 作用：复用编码，简单项目编码，提高运行效率。
模块化
当应用中的js都以模块来编写的，那这个应用就是一个模块化的应用。
组件化
当应用中的功能都是多组件的方式编写的，那这个应用就是一个组件化的应用。

2.2：非单文件组件

基本使用
1. Vue中使用组件的三大步骤：定义组件(创建组件)、注册组件、使用组件(写组件标签)
2. 如何定义一个组件？
  使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有一些区别：
  - el不要写：———— 最终所有的组件都要经过一个vm的管理，有vm中的el决定服务那个容器。
  - data必须写成函数式：———— 避免组件被复用时，数据存在引用关系。
  注意：使用template可以配置组件结构。
3. 如何注册组件？
  - 局部注册：靠new Vue的时候传入components选项。
  - 全局注册：靠Vue.component('组件名', 组价)。
4. 编写组件标签：<组件名>
几个注意点
1. 关于组件名：
  - 一个单词组成：
    1. 第一种写法(首字母小写)：school
    2. 第二种写法(首字母大写)：School
  - 多个单词组成：
    1. 第一种写法(kebab-case命名)：my-school
    2. 第二种写法(CamelCase命名)：MySchool(需要Vue脚手架)
  - 备注：
    1. 组件名尽可能回避HTML中已有元素名称，例如：h2、H2都不行。
    2. 可以使用name配置项指定组件在开发者工具中呈现的名字。
2. 关于组件标签
  - 第一种写法：
  - 第二种写法：
  - 备注：不不用脚手架时，会导致后续组件不能渲染。
3. 一个简写方式：const school = Vue.extend(options)可简写为const school = options
【Vue|第二章（Vue组件化编程）】关于VueComponent
1. school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
2. 我们只需要写或，Vue解析时会帮我们创建schoo组件的实例对象。即Vue帮我们执行的：new VueComponent(options)
3. 特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent
4. 关于this指向：
  - 组件配置中：data函数、methods中的函数、watch中的函数、complated中的函数，他们的this均是【VueComponent实例对象】
  - new Vue(options)配置中：data函数、methods中的函数、watch中的函数、complated中的函数，他们的this均是【Vue实例对象】
重要的内置关系
1. VueComponent.prototype.__proto__ === Vue.prototype
2. 让组件实例对象(vc)可以访问到Vue原型上的属性、方法。
  
  文章图片