循环
v-for="value in data"
会有重复数据？
track-by='索引' 提高循环性能
track-by='$index/uid'
过滤器
vue提供过滤器:
capitalize uppercase currency....
//debounce配合事件，延迟执行
<input type="text" @keyup="show | debounce 2000">//延迟两秒执行debounce
数据配合使用过滤器:
//limitBy 参数(取几个)
<li v-for="value in arr | limitBy 2"> {{value}} </li> //limitBy 限制2个
//limitBy(取几个 从哪开始)
<li v-for="val in arr | limitBy 2 arr.length-2"> {{val}}</li>
//filterBy 过滤数据
<li v-for="val in arr | filterBy 'w'">{{val}}</li>//显示所有带w的
//orderBy 排序
//todo 未确定
orderBy 谁 1/-1
1 -> 正序
2 -> 倒序
自定义过滤器: filter
自定义过滤器: filter model ->过滤 -> view
Vue.filter('toDou',function(input){//参数是a的值
return input<10?'0'+input:''+input;
});
{{a | toDou}}//data:{a:9}
//传参
Vue.filter('toDou',function(input,one,two){//参数是a的值 one,two是接受的参数
return input<10?'0'+input:''+input;
});
{{a | toDou 1 2}}//data:{a:9}
自定义指令 directive * 注意: 必须以 v-开头
Vue.directive(指令名称,function(参数){
this.el -> 原生DOM元素
});
Vue.directive('red',function(){
this.el.style.background='red';
});
<span v-red>asdfasd </span>
自定义元素指令:（用处不大）
Vue.elementDirective('zns-red',{
bind:function(){
this.el.style.background='red';
}
});
<zns-red></zns-red>
自定义键盘事件
普通的事件@keydown.up @keydown.enter @keydown.a/b/c....
Vue.directive('on').keyCodes.ctrl=17;//添加自定义事件
<input type="text" @keydown.ctrl="show">
监听数据变化
vm.$watch(name,fnCb); //浅度
vm.$watch(name,fnCb,{deep:true}); //深度监视
vm.$el/$mount/$options/....
vm.$watch('a',function(){ //data:{a:111, b:2}
alert('发生变化了');
this.b=this.a+100;
});
document.onclick=function(){ vm.a=1;};
双向过滤
Vue.filter('filterHtml',{
read:function(input){ //model-view
alert(1);
return input.replace(/<[^<]+>/g,'');
},
write:function(val){ //view -> model
console.log(val);
return val;
}
});
<input type="text" v-model="msg | filterHtml">
