笔记大全

Vue中自定义指令使用及实现原理解析

更新时间：2023-12-19

什么是 Vue 自定义指令?

Vue 的自定义指令是一种用于向 Vue 添加特定行为的 API，它允许我们在 DOM 元素上添加自定义行为。可以看作是对于常用 DOM 操作的一种封装，使得我们可以通过指令来调用。


Vue.directive('my-directive', {
  bind: function (el, binding, vnode) {
    // 在绑定时做一些事情
  },
  inserted: function (el, binding, vnode) {
    // 在元素插入到父节点时调用
  },
  update: function (el, binding, vnode) {
    // 当元素更新时调用
  },
  componentUpdated: function (el, binding, vnode) {
    // 在组件更新完毕时调用
  },
  unbind: function (el, binding, vnode) {
    // 在解除绑定时调用
  }
})

如何使用 Vue 自定义指令?

Vue 自定义指令通常需要通过 v- [directive] 指令的形式来应用到 DOM 元素上，其中的 [directive] 为自定义指令的名称。我们可以通过钩子函数来实现对指令的自定义操作。

Vue 自定义指令实现原理解析

Vue 自定义指令的实现原理是通过执行指令函数来实现，在执行指令函数时，会传入三个参数：el、binding 和 vnode。其中 el 表示绑定指令的 HTML DOM 元素，binding 是一个包含了该指令的信息的对象，vnode 则表示了 Vue 实例中被绑定的节点的整个上下文。三个参数使得我们能够基于实际的要求来操作 DOM。


Vue.directive('my-directive', {
  bind: function (el, binding, vnode) {
    // 在绑定时做一些事情
  },
  inserted: function (el, binding, vnode) {
    // 在元素插入到父节点时调用
  },
  update: function (el, binding, vnode) {
    // 当元素更新时调用
  },
  componentUpdated: function (el, binding, vnode) {
    // 在组件更新完毕时调用
  },
  unbind: function (el, binding, vnode) {
    // 在解除绑定时调用
  }
})

Vue 自定义指令的应用场景

Vue 自定义指令有很多应用场景，如限制输入、自动聚焦等。下面是一个实现输入框限制的例子，可以在指令中进行限制，避免了麻烦的输入判断逻辑。


Vue.directive('limit-number', {
  bind: function (el, binding, vnode) {
    el.addEventListener('input', function () {
      let inputVal = Number(el.value.replace(/[^\d]/g, ''))
      if (inputVal >= binding.value) {
        el.value = binding.value
      }
    })
  }
})

c语言编程笔录