vue关于自定义指令

• 私有自定义指令（在与data()同级结构中进行配置）

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

// 私有自定义指令的节点   directives: {     // 定义名为color的指令，指向一个配置对象     color: {       // 当指令第一次被绑到元素上的时候，会立即触发bind函数,只会调用一次       // 形参中的el表示当前指令所绑定到的那个dom对象       bind(el,blinding) {         el.style.color = blinding.value;       },       // 每次dom更新时调用       update(el,blinding) {         el.style.color = blinding.value;       },     }   },

还可以写成函数的简写形式

?

1 2 3 4 5

directives: {   color(el,blinding) {     el.style.color = blinding.value;   } }

• 全局自定义指令（在main.js文件中进行配置，配置后，所有页面均可使用该指令）

?

1 2 3 4 5 6 7 8 9

Vue.directive('color', {   bind(el,blinding) {     el.style.color = blinding.value;   },   // 每次dom更新时调用   update(el,blinding) {     el.style.color = blinding.value;   }, })

全局指令也可以写成函数的简写形式

?

1 2 3

Vue.directive('color', function(el, binding) {   el.style.color = binding.value })