一、解决网速慢的时候用户看到花括号标记
（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为基础类型和引用类型
原文地址：https://www.cnblogs.com/goloving/p/8619961.html