From dbf4e201ce46b51561f50109e5ec7e9cb0458c30 Mon Sep 17 00:00:00 2001 From: bunny <1319900154@qq.com> Date: Sat, 14 Jun 2025 22:44:59 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=2014-=E8=87=AA=E5=AE=9A=E4=B9=89?= =?UTF-8?q?=E6=8C=87=E4=BB=A4=5F=E5=87=BD=E6=95=B0=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../import-script/14-自定义指令_函数式.html | 46 ++++++ .../import-script/14-自定义指令_函数式.md | 135 ++++++++++++++++++ 2 files changed, 181 insertions(+) create mode 100644 vue2-tutorials/import-script/14-自定义指令_函数式.html create mode 100644 vue2-tutorials/import-script/14-自定义指令_函数式.md diff --git a/vue2-tutorials/import-script/14-自定义指令_函数式.html b/vue2-tutorials/import-script/14-自定义指令_函数式.html new file mode 100644 index 0000000..44f01ca --- /dev/null +++ b/vue2-tutorials/import-script/14-自定义指令_函数式.html @@ -0,0 +1,46 @@ + + + + + + + 自定义指令_函数式 + + +
+

当前值：

+

放大十倍值：

+ + + +
+ + + + diff --git a/vue2-tutorials/import-script/14-自定义指令_函数式.md b/vue2-tutorials/import-script/14-自定义指令_函数式.md new file mode 100644 index 0000000..a0881be --- /dev/null +++ b/vue2-tutorials/import-script/14-自定义指令_函数式.md @@ -0,0 +1,135 @@ +# Vue2 自定义指令全面指南 + +指令中的作用域时window！！！ + +## 一、指令类型对比 + +| 类型 | 语法 | 触发时机 | 适用场景 | +| ------ | ------------------------------------- | ------------- | ----------- | +| 函数式 | `directives: { big(el, binding) {} }` | bind + update | 简单DOM操作 | +| 对象式 | `directives: { fbind: { hooks } }` | 完整生命周期 | 复杂交互 | + +## 二、对象式指令详解 + +### 1. 完整生命周期钩子 +```javascript +fbind: { + // 指令第一次绑定到元素时调用（初始化设置） + bind(el, binding) { + el.value = binding.value; + }, + // 被绑定元素插入父节点时调用 + inserted(el, binding) { + el.focus(); // 自动获取焦点 + }, + // 所在组件更新时调用 + update(el, binding) { + el.value = binding.value; + el.focus(); // 值更新后重新聚焦 + } +} +``` + +### 2. 执行流程示例 +1. 初始化时：`bind` → `inserted` +2. 数据更新时：`update` +3. 模板重新解析时：`update` + +## 三、最佳实践建议 + +### 1. 输入框增强指令 +```javascript +Vue.directive('input-enhanced', { + inserted(el) { + el.select(); // 自动选中文本 + }, + update(el) { + // 防抖处理避免频繁触发 + clearTimeout(el._timer); + el._timer = setTimeout(() => { + el.select(); + }, 300); + }, + unbind(el) { + // 清理工作 + clearTimeout(el._timer); + } +}); +``` + +### 2. 性能优化技巧 +```javascript +update(el, binding) { + if (binding.value !== binding.oldValue) { + // 只有值变化时才执行操作 + el.value = binding.value; + } +} +``` + +## 四、高级应用场景 + +### 1. 权限控制指令 +```javascript +Vue.directive('permission', { + inserted(el, binding) { + if (!checkPermission(binding.value)) { + el.parentNode.removeChild(el); + } + } +}); +``` +使用方式： +```html + +``` + +### 2. 拖拽指令实现 +```javascript +Vue.directive('drag', { + inserted(el) { + el.style.cursor = 'move'; + el.onmousedown = function(e) { + // 拖拽逻辑实现 + } + }, + unbind(el) { + el.onmousedown = null; // 清理事件 + } +}); +``` + +## 五、常见问题解决方案 + +1. **指令不生效问题排查** + - 检查指令名称是否使用kebab-case（短横线） + - 确认绑定值是否为响应式数据 + - 验证是否在正确的生命周期钩子操作DOM + +2. **动态指令参数** +```html +
+``` +```javascript +binding.arg // 获取动态参数 +``` + +3. **多修饰符处理** +```javascript +if (binding.modifiers.large) { + el.style.fontSize = '20px'; +} +if (binding.modifiers.red) { + el.style.color = 'red'; +} +``` + +## 六、与Vue3的对比 + +| 特性 | Vue2 | Vue3 | +| --------- | ---------------------- | ------------------- | +| 钩子名称 | `bind` → `beforeMount` | | +| | `inserted` → `mounted` | | +| | 新增`beforeUpdate` | | +| 参数传递 | 通过`binding`对象 | 更直观的上下文参数 | +| 组合式API | 无 | 支持setup中使用指令 |