1. 指令
- v-cloak ：防止插值表达式闪动直到编译结束显示
- 插值表达式：{{xxx}}的形式，可以是值或表达式（不能是 js 语句，比如if、for）
github地址
- v-text ：普通文本渲染
- v-html ：html标签渲染
在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html
- v-bind 指令 ：动态属性绑定
- class与style的动态设置
github地址
- v-if、v-else-if、v-else 指令 ：有条件地渲染元素
github地址
- v-for 指令 ：循环渲染元素
github地址- 为什么要有key，且不用index(即数组的下标)来作为key？
虚拟dom中，diff算法会根据sel和key来判断节点是否可以复用。
- v-on 指令 ：绑定监听事件
- 修饰符
- .stop：阻止冒泡事件，调用 event.stopPropagation()
- .prevent：阻止默认事件：调用 event.preventDefault()
- .once：只触发一次
vue 自己绑定的事件需要自己解绑！！！
- v-model 指令 ：表单数据的双向绑定
- v-model的本质是一个语法糖。在组件中不建议使用，自行设计即可。
手动实现：input中的值发生变化时触发oninput，把最新的value传递给绑定的值。 <input v-model="sth" /> 第一行的代码其实只是第二行的语法糖 <input :value="sth" @input="sth = $event.target.value" /> 如果是复选框 <input type="checkbox" :checked="status" @change="status = $event.target.checked" />
- 修饰符
- .lazy - 取代 input 变成 change 事件
- .number - 输入字符串转为有效的数字
- .trim - 输入首尾空格过滤
- v-slot 指令 ：插槽，子组件提供占位符，父组件在占位符填充代码
- 自定义指令
钩子函数
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode >更新之前
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。
钩子函数参数
el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下 property：
- name：指令名，不包括 v- 前缀。
- value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
- oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
- expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
- arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
- modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
除了 el 之外，其它参数都应该是只读的，切勿修改。
2. 计算、监听、过滤属性
- computed：计算属性的结果会被缓存，依赖的data变化才会重新计算。
github地址
- watch：监听data变化，引用类型要深度监听，且拿不到 oldVal
github地址
- filter：按要求对值进行过滤和修改
github地址
3. 生命周期（包含父子组件）
- beforeCreate:：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。(服务器端渲染期间被调用)
- created：可以访问到data，(服务器端渲染期间被调用)
- beforeMount : 在挂载开始之前被调用：相关的渲染函数首次被调用
- mounted : el 被新创建的 vm.$el 替换, 挂载成功
一般在此时调用ajax，js是单线程的，dom加载完才会进行异步操作
// mounted 不保证子组件都被挂载。如果等到视图渲染完毕，可以在 mounted 内部使用 vm.$nextTick：
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}
- beforeUpdate : 数据更新时调用
- updated :组件 DOM 已经更新完毕
// updated 不保证子组件都被重绘。如果等到视图重绘完毕，可以在 updated 里使用 vm.$nextTick：
updated: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been re-rendered
})
}
- beforeDestory()：组件销毁前。
一般在此时解绑自定义事件和清除定时器。
- destoryed()：组件销毁之后
不常用
- activated：当组件激活的时候调用
- deactivated：当组件停用的时候调用
拓展：父子组件的生命周期
- 加载渲染过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
- 组件更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated
- 销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
4. 组件通讯：父子传值&vuex
- vuex：组件间状态共享
- state ：存放所有状态
- getters ：加工state成员给外界
- mutations ：state成员修改、删除（设置为null）操作
- actions ：异步操作，可整合调用mutations
- modules ：模块化状态管理
5. ref属性和$nextTick
- 在DOM 元素上使用，引用指向 DOM 元素；
- 在子组件上使用，引用指向组件实例，可调用子组件的data和mothods等；
$refs 在组件渲染之后生效，不是响应式的。应该避免在模板或计算属性中访问。
<!-- dom 元素 --> <p ref="p">hello</p> <!-- 子组件 --> <child-component ref="child"></child-component>this.$refs.xxx();
- Vue.nextTick 在dom渲染完成后触发，获取最新dom节点。
- Vue 异步队列使用 Promise.then、MutationObserver 和 setImmediate，如果不支持会采用 setTimeout(fn, 0) 代替。
this.$nextTick( () => { // code })
6. 动态组件和组件懒加载
- 动态组件：根据条件加载不同组件
- 组件懒加载（异步加载），一般用于加载大组件。
// 具体用法 components: { a: () => import('./components/a.vue') }
7. mixin混入：抽离组件公共逻辑
- 缺点：多个
mixin可能会造成命名冲突，多个mixin同时存在，复杂度较高
8. vue-router
路由模式
- hash 模式：默认模式，to B的系统推荐
hash，简单易用。 - H5 history 模式：不带
#，to C的系统可以考虑H5 history，seo更友好，但需要服务端支持。
