###
Vue.js 中
自定义指令的详细用法
#### 一、什么是
自定义指令？
Vue 提供了一些内置
指令，比如 `v-text` 和 `v-if` 等。然而，在某些场景下这些内置
指令可能无法满足需求，因此
Vue 允许开发者创建自己的
指令来扩展功能[^2]。
#### 二、注册全局与
局部自定义指令
自定义指令可以通过两种方式注册：全局和
局部。
- **全局注册**：通过 `app.directive
(name, definition
)` 方法
实现，适用于整个应用范围内的
指令。
- **
局部注册**：在组件选项中的 `directives` 属性内声明，仅限于该组件内部使用。
#### 三、钩子
函数及其生命周期
当绑定到 DOM 节点上
时，
自定义指令会经历一系列钩子
函数调用过程：
1. **bind**: 只调用一次，
指令第一次绑定到元素
时调用。
2. **inserted**: 当被绑定的元素插入父节点
时调用。
3. **update**: 所在组件的 VNode 更新
时调用，但是可能发生在其子 VNode 更新之前。
4. **componentUpdated**:
指令所在组件的 VNode 及其子 VNode 都更新后调用。
5. **unbind**: 只调用一次，
指令与元素解绑
时调用。
以下是各阶段的具体说明以及示例代码：
```javascript
//
定义一个简单的
自定义指令
const app =
Vue.createApp
({}
);
app.directive
('focus', {
bind
(el, binding, vnode
) {
console.log
('Bind:', el
); // 绑定
时触发
},
inserted
(el
) {
el.focus
(); // 插入DOM树之后自动获取焦点
},
update
(el, binding
) {
console.log
('Update:', binding.value
);
}
}
);
```
上述例子展示了如何利用 `bind`, `inserted` 来设置默认行为，并监控
数据变化[^
1]。
#### 四、参数传递给
自定义指令
除了基本的功能外，还可以向
自定义指令传参，增强灵活性。例如下面的例子演示了
一个带有修饰符 `.lazy` 的输入框验证逻辑：
```html
<input v-my-validator.lazy="validationRules">
```
对应的 JavaScript
实现如下所示：
```javascript
app.directive
('myValidator',
(el, binding
) => {
const modifiers = binding.modifiers;
if
(modifiers && modifiers['lazy']
){
// 延迟执行特定操作...
}
let rules = binding.value || [];
function validate
(inputValue
){
return rules.every
(rule=>rule.test
(inputValue
));
};
el.addEventListener
('input',
(e
)=>{
e.target.setCustomValidity
(validate
(e.target.value
)? '':'Invalid Input'
);
}
);
}
);
```
此部分解释了如何接收来自模板层面上的
数据并通过回调处理业务逻辑[^3]。
#### 五、实际案例分析——
数值放大器
为了更直观理解以上理论知识点的应用价值，我们来看一段完整的实例程序片段:
```html
<template>
<div id="example">
<p>原始数字：<strong>{{number}}</strong></p>
<p><span v-multiply="multiplier">{{number}}</span>x{{multiplier}}=<span ref="result"></span></p>
</div>
</template>
<script>
export default{
directives:{
multiply:{
mounted:function
(el,binding,vnode
){
var resultElement=vnode.refs.result;
resultElement.textContent=
(binding.value*parseFloat
(vnode.context.number
)).toFixed
(2
);
}
}
},
data
(){
return{ number:7,multiplier:8};
}
}
</script>
```
这里
实现了动态计算乘积并显示结果的
效果。
---
### 总结
综上所述，
Vue 自定义指令提供了一种强大而灵活的方式来操控 DOM 或者封装复杂的交互模式。无论是
简单属性修改还是复杂事件监听都可以借助它完成高效开发工作流转换[^2].
本文详细介绍了Vue中自定义指令的使用方法，包括如何通过函数形式定义指令，并探讨了指令与计算属性的区别，同时提供了调用自定义指令的两种验证方式。
扫一扫
3452
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
