vue的指令实现
Vue 指令的实现方式
Vue 指令是带有 v- 前缀的特殊属性，用于在 DOM 元素上应用响应式行为。Vue 提供了一些内置指令（如 v-model、v-if），同时也支持自定义指令。
内置指令示例
-
v-model：实现表单输入与应用状态的双向绑定
<input v-model="message" />data() { return { message: '' } } -
v-if/v-show：条件渲染
<div v-if="isVisible">显示内容</div> <div v-show="isActive">CSS切换显示</div> -
v-for：列表渲染
<li v-for="(item, index) in items" :key="item.id"> {{ index }} - {{ item.text }} </li>
自定义指令实现
通过 directives 选项或全局 Vue.directive() 注册：
// 全局注册
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
})
// 局部注册
directives: {
highlight: {
bind(el, binding) {
el.style.backgroundColor = binding.value || 'yellow'
}
}
}使用自定义指令：
<input v-focus />
<div v-highlight="'#ff0000'">高亮元素</div>指令钩子函数
自定义指令可定义以下生命周期钩子：
bind：指令第一次绑定到元素时调用（初始化设置）inserted：被绑定元素插入父节点时调用update：所在组件VNode更新时调用（可能发生在子组件更新前）componentUpdated：所在组件及子组件VNode全部更新后unbind：指令与元素解绑时调用（清理工作）
指令参数传递
指令可通过修饰符和值接收参数：
<div v-demo:foo.a.b="message"></div>对应钩子函数参数：
bind(el, binding) {
// binding.value => message的值
// binding.arg => "foo"
// binding.modifiers => { a: true, b: true }
}动态指令参数
使用方括号包裹动态参数名：
<a v-bind:[attributeName]="url">链接</a>
<a v-on:[eventName]="doSomething">事件</a>当 attributeName 或 eventName 变化时，指令会响应式更新。
