3 自定义（重要）

循环

v-for="value in data"
会有重复数据？
track-by='索引'   提高循环性能
track-by='$index/uid'

过滤器

vue提供过滤器:
        capitalize  uppercase   currency....
//debounce配合事件，延迟执行
        //延迟两秒执行debounce   
数据配合使用过滤器:
//limitBy 参数(取几个)
    
 {{value}} 
   //limitBy   限制2个
//limitBy(取几个  从哪开始)
        
 {{val}}
//filterBy  过滤数据     
        
{{val}}
//显示所有带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';
});
asdfasd 
自定义元素指令:（用处不大）
Vue.elementDirective('zns-red',{
      bind:function(){
        this.el.style.background='red';
      }
});

自定义键盘事件

普通的事件@keydown.up   @keydown.enter   @keydown.a/b/c.... 
Vue.directive('on').keyCodes.ctrl=17;//添加自定义事件

监听数据变化

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;
    }
});