1 自定义指令介绍
在 Vue.js 中，自定义指令是增强 HTML 元素功能的一种方式。与组件类似，自定义指令可以用来处理 DOM 操作和添加特定的行为。
- 创建自定义指令
- 在 Vue 实例中注册:
自定义指令可以在 Vue 实例的 directives 选项中注册。
- 命名约定:
自定义指令的名称通常以 v- 开头，例如 v-my-directive。在使用时，只需写作 v-my-directive。
- 基本结构
自定义指令的基本结构如下：
Vue.directive('my-directive', {
bind(el, binding, vnode) {
// 指令绑定时的逻辑
},
inserted(el) {
// 元素插入到父节点时调用
},
update(el, binding, vnode, oldVnode) {
// 组件更新时调用
},
componentUpdated(el, binding, vnode, oldVnode) {
// 组件更新后调用
},
unbind(el, binding, vnode) {
// 指令与元素解绑时调用
}
});
- 各个钩子函数的作用
bind: 只调用一次，指令第一次绑定到元素时调用。可以用来进行一次性的初始化设置。
inserted: 当绑定元素插入到 DOM 中时调用。适合需要访问 DOM 的操作，比如焦点设置。
update: 在所在组件的 VNode 更新时调用。可用于响应式数据变化后的处理。
componentUpdated: 在指令所在组件的 VNode 更新后调用，适合需要进行额外 DOM 操作的情况。
unbind: 当指令与元素解绑时调用，用于清理工作，例如移除事件监听器。
- 钩子函数参数
钩子函数的参数有：
- el: 指令所绑定的元素，可以用来直接操作 DOM 。
- binding: 一个对象，包含以下属性：
1 name: 指令名，不包括 v- 前缀。
2 value: 指令的绑定值， 例如： v-my-directive=“1 + 1”, value 的值是 2。
3 oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
4 expression: 绑定值的表达式或变量名。 例如 v-my-directive=“1 + 1” ， expression 的值是
“1 + 1”。
5 arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 “foo”。
6 modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers
的值是 { foo: true, bar: true }。 - vnode: Vue 编译生成的虚拟节点。
- oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
示例1 ：自动聚焦指令
<template>
<div id="app">
<input v-focus placeholder="我会自动获得焦点" />
<input type="text" placeholder="普通输入框" />
</div>
</template>
<script>
export default {
directives: {
focus: {
inserted(el) {
el.focus();
}
}
}
};
</script>
<style>
input {
margin: 10px 0;
padding: 10px;
border: 1px solid #ccc;
}
</style>
示例2 ：动态背景色指令
<template>
<div id="app">
<div v-hover-color="'lightblue'" class="hover-box">
将鼠标悬停在这里!
</div>
</div>
</template>
<script>
export default {
directives: {
hoverColor: {
bind(el, binding) {
el.style.transition = 'background-color 0.3s';
el.onmouseover = () => {
el.style.backgroundColor = binding.value;
};
el.onmouseout = () => {
el.style.backgroundColor = '';
};
},
unbind(el) {
el.onmouseover = null;
el.onmouseout = null;
}
}
}
};
</script>
<style>
.hover-box {
padding: 20px;
border: 1px solid #ccc;
text-align: center;
margin: 20px;
}
</style>
3 使用自定义指令
在模板中使用自定义指令很简单，只需在元素上添加指令名即可。例如：
<div v-focus></div>
<div v-hover-color="'red'"></div>
4 应用场景
自定义指令可以应用于多种场景，如下：
- 表单验证: 可以创建指令来验证输入框内容是否合法。
- 动画效果: 在元素插入或更新时添加动画效果。
- 事件绑定: 根据不同条件绑定和解绑事件处理器。
- 复杂交互: 比如拖放操作、模态框显示等。
5 总结
自定义指令是 Vue.js 提供的强大功能之一，可以让你在项目中更灵活地处理 DOM 操作和行为。通过合理使用自定义指令，可以使你的代码更加模块化和可维护。