Vue.directive添加全局指令详解

Posted 2021-01-17 itpyy

自定义指令创建：

Vue.directive( ‘mycolor(指令名称:推荐全部小写，驼峰命名会出现问题，看最后面)‘ , {

　　bind:function(){},

　　//本例只介绍inserted

　　inserted:function(el, binding){

　　　　el.style.color="red"; // 第一种使用

　　　　el.style.color=binding.value; // 第二种使用

　　　　//el: dom元素; binding: 一个对象，里面包含着vue实例data里面的数据

　　},

　　update:function(){},

　　compinentUpdated:function(){},

　　unbind:function(){}

});

new一个vue对象实例：

var vm = new Vue({

　　data:{

　　　　color:"gold"

　　}

})

应用：

<p v-mycolor> test文本 </p> //第一种使用，结果是红色字体

<p v-mycolor="color"> test文本</p> // 第二种使用，结果是金色字体

问题：

　　指令定义时使用驼峰命名，假如命名为myColor，那么应用的时候写的是v-myColor会报错，正确应该是写v-my-color，所以推荐全部小写。