vue怎么自定义指令??

最近看看vue中自定义指令,感觉vue的指令和angular1的指令相差较大

<script>
    
    //指令钩子函数:
    /*
    bind   只调用一次,指令第一次绑定到元素的时调用
    inserted 被指令绑定指令的元素插入 父节点的时候调用
    update  被绑定的元素模版只要发生变化,就会触发(通过比较模板变化前后)
    componentUpdated 被绑定元素所在模版完成一次更新周期时被触发
    unbind 指令被解除绑定的时候
    */

/*
定义指令回调函数(钩子函数的几个参数的意义)
第一个参数:绑定指令的元素html
第二个参数:对象的形式输出,自定义指令的信息(指令名字,使用的名字,包括我们传入的值,我们可以利用这个参数,在钩子函数中进行相关操作),
第三个参数:输出绑定指令的元素的虚拟dom节点信息
*/ const selfcomponent={ template:`<div> <p>自定义组件</p> <input v-model="com"/> <p v-my-dir="com">组件的内容:跟随变色</p> </div>`, //props:['color'], data(){ return { com:'#ddd'}//给一个默认值 }, directives:{ "myDir":{//指令的名字 bind:function(el,binding,nodeDom){ console.log(binding); console.log("bind"); el.style="color:"+binding.value; },
inserted:function(){ console.log(
"instered"); }, update:function(el,binding,nodeDom){//每次在input中输入信息,都会触发这个函数 console.log("update"); el.style="color:"+binding.value; }, componentUpdated:function(el,bindging,nodeDom){ console.log("componented"); }, unbind:function(el,binding,nodeDom){ console.log("unbind"); } } } };

  var app =new Vue({
    el:"#app",
    data:{
      color:'red',
     },
    methods:{
  
    },
    components:{
      selfcomponent
    }
  });


</script>
<div id="app">
     <selfcomponent ></selfcomponent>                             
</div>

以上实现的效果是,在输入框输入颜色信息,例如:red,#ddd.....组件中的信息,会随着你输入的信息变色

 

当然也可以全局定义指令:

    Vue.directive("mydirective",function(el,pra,a){
        console.log(el);//将元素标签输出
        console.log(pra);//议对象的形式输出,自定义指令的信息,(包括我们传入的值)
        console.log(a);//以对象的形式输出,vue虚拟节点信息
            //console.log(document.getElementsByTagName("li")[0].parentNode);
            el.style="color:"+pra.value;
    });

 

posted @ 2017-07-28 20:36  BuleDog  阅读(4828)  评论(0编辑  收藏  举报