单独实现vue指令
实现自定义 Vue 指令
Vue 允许注册自定义指令，用于对普通 DOM 元素进行底层操作。以下是实现自定义指令的步骤。
全局注册指令
在 Vue 应用中通过 Vue.directive 方法全局注册指令：
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
})使用时直接在元素上添加 v-focus：
<input v-focus>局部注册指令
在组件选项中通过 directives 选项局部注册指令：
export default {
directives: {
focus: {
inserted: function (el) {
el.focus()
}
}
}
}指令钩子函数
自定义指令可以包含以下钩子函数：
bind：指令第一次绑定到元素时调用inserted：被绑定元素插入父节点时调用update：所在组件的 VNode 更新时调用componentUpdated：所在组件及子组件 VNode 更新后调用unbind：指令与元素解绑时调用
钩子函数参数
每个钩子函数接收以下参数：
el：指令绑定的 DOM 元素binding：包含以下属性的对象：name：指令名（不含v-前缀）value：指令的绑定值oldValue：指令绑定的前一个值expression：字符串形式的指令表达式arg：传给指令的参数modifiers：包含修饰符的对象
vnode：Vue 编译生成的虚拟节点oldVnode：上一个虚拟节点
动态指令参数
指令参数可以是动态的：
<div v-demo:[argument]="value"></div>argument 会根据组件实例数据进行更新。
对象字面量
指令可以接收对象字面量：
<div v-demo="{ color: 'white', text: 'hello' }"></div>在指令中通过 binding.value.color 和 binding.value.text 访问。
示例：实现 v-color 指令
Vue.directive('color', {
bind: function (el, binding) {
el.style.color = binding.value
},
update: function (el, binding) {
el.style.color = binding.value
}
})使用方式：
<p v-color="'red'">这段文字会显示为红色</p>示例：实现 v-pin 指令
Vue.directive('pin', {
bind: function (el, binding) {
el.style.position = 'fixed'
const s = binding.arg || 'top'
el.style[s] = binding.value + 'px'
},
update: function (el, binding) {
const s = binding.arg || 'top'
el.style[s] = binding.value + 'px'
}
})使用方式：
<p v-pin:bottom="200">固定在距底部200像素处</p>注意事项
- 指令名称应避免与 Vue 内置指令冲突
- 指令应该专注于 DOM 操作，避免包含复杂的业务逻辑
- 在
update和componentUpdated钩子中，父组件可能还未更新 - 指令可以复用，应保持功能单一性
通过合理使用自定义指令，可以封装 DOM 操作，使代码更加简洁和可维护。
