组件
定义组件：
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样。
注意 data 必须写成函数，避免组件被复用时，数据存在引用关系。
注册组件：
1.局部注册：靠new Vue的时候传入components选项
2.全局注册：靠Vue.component('组件名',组件)
关于组件名:
可以使用name配置项指定组件在开发者工具中呈现的名字。
使用<keep-alive>时也会用到组件名。
一个简写方式：
const school = Vue.extend(options) 可简写为：const school = options
关于VueComponent
1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
2.我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。
3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！
4.VueComponent.prototype.__proto__ === Vue.prototype，即组件实例对象（vc）可以访问到 Vue 原型上的属性、方法。
脚手架
关于不同版本的Vue：
1.vue.js与vue.runtime.xxx.js的区别：
(1).vue.js是完整版的Vue，包含：核心功能+模板解析器。
(2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。
使用vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh
ref
应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）。
props
props是只读的，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。
mixin
功能：可以把多个组件共用的配置提取成一个混入对象。
{
data() {....},
methods: {....},
mounted() {...}
....
}
全局混入：Vue.mixin(xxx)
局部混入：mixins:['xxx']
缺点：数据来源不清晰。
插件plugin
功能：用于增强Vue（类似于引入一个库，如lodash）
定义插件：
对象.install = function (Vue, options) {
// 1. 添加全局过滤器
Vue.filter(....)
// 2. 添加全局指令
Vue.directive(....)
// 3. 配置全局混入(合)
Vue.mixin(....)
// 4. 添加实例方法
Vue.prototype.$myMethod = function () {...}
Vue.prototype.$myProperty = xxxx
}
使用插件：Vue.use()
常用插件：vuex, vue-router, element-ui等。
总结TodoList案例
组件通信（子 => 父）：父组件传递一个函数给子组件，让其调用。
webStorage
1.存储内容大小一般支持5MB左右（不同浏览器可能还不一样）
2.浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
3.相关API：
(1)xxxxxStorage.setItem('key', 'value'); 该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。(只能存String)
(2)xxxxxStorage.getItem('person');
(3)xxxxxStorage.removeItem('key');
(4)xxxxxStorage.clear() 该方法会清空存储中的所有数据。
4.备注：
(1) SessionStorage存储的内容会随着浏览器窗口关闭而消失。
(2) LocalStorage存储的内容，需要手动清除才会消失。
自定义事件
(备注：绑定==监听，解绑==不再监听)
1.一种组件间通信的方式，适用于：子组件 => 父组件
2.使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件。
3.绑定自定义事件：
(1).第一种方式，在父组件中：<Demo @atguigu="test"/> 或 <Demo v-on:atguigu="test"/>
(2).第二种方式，在父组件中：
<Demo ref="demo"/>
......
mounted(){
this.$refs.xxx.$on('atguigu',this.test)
}
(3).若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。
4.触发自定义事件：this.$emit('atguigu',数据)
5.解绑自定义事件：this.$off('atguigu')（即不再监听atguigu事件）
6.组件上也可以绑定原生DOM事件，需要使用native修饰符。(事件挂在组件内部的根元素上，这也是组件必须有根元素的原因之一)
7.注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！（这里的回调函数调用时会指定this，但methods中的函数已经被硬绑定了this，可能是经过了.bind(this)处理，所以不会出问题。）
全局事件总线
起源：
需要一个A，满足：1.所有组件都能访问到，2.它身上有$on, $emit等方法。（这样可以满足任意两个组件之间通信的需求）
挂在window上不合适，挂在VueComponent.prototype上也不合适，因为每次定义组件都会生成全新的VueComponent。可以挂在Vue.prototype上。
为了满足条件2，A可以是一个VueComponent实例，也可以是Vue实例。
1.一种组件间通信的方式，适用于任意组件间通信。
2.安装全局事件总线：
new Vue({
......
beforeCreate() {
Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
},
......
})
3.使用事件总线：
(1). 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。
methods(){
demo(data){......}
}
......
mounted() {
this.$bus.$on('xxxx',this.demo)
}
(2). 提供数据：this.$bus.$emit('xxxx',数据)
4.最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。
消息订阅与发布（pubsub）
1.一种组件间通信的方式，适用于任意组件间通信。
2.使用步骤：
(1). 安装pubsub：npm i pubsub-js
(2). 引入: import pubsub from 'pubsub-js'
3.接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。
methods(){
demo(data){......}
}
......
mounted() {
this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
}
- 提供数据：
pubsub.publish('xxx',数据) - 最好在beforeDestroy钩子中，用
pubSub.unsubscribe(pid)去取消订阅。
nextTick
- 语法：
this.$nextTick(回调函数) - 作用：在下一次 DOM 更新结束后执行其指定的回调。
- 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。
插槽slot
1.作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 => 子组件 。
2.分类：默认插槽、具名插槽、作用域插槽。
3.使用方式：
(1).默认插槽：
父组件中：
<Category>
<div>html结构1</div>
</Category>
子组件中：
<template>
<div>
<!-- 定义插槽 -->
<slot>插槽默认内容...</slot>
</div>
</template>
(2). 具名插槽：
父组件中：
<Category>
<template slot="center">
<div>html结构1</div>
</template>
<template v-slot:footer>
<div>html结构2</div>
</template>
</Category>
子组件中：
<template>
<div>
<!-- 定义插槽 -->
<slot name="center">插槽默认内容...</slot>
<slot name="footer">插槽默认内容...</slot>
</div>
</template>
(3).作用域插槽：
解决的问题：父组件传入的HTML结构中需要使用子组件的数据。
具体编码：
父组件中：
<Category>
<template slot-scope="scopeData">
<!-- 生成的是h4标题 -->
<h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
</template>
</Category>
子组件中：
<template>
<div>
<slot :games="games"></slot>
</div>
</template>
<script>
export default {
name:'Category',
data() {
return {
games:['红色警戒','穿越火线','劲舞团','超级玛丽']
}
},
}
</script>
略
Vue封装的过度与动画（视频91-95）
Vue脚手架配置代理（视频96-97）
github案例（视频98-100）
网友评论