Vue：自定义指令

自定义指令

解决了什么问题？

可以自定义操作一些dom元素，使开发更便捷

使用方法（常用）

在 vue2.x中

template

**语法：**就是把注册好的组件前面加一个 v-，后面跟的是一个值

<p v-highlight="'yellow'">高亮显示此文本亮黄色</p>

script

语法：常用的方法有bind（页面加载时触发），update（页面更新时触发），他们的参数都是三个值：el 是父dom元素，binding是在template里传过来的值，vnode是虚拟节点，如果不是深入使用的话基本用不到

//全局注册
Vue.directive('highlight', {
  bind(el, binding, vnode) {
    el.style.background = binding.value
  }
})

//组件内注册
export default {
    derectives:{
        bind(el, binding, vnode) {
    	el.style.background = binding.value  
    }
  }
}

在 vue3.x中

template

**语法：**就是把注册好的组件前面加一个 v-，后面跟的是一个值

<p v-highlight="'yellow'">高亮显示此文本亮黄色</p>

script

语法：常用的方法有beforeMount （页面加载前，等同于bind）， beforeUpdate （页面更新时，等同于updata），他们的参数都是三个值：el 是父dom元素，binding是在template里传过来的值，vnode是虚拟节点，如果不是深入使用的话基本用不到

//全局注册
Vue.directive('highlight', {
  beforeMount(el, binding, vnode) {
    el.style.background = binding.value
  }
})

//组件内注册
export default {
   derectives:{
        beforeMount(el, binding, vnode) {
    	el.style.background = binding.value  
    }
}

总结

虽然vue封装了很多指令提供便捷的开发，但是偶尔项目中有些个性化需求还是需要我们自己来操作，这时我们就要自己来造轮子，这时候就有自定义指令了，简单，使开发更加便捷