vue教程2-07 自定义指令

自定义指令:    一、属性:    Vue.directive(指令名称,function(参数){        this.el    -> 原生DOM元素    });    
     
    指令名称:     v-red  ->  red    * 注意: 必须以 v-开头    拖拽:    -------------------------------　　二、自定义元素指令:（用处不大）    Vue.elementDirective('zns-red',{        bind:function(){            this.el.style.background='red';        }    });

 

自定义指令写法一：

     
        
                  asdfasd            
     
Vue.directive('red',function(){            this.el.style.background='red';        });        window.onload=function(){            var vm=new Vue({                el:'#box',                data:{                    msg:'welcome'                }            });        };

自定义指令写法二：推荐写法

     
        
                  asdfasd            
     
//这里的color可以传参Vue.directive('red',function(color){            this.el.style.background=color;        });        window.onload=function(){            var vm=new Vue({                el:'#box',                data:{                    a:'blue'                }            });        };

自定义指令写法三：

     
        
                  asdfasd            
     
Vue.directive('red',{            bind:function(){                this.el.style.background='red';            }        });        window.onload=function(){            var vm=new Vue({                el:'#box'            });        };

 

自定义指令：拖拽drag

 

自定义元素指令