vue 实现全局指令
注册全局指令
在 Vue 中，可以通过 Vue.directive 方法注册全局指令。全局指令可以在任何组件中使用，无需单独引入。
import Vue from 'vue';
Vue.directive('focus', {
inserted: function (el) {
el.focus();
}
});指令钩子函数
Vue 指令支持多个钩子函数，用于在不同阶段执行逻辑。常用钩子函数包括：
bind：指令第一次绑定到元素时调用。inserted：被绑定元素插入父节点时调用。update：所在组件的 VNode 更新时调用。componentUpdated：所在组件的 VNode 及其子 VNode 全部更新后调用。unbind：指令与元素解绑时调用。
Vue.directive('demo', {
bind: function (el, binding, vnode) {
// 初始化逻辑
},
update: function (el, binding, vnode) {
// 更新逻辑
}
});指令参数
指令钩子函数接收以下参数：
el：指令绑定的 DOM 元素。binding：包含指令信息的对象，如value、oldValue、arg、modifiers等。vnode：Vue 编译生成的虚拟节点。oldVnode：上一个虚拟节点（仅在update和componentUpdated中可用）。
Vue.directive('color', {
bind: function (el, binding) {
el.style.color = binding.value;
}
});使用指令
注册全局指令后，可以在模板中通过 v-指令名 的方式使用。
<input v-focus>
<p v-color="'red'">这段文字会显示为红色</p>动态指令参数
指令的参数可以是动态的，通过方括号语法实现。
<p v-color="colorValue">动态颜色</p>指令修饰符
指令可以支持修饰符，通过 binding.modifiers 访问。
Vue.directive('on', {
bind: function (el, binding) {
if (binding.modifiers.enter) {
el.addEventListener('keyup', function (event) {
if (event.key === 'Enter') {
binding.value();
}
});
}
}
});<input v-on.enter="submit">指令简写
如果指令仅在 bind 和 update 阶段执行相同逻辑，可以使用简写形式。
Vue.directive('color', function (el, binding) {
el.style.color = binding.value;
});注意事项
- 全局指令应避免命名冲突，建议使用特定前缀或命名空间。
- 指令逻辑应尽量简洁，复杂逻辑建议封装为组件。
- 指令中避免直接操作 DOM 结构，优先使用数据驱动的方式。
