循環(huán)

v-for="value in data"
會有重復(fù)數(shù)據(jù)甫何？
track-by='索引'   提高循環(huán)性能
track-by='$index/uid'

過濾器

vue提供過濾器:
        capitalize  uppercase   currency....
//debounce配合事件辕羽，延遲執(zhí)行
        <input type="text" @keyup="show | debounce 2000">//延遲兩秒執(zhí)行debounce   
數(shù)據(jù)配合使用過濾器:
//limitBy 參數(shù)(取幾個)
    <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  過濾數(shù)據(jù)     
        <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){//參數(shù)是a的值
    return input<10?'0'+input:''+input;
});
{{a | toDou}}//data:{a:9}
//傳參
Vue.filter('toDou',function(input,one,two){//參數(shù)是a的值   one,two是接受的參數(shù)
    return input<10?'0'+input:''+input;
});
{{a | toDou 1 2}}//data:{a:9}

自定義指令 directive * 注意: 必須以 v-開頭

Vue.directive(指令名稱,function(參數(shù)){
    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">

監(jiān)聽數(shù)據(jù)變化

vm.$watch(name,fnCb);  //淺度
vm.$watch(name,fnCb,{deep:true});  //深度監(jiān)視 
vm.$el/$mount/$options/....
vm.$watch('a',function(){ //data:{a:111, b:2}
         alert('發(fā)生變化了');
         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">