vue自定义指令

<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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容