vue怎么自定义指令？？

Posted 2020-09-30 BD_evel

最近看看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;
    });