vue 2 自定义指令通过 v-xxx 语法声明式调用，由 inserted、bind、update 等钩子控制 dom 行为，适合聚焦、高亮、权限控制等纯 dom 复用场景，需按功能模块化封装并全局注册。
Vue 2 中使用自定义指令封装 DOM 操作逻辑，核心是通过 v-xxx 语法在模板中声明式调用，背后由指令钩子函数（如 inserted、bind、update）控制 DOM 行为。它不依赖组件状态，适合聚焦、高亮、权限控制、防抖等纯 DOM 层面的复用需求。
明确指令用途，选对钩子函数
不同场景对应不同生命周期钩子：
- inserted：最常用，元素插入 DOM 后立即执行（如自动聚焦、初始化样式）
- bind：指令第一次绑定时触发，适合一次性设置（如添加事件监听器前的初始化）
- update：所在组件数据更新后触发（注意：不是每次响应式变化都触发，仅当 vnode 更新且可能影响该指令时）
- componentUpdated：组件 VNode 及其子 VNode 全部更新完毕后调用（适合依赖子节点渲染完成的操作）
封装成模块，统一管理
推荐在 src/directive/modules/ 下按功能拆分文件，每个文件导出一个指令对象：
-
focus.js：处理输入框自动聚焦，兼容el-input等封装组件（需查子元素.el-input__inner） -
highlight.js：高亮文本内容，可接收参数如v-highlight="'red'"动态设背景色 -
auth.js：根据用户权限隐藏/禁用元素，配合binding.value判断权限码
所有模块在 src/directive/index.js 中集中导入并注册，避免在 main.js 中逐个引入。
全局注册，一次配置处处可用
在 main.js 中调用 Vue.use() 安装指令插件：
- 指令插件需暴露
install方法，内部遍历directives对象，对每个键名调用Vuе.directive(key, def) - 确保注册时机在
new Vue()实例创建之前，否则指令无法被识别 - 不推荐在单个组件内局部注册（
directives: { ... }），除非该逻辑只在此处使用且有强隔离需求
模板中使用要简洁清晰
指令写法直接、语义化：
- 基础用法：
<input v-focus> - 传值用法：
<div v-highlight="bindingValue">文本</div>，值可通过binding.value在钩子中获取 - 修饰符支持：
v-focus.once可结合binding.modifiers.once实现单次触发 - 避免过度嵌套逻辑，指令内只做 DOM 操作；复杂业务判断应交由父组件或 store 处理
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
