vue基础--自定义指令

语法

// 第一个参数：指令名称// 第二个参数：配置对象，指定指令的钩子函数Vue.directive('directiveName', {  bind() {},// 只调用一次，指令第一次绑定到元素时调用。  update() {},//所在组件的 VNode 更新时调用(先)  componentUpdated(){},// 所在组件的 VNode 更新时调用  inserted:function(el){},//被绑定元素插入父节点时调用  unbind：function(){}//只调用一次，指令与元素解绑时调用})// 第二个参数是函数Vue.directive('red', function(el, binding) {})// 【钩子函数的参数】// el：指令所绑定的元素，可以用来直接操作 DOM // binding：一个对象// vnode：Vue 编译生成的虚拟节点// oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。update(el, binding, vnode, oldVnode){binding.name;//指令名binding.value;//指令的绑定值binding.oldValue;//指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用binding.expression;//字符串形式的指令表达式binding.arg;//传给指令的参数v-指令:foobinding.modifiers;//一个包含修饰符的对象}

使用

<p v-for="(url, index) in list" :key="index" v-img="url"></p>Vue.directive('img', {      bind(el, binding) {        // 设置随机颜色值        el.style.backgroundColor = '#' + parseInt(Math.random() * 1000000)        // 等到图片加载完成，将当前图片设置为元素的背景        var img = new Image()        // 设置图片对象的路径        img.src = binding.value        // 等待图片加载完成        img.onload = function() {          el.style.backgroundImage = 'url(' + img.src + ')'        }      }    })<h1 v-指令名> </h1>

局部指令

directives: {    directiveName: {钩子函数}  }