前言

• 本笔记参考视频，尚硅谷:BV1Zy4y1K7SH p53 - p66

简介

• 用来实现局部功能的代码和资源的集合；可以复用编码，简化项目编码，提高运行效率
• 当应用中的 js 都以模块来编写的，那这个应用就是一个模块化的应用
• 当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用

非单文件组件

• Vue中使用组件的三大步骤：
  1. 定义组件(创建组件)
  2. 注册组件
  3. 使用组件(写组件标签)
• 如何定义一个组件？
  1. 使用Vue.extend(options)创建，其中options和new Vue(options)时传入的options几乎一样，但也有点区别：
  2. el不要写，为什么？最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器
  3. data必须写成函数，为什么？避免组件被复用时，数据存在引用关系
• 如何注册组件？
  1. 局部注册：new Vue的时候传入components选项
  2. 全局注册：Vue.component(‘组件名’,组件)
• 编写组件标签：

关于组件名

• 一个单词组成：
  1. 第一种写法（首字母小写）：school
  2. 第二种写法（首字母大写）：School
• 多个单词组成：
  1. 第一种写法（kebab-case命名）：my-school
  2. 第二种写法（CamelCase命名）：MySchool （需要Vue脚手架支持）
• 备注：
  1. 组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行
  2. 可以使用name配置项指定组件在开发者工具中呈现的名字
• 关于组件标签：
  1. 第一种写法：
  2. 第二种写法：
• 备注：不使用脚手架时，会导致后续组件不能渲染
• 一个简写方式：const school = Vue.extend(options)可简写为：const school = options

关于VueComponent

1. school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
2. 我们只需要写或，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)
3. 特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！

关于this指向

1. 组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是VueComponent实例对象
2. new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是Vue实例对象

一个重要的内置关系

• 前置知识，原型链：
  
• 一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
• 为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue 原型上的属性、方法
  

单文件组件

• 文件后缀.vue，然后将 .vue =>.js，实现这一步可以自己webpack搭建工作流，但最好使用vue搭建好的webpack，也就是脚手架
• .vue文件的命名同组件的命名，推荐首字母大写的那两个写法
• vsCode 安装vue的高亮插件 vetur
• 单文件集合了html、css和js，分别用