一、解决网速慢的时候用户看到花括号标记
（1）v-cloak，防止闪烁，通常用于比较大的选择器上。
给元素添加属性v-cloak，然后style里面：[v-cloak]{display:none;}
（2）{{msg}}，等价于<span v-text="msg"></span>
（3）{{{msg}}}，html转意输出，等价于<span v-html="msg"></span>（在v2.0上，三括号已经删除）
二、计算属性的使用：
（1）注意：计算属性computed的写法方式是跟methods是一样的，但是computed是属性，可以直接拿来当属性使用，而methods是方法
（2）计算属性的值取决于函数的返回值，这样函数里面就可以写相应的业务逻辑
（3）2种方式：
//1、默认get方式
new Vue({
el:'#box',
data:{
a:1
},
computed:{
b:function(){
//业务代码逻辑
return this.a + 1; //计算属性b的值取决于return的值
}
}
});
//2、完整写法：有get和set
computed:{
b:{
get:function(){
return this.a + 1;
},
set:function(val){//val即为给计算属性b赋的值
this.a=val;
}
}
}
三、vue实例自带的简单方法
vm.$el 就是指定的el元素
vm.$data 就是data对象
vm.$mount(el)手动挂载元素
vm.$options 获取自定义属性或方法（vm.$options.aa，vm.$options.show()）
vm.$destroy 销毁对象
vm.$log() 查看现在数据的状态
四、循环
（1）循环有重复的数据怎么办？加track-by="索引或uuid"，还会提高循环的性能
<li v-for="value in arr" track-by="$index">{{value}}</li>
五、过滤器
1、跟json串使用：json，类似于JSON.stringify，如果属性是json对象的时候，用于将json对象序列化显示
2、跟事件配合使用：debounce 2000，延迟执行
3、跟数组配合适用的过滤器：
limitBy 2 1，限制取几个数据，有两个参数：limitBy 取几个 从哪开始（索引）
filterBy 'a'，按字符过滤包含给定字符的数据
orderBy 1（正序，-1倒序），排序用
4、自定义过滤器：常规的model—过滤—view
语法：Vue.filter(name,function(arguments){})
<div id="box">{{a | toDou 1 2}}</div>
Vue.filter('toDou',function(input,a,b){
alert(a+','+b);//input即传a值，a/b依次为1、2
return input<10?'0'+input:''+input;
});
5、双向过滤器：完整的写法，默认的写法就是一般默认是read
//<h2>welcome</h2>
Vue.filter('filterHtml',{
read:function(input){ //model-view
alert(1);
return input.replace(/<[^<]+>/g,'');
},
write:function(val){ //view -> model
console.log(val);
return val;
}
});
六、自定义属性指令
Vue.directive(指令名称,function(接收参数){ this.el — 原生的dom对象})
<div v-red="参数"></div>，传参数
指令名称：v-red，那么对应的是red；指令必须以 v- 开头，否则不生效
//拖拽指令自定义
Vue.directive('drag',function(){
var oDiv=this.el;
oDiv.onmousedown=function(ev){
var disX=ev.clientX-oDiv.offsetLeft;
var disY=ev.clientY-oDiv.offsetTop;
document.onmousemove=function(ev){
var l=ev.clientX-disX;
var t=ev.clientY-disY;
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
};
};
});
//带参数指令
Vue.directive('red',function(color){
this.el.style.background=color;//color接收参数red
});
<span v-red="'red'">{{msg}}</span>
自定义元素指令：语法不一样
//自定义元素指令，用处不大
Vue.elementDirective('zns-red',{
bind:function(){
this.el.style.background='red';
}
});
<div id="box">
<zns-red></zns-red>
</div>
七、自定义键盘信息
Vue.directive("on").keyCodes.ctrl=17
那么就可以这么使用了：@keydown.ctrl="show"，按ctrl键触发
八、监听数据变化
vm.$watch(name,function(){})，浅度监视，适用于name为基础类型
vm.$watch(name,function(){},{deep:true})，深度监视，适用于name为基础类型和引用类型
九、Vue组件
1、组件创建注册步骤：
2种编写方式
Vue.extend()、Vue.component()、在el下面使用
注意：Vue.extend()里面可以放模板、data、methods，完全跟new Vue()实例一样。Vue.extend()就相当于Vue的一个构造函数，但是需要注意的是，如果里面需要放data数据的时候，data需要是一个函数，而且必须return一个对象，该对象就跟new Vue()里面的data对象一样。
//创建组件构造器
var Aaa=Vue.extend({
data(){
return {
msg:"MyMsg"
}
},
methods:{
click:function(){
this.msg = "changed";
}
},
template:'<h3 @click="click">{{msg}}</h3>'
});
//注册组件
Vue.component('aaa',Aaa);
var vm=new Vue({
el:'#box',
data:{
bSign:true
}
});
2、全局组件和局部组件
3、模板编写方式：
script引入方式，改type类型
直接template标签，template标签里必须包含html标签
4、动态组件：<components :is="组件名称"></components>
5、父子组件及父子组件通信
6、父组件获取子组件数据：下面这四步
其本质是：子组件把自己的数据发送到父级
子组件发送用vm.$emit("事件名称","数据名称")，父组件接收用v-on
<body>
<div id="box">
<aaa></aaa>
</div>
//模板数据
<template id="aaa">
<span>我是父级 -> {{msg}}</span>
//3、父组件绑定接收事件，接收的一边是子组件里的事件名，一边是父组件里面需要定义的事件名
<bbb @child-msg="get"></bbb>
</template>
<template id="bbb">
<h3>子组件-</h3>
//1、子组件绑定发送事件
<input type="button" value="send" @click="send">
</template>
<script>
var vm=new Vue({
el:'#box',
data:{
a:'aaa'
},
components:{
'aaa':{
data(){
return {
msg:111,
msg2:'我是父组件的数据'
}
},
template:'#aaa',
methods:{
//4、父组件接收子组件发送的数据，作为参数，改变自己里面数据
get(msg){
this.msg=msg;
}
},
components:{
'bbb':{
data(){
return {
a:'我是子组件的数据'
}
},
template:'#bbb',
methods:{
send(){//2、子组件通过$.emit主动发送数据a到父级
this.$emit('child-msg',this.a);
}
}
}
}
}
}
});
</script>
</body>
十、组件里的slot作用：
slot：位置、卡槽，主要用于占位置
1、单个slot的情况，可以默认给个默认的情况，然后组件里面没有其他元素就显示默认情况；如果有其他元素就显示元素情况
2、多个slot的情况，得区分谁是谁的问题。需要给slot名字，并且可以随意跳动位置
//模板
<aaa>
<ul slot="ul-slot"></ul>
<ol slot="ol-slot"<</ol>
</aaa>
//slot名字与上面对应即可
<template>
<h1>多个slot</h1>
<slot name="ul-slot"></slot>
<slot name-"ol-slot"></slot>
<p>多个slot结束</p>
</template>
十一、Vue路由：根据不同url地址，请求不同组件
1、SPA应用：单页面应用。下面8步记住：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.js"></script>
<script src="bower_components/vue-router/dist/vue-router.js"></script>
<style>
</style>
</head>
<body>
<div id="box">
<ul>
<li>
<a v-link="{path:'/home'}">主页</a>//1、需要有跳转链接：home、news分别对应一个组件
</li>
<li>
<a v-link="{path:'/news'}">新闻</a>
</li>
</ul>
<div>
<router-view></router-view>//2、需要有展示内容区
</div>
</div>
<script>
//3. 准备一个根组件
var App=Vue.extend();
//4. Home News组件都准备
var Home=Vue.extend({
template:'<h3>我是主页</h3>'
});
var News=Vue.extend({
template:'<h3>我是新闻</h3>'
});
//5. 准备路由
var router=new VueRouter();
//6. 关联映射
router.map({
'home':{
component:Home
},
'news':{
component:News
}
});
//7. 启动路由：将根组件，盒子是box
router.start(App,'#box');
//8. 跳转：设定默认使用哪个组件
router.redirect({
'/':'home'
});
</script>
</body>
</html>
点击之后会加class：v-link-active，可以以这个class加一些样式
2、路由嵌套（多层路由）
主要需要用到subRoutes
component:Home,
subRoutes:{
'login':{
component:{
template:'<strong>我是登录信息</strong>'
}
},
'reg':{
component:{
template:'<strong>我是注册信息</strong>'
}
}
}
3、需要拿到路由的其他信息
/details/:id/age（名字）/:age（值），给路径加参数
{{$route.params | json}}，当前所有参数
{{$route.path}}，当前路由路径
{{$route.query | json}}，当前路由的数据
十二、vue-loader
后台：nodeJs —— require，export
broserify，模块加载，只能加载js
webpack，模块加载器，一切东西都是模块，最后打包到一块
vue-loader基于webpack
1、.vue文件：放置的是vue组件代码。由三块构成
<template>html代码</template>
<style>css代码</style>
<script>js代码</script>