问：什么是指令？
答：指令就是 DOM 与逻辑行为的媒介，本质就是 DOM 绑定的独立逻辑行为函数。除了核心功能默认内置的指令 (例如 v-model 和 v-show )，Vue 也允许注册自定义指令。Vue 自定义指令和组件一样存在着全局注册和局部注册两种方式。先来看看注册全局指令的方式，通过 Vue.directive( id, [definition] ) 方式注册全局指令，第一个参数为自定义指令名称（指令名称不需要加 v- 前缀，默认是自动加上前缀的，使用指令的时候一定要加上前缀），第二个参数可以是对象数据，也可以是一个指令函数。
在 Vue 中，代码复用和抽象的主要形式是组件。本文介绍的就是 Vue3.0 之后我们该如何应用这指令呢。
Vue3.0 钩子函数
01
**created：**在绑定元素的 attribute 或事件监听器被应用之前调用。在指令需要附加需要在普通的 v-on 事件监听器前调用的事件监听器时，这很有用
02
**beforeMount：**当指令第一次绑定到元素并且在挂载父组件之前调用
03
**mounted：**在绑定元素的父组件被挂载后调用
04
**beforeUpdate：**在更新包含组件的 VNode 之前调用
05
**pdated：**在包含组件的 VNode 及其子组件的 VNode 更新后调用
06
**beforeUnmount：**在卸载绑定元素的父组件之前调用
07
**unmounted：**当指令与元素解除绑定且父组件已卸载时，只调用一次
目标
抛开技术领域的探索，对于项目，我们要达成的目标是什么呢？
试想，有这样的一些需求：
①. 一个最简单的表单中，需要用户对某些内容复制，比方说版本号及一些订单编号及个人信息。
**②. **用户点击其他位置需要将此弹窗隐藏。
③. 自定聚焦到表单处。
④. 防止按钮在短时间内被多次点击，使用防抖函数限制规定时间内只能点击一次。
实现
import Directives from "@/Directives/index";// 自定义指令(@ 代表src)const app = createApp(App);app.use(Directives);app.mount("#app");
复制代码
index.js 内容 copy 为例
import copy from "./copy"; // 引入需要的指令import clickoutside from "./clickoutside";import focus from "./focus";import debounce from "./debounce"
const directivesList = { copy, // 挂载 clickoutside,};
const directives = { install: function (app) { Object.keys(directivesList).forEach((key) => { app.directive(key, directivesList[key]); // 注册 }); }};
export default directives;// 抛出import { ElMessage } from "element-plus"; //复制const copy = { mounted (el, { value }) { el.$value = value; el.handler = () => { if (!el.$value) { // 值为空的时候，给出提示 ElMessage.warning({ message: "您好，复制的值不能为空。", type: "warning" }); return; } if (window.clipboardData) { window.clipboardData.setData("text", el.$value); } else { (function (content) { document.oncopy = function (e) { e.clipboardData.setData("text", content); e.preventDefault(); document.oncopy = null; }; })(el.$value); document.execCommand("Copy"); }
ElMessage.success("复制成功"); }; // 绑定点击事件 el.addEventListener("click", el.handler); }, beforeUpdate (el, { value }) { el.$value = value; }, unmounted (el) { el.removeEventListener("click", el.handler); }};
export default copy;const clickoutside = { // 初始化指令 beforeMount (el, binding, vnode) { function documentHandler (e) { // // 这里判断点击的元素是否是本身，是本身，则返回 if (el.contains(e.target)) { return false; } // // 判断指令中是否绑定了函数 if (binding.value.name) { // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法 binding.value(e); } } // // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听 el.__vueClickOutside__ = documentHandler; document.addEventListener("click", documentHandler); }, beforeUnmount (el, binding) { // 解除事件监听 document.removeEventListener("click", el.__vueClickOutside__); delete el.__vueClickOutside__; }};
export default clickoutside;
# 页面input自动聚焦const focus = { mounted (el) { el.querySelector("input").focus(); }};
export default focus;
# 定义一个延迟执行的方法，如果在延迟时间内再调用该方法，则重新计算执行时间。
const debounce = { inserted: function (el, binding) { let timer el.addEventListener('keyup', () => { if (timer) { clearTimeout(timer) } timer = setTimeout(() => { binding.value() }, 1000) }) },}
export default debounce
复制代码
总结
自定义指令的第二用处是用于集成第三方插件。我们知道任何软件开发领域都可以分为四层：底层是原生的 API，上层是通用框架，再上层是通用组件，最上层才是具体的业务代码。一个通用框架，必须搭配一套完整的通用组件，才能真正奠定其江湖地位。
在前端开发领域，以前的通用框架是 jQuery，jQuery 以及基于 jQuery 构建的通用组件形成了一个庞大的生产系统。现在的通用框架是 Angular、React 和 Vue，每个框架都需要基于自身构建新的组件库。自定义指令好就好在：原先的那些通用组件，无论是纯 js 的也好，基于 jQuery 的也好，都可以拿来主义直接吸收，而不需要改造或重构。
比如写文档通常会用到 focus.js，我们可以直接将其封装为一个自定义指令，这样 focus.js 就变成了 Vue 的一个新功能。
更多学习资料戳下方！！！
https://qrcode.ceba.ceshiren.com/link?name=article&project_id=qrcode&from=infoQ×tamp=1662366626&author=xueqi
评论