1.绑定计算后数据，三种方式：
》1.红色框，通过method
》2.黄色框，通过computed
》3.蓝色框，通过watch
推荐computed，vue对computed做了缓存，只有用到的数据有改变时，才会调用；
method中，只要有数据改变（比如number），就会调用，在数据和业务逻辑复杂时，严重降低了性能；
watch方法，代码量多一倍，一般用于检测数据变化。
2.watch监听对象内部属性，两种方法：
》1.绿色框
通过deep属性，vue会遍历对象的每个属性，并为每个属性绑定上监听函数，不推荐
》2.蓝色框
通过字符串形式，直接监听属性值，推荐
3.v-for，每一个循环出来的标签要绑定一个key，用于缓存。
一般和服务器中列表的id是对应的，
不要用index，列表的顺序和列表的内容没有什么关系，可能会导致缓存错误的内容。
4.checkbox复选框绑定值
》1.利用v-model绑定数据
data: {
active: true
},
template:`
<input type="checkbox" v-model="active" />
`,
选中状态和数据中的active是动态绑定的。
》2.利用v-model和v-bind:value，使用数组控制一组checkbox
data:{
arr: [1,2,3]
},
template: `
<p>
<input type="checkbox" v-model="arr" :value="1" />
<input type="checkbox" v-model="arr" :value="2" />
<input type="checkbox" v-model="arr" :value="3" />
<input type="checkbox" v-model="arr" :value="4" />
</p>
`,
前三个是选中状态，最后一个没有选中。由arr中的值确定是否选中。
5.v-once指令，用于标签内是一些静态内容，避免vue再对其进行检测，节省部分性能开销。
6.vue实例创建方式，两种：
》》1.普通
new Vue({
el: "#root",
data: {},
...
});
》》2.继承自定义组件
*********************
组件扩展的两种方式
》》1.如上面截图
》》2.extends关键字
new Vue({
extends: vueComp,
el: "#root",
...
});
组件中的覆盖、依次执行情况、props属性的定义方式和上图一样，
一般用于大型项目中对公共组件的扩展。
7.父子组件之间的双向数据绑定
父子组建双向数据绑定，绑定的是父组件的数据和子组件的属性，需要指定。
按照一般思路，父组件中的模版这样定义：
<my-comp :value="value" @input="value=arguments[0]"></my-comp>
这里简写成：
<my-comp v-model="value"></my-comp>
v-model 处理了两个操作，
绑定value属性为父组件中的数据；（默认为value）
监听input事件并将数据传递给父组件数据。（text类型input默认为input事件，如果是checkbox为change）
子组件中定义model选项：
model: {
prop: a,
event: click
}
改变v-model指令默认的属性名和事件名，例：
8.跨级父子组件之间需要通信，采用provide / inject声明，例子：
有几个特殊情况：
》》1.
会报错，this是undefined，报错原因：provide创建时vue实例还没有创建完，
把provide写成函数返回对象的形式可以避免：
》》2.
value动态绑定，但通过input改变值时，通过provide/inject传递到下面的值并不会动态改变。
原因：provide/inject的数据没有reactive效果
解决办法：
通过Object.defineProperty，据说vue的双向数据绑定原理就是根据这个函数实现的，但是测试会报错，堆栈溢出？？？
9.template会被编译成render函数，方式如下：
》》子组件：
》》父组件
注意：slot标签直接编译为字符串，不再调用createElement.
》》》》》》》》》可以去掉组件中的on，直接在父组件中声明nativeOn，nativeOn会把事件绑定到子组件的根元素上，实例：
注意，如果写成：
nativeOn: {
click(){
this.clicked();
}
}
会报错this是undefined
10.路由参数的获取
this.$route.params.id
任意组件，只要在当前路径下，都有$route属性，都可以调用；
但是：如果子组件代码中使用了this.$route，只能做为route配置下的组件，不能做为其他地方也能用的组件，相当于组件与vue发生了耦合。
所以，推荐下面可以解耦的方式：
routes: [
{
path: "/app:id",
component: App,
props: true
}
]
// App组件中这样调用：
export default {
props:["id"],
mounted(){
this.id;
}
}
其中，routes中的props属性可以是布尔值，也可以是对象函数：
1.对象：手动强制指定id，只会更改传到组件的props中id的值
props: {
id: "23333"
}
2.函数：可以指定传递的计算后id
props: (route)=>({ id: route.query.name});
localhost:8080/#/app/2333?name=jhon&age=18
返回的是jhon,
当前路由信息对象会做为参数传给函数
11.命名视图
》》》》正常情况下：
.vue文件：
<router-view></router-view>
.routes文件：
{
path: "/app",
component: App
}
》》》》命名视图：
.vue文件：
<router-view></router-view>
<router-view name="abc"></router-view>
.routes文件：
{
path: "/app",
components: {
default: App, //没有名字的router-view对应default
abc: Login
}
}
命名视图常用于上面导航，左边菜单的情况（也可以用其他方式实现）
12.导航守卫（路由钩子函数）
》》》vueRouter实例的钩子函数：
（1） router.beforeEach = function(to, from, next) {};
（2） router.beforeResolve = function( to, from, next ){};
（3） router.afterEach = function( to, from, next ){};
》》》routes.js路由配置中的钩子函数：
{
path: "/app",
component: App,
beforeEnter (to, from ,next) {}
}
》》》组件中的钩子函数：
beforeRouterEnter: function( to, from, next){},
beforeRouterUpdate: function( to, from, next ){},
beforeRouterLeave: function( to, from, next ){}
导航守卫常用于 检测到没有登录时跳转到登录界面，next("/login")
组件中的beforeUpdate，当由页面 "localhost:8080/#/app/123" 跳转到页面"localhost:8080/#/app/456"时，只有id不同，
App组件只会触发beforeUpdate进行更新，不会触发beforeEnter，也不会触发mounted，
常用于在页面中监听传过来的id，如果不正确及时弹出错误信息。
beforeRouterEnter触发时，组件实例还没有创建出来，this是undefined，需要在next中指定参数为函数，并将当前实例对象做为参数调用：
beforeRouterEnter: function( to, from, next){
next( function( vm ){
vm.id;
});
}
beforeRouterUpdate中可以调用this.
beforeRouteLeave当离开当前组件，进入下一个组件之前调用（beforeRouteUpdate不会调用）,
常用于用户改变了表单，离开前提醒用户是否保存。