vue3+ts 学习笔记(2-10)自定义指令开发思想
- 2026-03-19 05:14:46
vue3+ts 学习笔记(2-10)自定义指令开发思想在vue中常见的指令为v-model\v-if\v-show\v-for这些 [参考文档] (https://cn.vuejs.org/guide/reusability/custom-directives.html#custom-directives) 当遇到全局通用的逻辑函数、特定样式处理、都可以用自定义指令 我的理解：当需要以简洁的方式实现，复杂逻辑函数+element样式处理的公用情况，都需要以指令方式实现 当你的业务或需求，涉及到以原生js操作dom方式去实现的，全部应该以自定义指令去替代实现，而非公用函数，如utils/xxxx.js - 3、全局注册指令src/plugins/index.ts - 4、指令开发src/directives/v-lee.ts - 5、指令应用,使用方式
什么是指令？
git 仓库地址：https://gitee.com/xiaoli-account/vue3_ts.git
那么为什么要自定义指令？
## 自定义指令功能
可以操作当前dom节点，以原生js的方式 可以集成业务逻辑，以vue方式 指令的开发=vue组件开发，el参数即为当前指令存在的html标签(div)/binding参数即为指令传入的值(text)。如:
## 如何规范化的进行自定义指令开发
新建目录src/directives 统一入口src/directives/index.ts
import type { App } from "vue";import { vLee } from "./v-lee";/*** 注册所有自定义指令* @param app Vue 应用实例*/export function setupDirectives(app: App) {app.directive("lee", vLee);}// 导出所有指令，方便按需导入export { vLee };
import type { App } from "vue";import { setupDirectives } from "@/directives";const setupPlugins = (app: App<Element>) => {// 自定义指令(directive)setupDirectives(app);};export default setupPlugins;
export const vLee = {/*** @param el 当前元素* @param binding 绑定的属性*/mounted(el: HTMLElement, binding: any) {console.log("vLee", el, binding.value);},};
<divv-lee="text"></div>
本文来自网友投稿或网络内容，如有侵犯您的权益请联系我们删除，联系邮箱：wyl860211@qq.com 。
