vue的指令实现
Vue 指令的实现方式
Vue 指令是特殊的标记，用于在 DOM 元素上应用特定的行为。Vue 提供了多种内置指令（如 v-model、v-if），同时也支持自定义指令的开发。
内置指令的常见用法
v-model
实现表单输入与数据的双向绑定：
<input v-model="message" />
<p>{{ message }}</p>v-if / v-else
条件渲染 DOM 元素：
<div v-if="isVisible">显示内容</div>
<div v-else>备用内容</div>v-for
循环渲染列表：
<li v-for="item in items" :key="item.id">{{ item.name }}</li>v-bind
动态绑定属性（可简写为 :）：
<img :src="imageUrl" />v-on
监听事件（可简写为 @）：
<button @click="handleClick">点击</button>自定义指令的实现
通过 Vue.directive 或组件选项的 directives 注册自定义指令：
全局注册
在 Vue 实例化前定义：
Vue.directive('focus', {
inserted: function (el) {
el.focus(); // 元素插入 DOM 时自动聚焦
}
});局部注册
在组件选项中定义：
directives: {
highlight: {
bind(el, binding) {
el.style.backgroundColor = binding.value || 'yellow';
}
}
}钩子函数
自定义指令支持以下生命周期钩子：
bind：指令第一次绑定到元素时调用。inserted：元素插入父 DOM 时调用。update：组件更新时调用（可能发生在子组件更新前）。componentUpdated：组件及子组件更新后调用。unbind：指令与元素解绑时调用。
指令的参数与修饰符
动态参数
通过方括号指定动态参数：
<a v-on:[eventName]="doSomething">链接</a>修饰符
指令后缀的标记，例如 v-on.stop 阻止事件冒泡：
<button @click.stop="submit">提交</button>自定义修饰符处理
在指令定义中通过 binding.modifiers 访问：
Vue.directive('demo', {
update(el, binding) {
if (binding.modifiers.uppercase) {
el.textContent = binding.value.toUpperCase();
}
}
});实际应用示例
实现一个拖拽指令
Vue.directive('drag', {
bind(el) {
el.onmousedown = function(e) {
const startX = e.clientX - el.offsetLeft;
const startY = e.clientY - el.offsetTop;
document.onmousemove = function(e) {
el.style.left = e.clientX - startX + 'px';
el.style.top = e.clientY - startY + 'px';
};
document.onmouseup = function() {
document.onmousemove = null;
};
};
}
});使用方式：
<div v-drag style="position: absolute">拖拽我</div>注意事项
- 指令名推荐使用小写和连字符（如
v-my-directive）。 - 避免在指令中直接操作 DOM 结构，优先通过数据驱动。
- 复杂逻辑建议封装为组件，指令更适合低层级 DOM 操作。
