vue自定义指令详解

Vue自定义指令是一种特殊的Vue实例方法，用于在Vue模板中注册全局或局部指令。自定义指令可以用来封装一些常用的DOM操作，提高代码的复用性和可维护性。

自定义指令的基本使用如下：

1. 全局注册：在Vue实例化之前，通过Vue.directive()方法注册全局指令。

Vue.directive('my-directive', {
   
  bind: function (el, binding, vnode) {
   
    // 当元素绑定到指令时执行的操作
  },
  inserted: function (el, binding, vnode) {
   
    // 当元素插入到DOM时执行的操作
  },
  update: function (el, binding, vnode, oldVnode) {
   
    // 当元素更新时执行的操作
  },
  componentUpdated: function (el, binding, vnode, oldVnode) {
   
    // 当组件更新时执行的操作
  },
  unbind: function (el, binding, vnode) {
   
    // 当元素解绑指令时执行的操作
  }
})

1. 局部注册：在Vue实例化之后，通过directives选项注册局部指令。

new Vue({
   
  el: '#app',
  directives: {
   
    'my-directive': {
   
      bind: function (el, binding, vnode) {
   
        // 当元素绑定到指令时执行的操作
      },
      inserted: function (el, binding, vnode) {
   
        // 当元素插入到DOM时执行的操作
      },
      update: function (el, binding, vnode, oldVnode) {
   
        // 当元素更新时执行的操作
      },
      componentUpdated: function (el, binding, vnode, oldVnode) {
   
        // 当组件更新时执行的操作
      },
      unbind: function (el, binding, vnode) {
   
        // 当元素解绑指令时执行的操作
      }
    }
  }
})

1. 使用自定义指令：在Vue模板中使用自定义指令，可以通过v-前缀或者简写形式。

<!-- 使用v-前缀 -->
<div v-my-directive></div>

<!-- 使用简写形式 -->
<div my-directive></div>

1. 参数和修饰符：自定义指令可以接收参数和修饰符，用于更灵活地控制指令的行为。参数可以在指令定义中声明，修饰符需要在v-bind指令中声明。

Vue.directive('my-directive', {
   
  bind: function (el, binding, vnode) {
   
    // 获取参数和修饰符的值
    const arg = binding.arg; // 'foo'
    const modifiers = binding.modifiers; // { bar: true }
  }
})

<!-- 使用带参数的指令 -->
<div v-my-directive:foo="bar"></div>
<!-- 使用带修饰符的指令 -->
<div v-my-directive.bar></div>