1、使用vue的好处
（1）减少DOM操作
（2）提高浏览器渲染效率
（3）双向绑定，不必关注DOM，只需关注业务逻辑
2、MVVM框架
M（数据层）
V（视图层）
VM（前两者的调度者，核心层）
3、Vue实例属性
（1）el
用于绑定要操作的DOM节点
（2）data
用于保存页面中的数据，代表M层
4、v指令
（1）v-cloak
配合 [v-cloak]{display: none} 使用，可以防止网速慢，导致脚本没有及时使能，而显示出插值表达式（ {{ }} ）的情况。（只有当脚本加载完，才会显示内容）
插值表达式可以与文本节点并存
（2）v-text
数据写在指令内，渲染时会把节点内文本全部替换。
（3）v-html
会识别字符串中标签，处理后再输出，渲染时会把节点内文本全部替换。
（4）v-bind
将表达式返回值赋值给某特性。
格式：v-bind:attribute="表达式" / :attribute="表达式"。
以上为单向绑定
（5）v-model
将节点数据与实例数据进行双向绑定，只适用于表单元素。
（6）v-on
绑定事件
格式：v-on:eventName="函数" / @eventName="函数"
事件可以附加功能
.stop
阻止当前冒泡
.prevent
阻止默认行为
.self
只允许事件为自身触发，避开冒泡流
.capture
启用捕获流
.once
事件函数只会被触发一次，之后触发无效
（7）v-for
遍历对象或者数字。
遍历对象时，格式为(值，键，索引) in 对象，后两者可选；
遍历数字时，首位为1。
（8）v-if
从DOM树上，创建或删除节点。
格式：v-if: 真/假
（9）v-show
从渲染树上，显示或隐藏节点，与display无异。
格式：v-show: 真/假
5、建议class特性引用一个对象，去为元素赋予class。例子如下：
:class="classObj"
data: {
classObj: {bg: true, text: false}
}
6、v-for遍历时，应该设置:key来标识每一项，key只能是数字、字符。
7、事件函数加括号后，开启传参功能。
8、使用vue devtools时，必须使用开发版本（vue.js），而不是生产版本（vue.min.js）
9、过滤器——对值进行处理后，再返回新值。
（1）只能应用于插值表达式、v-bind表达式
（2）格式：原值 | 过滤器1 | 过滤器2...
（3）过滤器中的函数参数可以有多个，但是默认第一个参数为过滤原值
（4）优先调用私有过滤器
10、全局自定义按键修饰符（便于keyup使用）
格式：Vue.config.keyCodes.f2 = 113（随后使用keyup.f2）
11、全局属性名尾部没有S，私有属性名尾部有S。
12、全局自定义指令
格式：Vue.directive(指令, 钩子函数)
（1）指令名不带v-，v-是用来启用指令的。
（2）钩子函数，就是官方规定命名的函数，函数体由开发者编写，标识函数触发的时机，默认第一个参数为el，实质为将要绑定该指令的dom节点。
（3）匿名的钩子函数，默认是为bind、update类型的钩子函数。
13、生命周期
（1）生命周期钩子 = 生命周期函数 = 生命周期事件
（2）创建实例、挂载DOM、更新DOM、销毁实例（各2个事件，共8个）
14、vue-resourse.js
作用：在Vue类中添加 $http对象，扩展请求功能。
（1）在使用脚手架时，配置config文件夹内容，可以解决跨域问题。
（2）全局配置域名时，url为相对路径。
（3）emulateJSON 设置为 true——解决Web服务器无法处理编码为application/json请求的问题。
15、过渡
（1）设置css类
- .v-enter
进入阶段的开始 - .v-enter-to
进入阶段的结束 - .v-leave
离开阶段的开始 - .v-leave-to
离开阶段的结束 - .v-enter-active && .v-leave-active
只设置transition
若前缀为v，则作用于没有设置name的 transition标签。
例：.test-enter只作用于<transition name="test"></transition>
（2）使用transition标签，将需要过渡的元素包裹起来，只能是直接的父子关系。
（3）过渡元素需要设置v-if，触发过渡事件。
16、动画
与过渡的使用方法差异不大。
17、搭配animate.css，丰富过渡和动画
在transition标签中，:duration用于设置时长，必须使用enter-class等特性，装载库提供的类名（优先级比上述的类名高）。
18、钩子函数（运用于过渡&&动画）
（1）可以脱离过渡动画，独立使用
（2）常用于制作半场动画（单程）
（3）enter、leave尾部，必须调用done函数，表示立即执行下个钩子函数
（4）enter、leave内部，必须存在el.offsetwidth，是出现动画效果的关键
（5）各钩子函数的主要作用
- bofore-enter
初始帧，也起着重置作用 - enter
末尾帧、控制等主要设置 - after-enter
隐藏元素，为下次半场动画作铺垫
19、组件切换过渡
（1）双切换
v-if && v-else
（2）多切换
<component :is="comName"></component>
（3）存在多种切换模式，提供不同的过渡效果
20、其他过渡效果
appear特性
初始渲染的进场过渡
v-move指令
重排时，提供过渡效果
21、列表过渡
（1）<transition-group></transition-group>
（2）tag特性
为<transition-group>的子元素包裹一层标签，若不设置，则默认为span
22、状态过渡
各种情景都可以存在过渡，如数字、颜色、图像等。
23、组件化&&模块化
组件化
基于UI，适用于前端。
模块化
基于代码逻辑，适用于前后端。
24、全局组件
（1）创建全局组件
Vue.component( 'myCom', { template: '<h1></h1>' } )
（2）组件名转换
myCom对应<my-com>
（3）template必须是单独分支，只有一个根元素
25、局部组件
创建局部组件
components: {
myCom: { template: '<h1></h1>' }
}
26、创建模板的其他方法（适用于全局、局部组件）
template值可以为一个选择器，在Vue实例作用的标签外，定义<template 选择器>
27、组件和实例的data区别
（1）概念
- 组件是可复用的，但组件之间的data是独立的。
- 实例data，在其作用域下，所有的元素共享其data。
（2）组件data例子
//以函数返回对象的形式，确保每个组件的data都是不同对象，占用不同的内存区。
data(){
return {
data1: xxx，
data2: yyy
}
}
28、父组件向子组件传值（props-down）
概念
局部组件可以读写实例的data；局部组件的template可以读写该组件的data，但只读该组件的props
29、子组件向父组件传值（event-up）
概念
this.$emit()可以带参，触发父组件的自定义事件。
30、父子通信&&兄弟通信
（1）$refs（父向子）
每个实例中，都有一个$refs数组，存放定义了ref特性的元素，以便读写子组件。
（2）$emit（子向父）
（3）$on（兄弟之间）
31、前端路由&&后端路由
（1）前端路由
单页应用中，通过改变hash值，来改变页面组件内容（无刷新）。
（2）后端路由
每个url，通过路由分发，对应服务器上不同的资源。
32、路由基本操作
（1）定义组件
（2）创建VueRouter实例，定义路由规则
const routerObj = new VueRouter({
routes: [
{ path: '#/route1', component: 组件对象1 },
{ path: '#/route2', component: 组件对象2 }
]
})
（3）在Vue实例中，定义路由
const vm = new Vue({
router: routerObj
})
（4）创建<router-view>占位符，若url中hash值相匹配，则该处渲染相应组件
33、<router-link>更改路由
（1）<router-link>默认渲染为<a>，可以通过tag特性，更改渲染产出，且保持 to链接。
（2）定义 to='/router1'特性，链接hash值。
（3）当前路由对应的<router-link>会自动赋予.router-link-active类，也可以通过路由实例中设置linkActiveClass属性，来更改此类名。
34、路由重定向
//根路径跳转到route1
{ path: '/', redirect: '/route1' }
35、路由传参
每个已匹配路由的组件中，都有一个$route对象，包含对应的路由信息。
（1）query
无需更改路由规则，以? &的方式，参数存储在$route.query中。
<router-link to="/route1?id=666&name=abc"></router-link>
const router = new VueRouter({
routes: [ { path: '/route1', component: 组件对象1 } ]
})
（2）params
需要更改路由规则，以 /: 的方式，参数存储在$route.params中。
<router-link to="/route1/666/abc"></router-link>
const router = new VueRouter({
routes: [ { path: '/route1/:id/:name', component: 组件对象1 } ]
})
36、路由嵌套
概念
路由切换组件后，当前组件中存在下层路由，继续切换内部小组件。
实现
路由规则中，定义children数组，包含下层路由规则。
const router = new VueRouter({
routes: [{
path: '/route1',
component: 组件对象1,
children: [
//对应 /route1/childRoute1
{ path: 'childRoute1', component: 子组件对象1 },
//对应 /route1/childRoute2
{ path: 'childRoute2', component: 子组件对象2 }
]
}]
})
37、命名视图
加入组件名后，使得多个不同内容的同级<router-view>，同时存在页面中。
<router-view name="comName1">
<router-view name="comName2">
{
path: '/',
components: {
'comName1': 组件对象1,
'comName2': 组件对象2,
}
}
38、watch && computed && methods
（1）watch
监听其对象属性变化，若属性值发生变化，则触发对应方法。
方法名为详细属性名，如$route.path
（2）computed
计算，若参与计算的属性发生变化，则触发对应方法。
方法必须返回计算结果，调用方法时，不会运行该方法，而是直接读取上次计算的缓存值，与调用普通data无异。
（3）methods
专注于处理业务逻辑。
39、render（自动调用，为什么钩子流程图中没有？）
区别于其他组件渲染的方式，render方法会将实例作用域的根元素，完全替换成所要渲染的组件。
render(createElements){
return createElements( 组件对象 )
}
