自定义指令基础

Vue 自定义指令用于对普通 DOM 元素进行底层操作，适用于需要直接操作 DOM 的场景。

什么是指令

指令是带有 v- 前缀的特殊属性，Vue 内置 v-bind、v-on、v-model 等。当内置指令无法满足需求时，可通过自定义指令扩展能力。

自定义指令的核心价值：直接操作 DOM，适用于焦点控制、滚动行为、拖拽、权限控制等场景。

注册方式

全局注册

通过 Vue.directive() 在应用入口注册，所有组件均可使用。

// main.js
Vue.directive('focus', {
  inserted(el) {
    el.focus()
  }
})

<!-- 组件中使用 -->
<input v-focus />

局部注册

在组件的 directives 选项中注册，仅当前组件可用。

<template>
  <input v-focus />
</template>

<script>
export default {
  directives: {
    focus: {
      inserted(el) {
        el.focus()
      }
    }
  }
}
</script>

局部注册可避免全局污染，推荐优先使用。

指令对象结构

指令定义是一个对象，包含钩子函数。最常用的是 inserted 钩子：

Vue.directive('color', {
  inserted(el, binding) {
    el.style.color = binding.value || 'black'
  }
})

<p v-color="'red'">红色文字</p>

简写形式

当只需在 bind 和 update 时执行相同逻辑，可使用函数简写：

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

此写法等价于同时绑定 bind 和 update 钩子。

使用场景

要点总结

• 自定义指令用于直接操作 DOM，弥补内置指令不足
• 全局注册使用 Vue.directive()，局部注册使用 directives 选项
• inserted 是最常用的钩子，在元素插入父节点时触发
• 函数简写形式适用于 bind 和 update 逻辑一致的场景

存放路径：articles/VUE/进阶/自定义指令与渲染函数/自定义指令基础.md