当前位置：首页 > news >正文

vue3 ts 自定义指令 app.directive

news 来源：原创 2025/9/7 16:56:49

在 Vue 3 中，app.directive 是一个全局 API，用于注册或获取全局自定义指令。以下是关于 app.directive 的详细说明和使用方法

app.directive 用于定义全局指令，这些指令可以用于直接操作 DOM 元素。自定义指令在 Vue 3 中非常强大，可以用来封装复杂的 DOM 操作、复用常见的交互行为

1.定义全局指令

app.directive('highlight', {created(el, binding, vnode) {// 在元素的属性或事件监听器应用前调用},beforeMount(el, binding, vnode) {// 在元素插入到 DOM 前调用el.style.backgroundColor = binding.value || 'yellow';},mounted(el, binding, vnode) {// 在元素插入到 DOM 后调用},beforeUpdate(el, binding, vnode, prevVnode) {// 在元素更新前调用},updated(el, binding, vnode, prevVnode) {// 在元素更新后调用},beforeUnmount(el, binding, vnode) {// 在元素卸载前调用},unmounted(el, binding, vnode) {// 在元素卸载后调用}
});

钩子参数

指令的钩子会传递以下几种参数：

el：指令绑定到的元素。这可以用于直接操作 DOM。binding：一个对象，包含以下属性。value：传递给指令的值。例如在 v-my-directive="1 + 1" 中，值是 2。
oldValue：之前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否更改，它都可用。
arg：传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中，参数是 "foo"。
modifiers：一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中，修饰符对象是 { foo: true, bar: true }。
instance：使用该指令的组件实例。
dir：指令的定义对象。
vnode：代表绑定元素的底层 VNode。prevVnode：代表之前的渲染中指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。

举例来说，像下面这样使用指令：

<div v-example:foo.bar="baz">

2.使用指令在组件中使用自定义指令时，只需在模板中绑定指令即可：

<template><p v-highlight="'aqua'">This paragraph will be aqua-colored.</p>
</template>

3.Vue3的自定义指令提供了以下生命周期钩子：

created：在元素的属性或事件监听器应用前调用。
beforeMount：在元素插入到 DOM 前调用。
mounted：在元素插入到 DOM 后调用。
beforeUpdate：在元素更新前调用。
updated：在元素更新后调用。
beforeUnmount：在元素卸载前调用。
unmounted：在元素卸载后调用。

自定义指令

v-copy

directive/copy/index.tsimport type { Directive, DirectiveBinding, App } from 'vue'
import { ElMessage } from 'element-plus'
import {EventType} from '../types'function addEventListener(el: Element, binding: DirectiveBinding) {const { value, arg,modifiers } = bindingconsole.log(value,modifiers,arg,'ssss');// 确定事件类型和提示消息const eventType: EventType = modifiers.dblclick ? 'dblclick' : 'click'const message = arg || '复制成功' as stringel.setAttribute('copyValue', String(value))const copyHandler = async ():Promise<void> => {try {if (navigator.clipboard) {await navigator.clipboard.writeText(el.getAttribute('copyValue') || '')} else {legacyCopy(el.getAttribute('copyValue') || '')}// 非静默模式显示提示if (!modifiers.quiet) {ElMessage({message: message,type: 'success',})} } catch (err) {ElMessage.error('复制失败！')}}   el.addEventListener(eventType, copyHandler)
}function legacyCopy(textToCopy: string) {const textarea = document.createElement('textarea')textarea.value = textToCopytextarea.style.position = 'fixed'document.body.appendChild(textarea)textarea.select()if (!document.execCommand('copy')) {throw new Error('execCommand 执行失败')} document.body.removeChild(textarea)
}
const vCopy: Directive = {mounted(el: HTMLElement, binding:DirectiveBinding) {addEventListener(el, binding)},updated(el: HTMLElement, binding:DirectiveBinding) {const { value } = bindingel.setAttribute('copyValue', String(value))},
}
export const setupCopyDirective = (app: App<Element>) => {app.directive('copy', vCopy)
}
export default vCopy

2.v-focus

import type { Directive ,App} from 'vue'const vFocus: Directive = {mounted(el: HTMLElement) {console.log(el,'el');el.focus && el.focus()},updated(el: HTMLElement) {el.focus && el.focus()},
}
export const setupFocusDirective = (app: App<Element>) => {app.directive('focus', vFocus)
}
export default vFocus

组件中使用

<script setup lang="ts">import {ref} from "vue";import { BaseButton } from '@/components/Button'import { ElInput } from 'element-plus'const value = ref<string>('我是要复制的值')const change = ref<string>('我是要改变的值')
</script><template><button v-copy.dblclick="value">点击我复制</button><BaseButton type="primary" class="w-[20%]" v-copy:复制成功了.dblclick="value">点击我复制</BaseButton><el-input v-model="change" placeholder="Please input" /><BaseButton type="primary" class="w-[20%]" @click="() => value = change">改变将要复制的值</BaseButton><input v-model="value" placeholder="111" v-focus />
</template><style scoped></style>

vue3 ts 自定义指令 app.directive

在 Vue 3 中，app.directive 是一个全局 API，用于注册或获取全局自定义指令。以下是关于 app.directive 的详细说明和使用方法 app.directive 用于定义全局指令，这些指令可以用于直接操作 DOM 元素。自定义指令在 Vue 3 中非常强大&#xff0…...

编程日记 2025/9/7 16:56:49

【漫话机器学习系列】199.过拟合 vs 欠拟合（Overfit vs Underfit）

机器学习核心问题：过拟合 vs 欠拟合图示作者：Chris Albon 1. 什么是拟合（Fit）？ 拟合（Fit）是指模型对数据的学习效果。理想目标： 在训练集上效果好在测试集上效果也好不复杂、…...

编程日记 2025/9/7 16:52:51

从0到1使用C++操作MSXML

1. 引言 MSXML（Microsoft XML Core Services）是微软提供的一套用于处理XML的COM组件库，广泛应用于Windows平台的XML解析、验证、转换等操作。本文将详细介绍如何从零开始，在C中使用MSXML解析和操作XML文件，包含完整的…...

编程日记 2025/9/7 16:48:38

【中间件】nginx反向代理实操

一、说明 nginx用于做反向代理，其目标是将浏览器中的请求进行转发，应用场景如下： 说明： 1、用户在浏览器中发送请求 2、nginx监听到浏览器中的请求时，将该请求转发到网关 3、网关再将请求转发至对应服务二、具体操作…...

编程日记 2025/8/28 9:11:13

C语言中冒泡排序和快速排序的区别

冒泡排序和快速排序都是常见的排序算法，但它们在原理、效率和应用场景等方面存在显著区别。以下是两者的详细对比： 一、算法原理 1. 冒泡排序原理：通过重复遍历数组，比较相邻元素的大小，并在必要时交换它们的位置。…...

编程日记 2025/9/6 16:42:58

进程基本介绍

进程是操作系统的重要内容,都是需要了解和学习的,那么今天我们就来好好看看. 进程基本介绍 1、Linux中,每个执行的程序都称为一个进程,每一个进程都分配一个ID号(pid,进程号). 2.每个进程都可以以两种方式存在的,前台与后台,所谓前台进程就是用户目前的屏幕上可以进行操作的,…...

编程日记 2025/8/30 15:10:23

通过平台大数据智能引擎及工具,构建设备管理、运行工况监测、故障诊断等应用模型的智慧快消开源了

智慧快消视频监控平台是一款功能强大且简单易用的实时算法视频监控系统。它的愿景是最底层打通各大芯片厂商相互间的壁垒，省去繁琐重复的适配流程，实现芯片、算法、应用的全流程组合，从而大大减少企业级应用约95%的开发成本。基于多年的深度…...

编程日记 2025/9/5 11:52:06

不同数据库的注入报错信息

不同数据库在报错注入时返回的报错信息具有显著差异，了解这些差异可以帮助快速判断数据库类型并构造针对性的注入攻击语句。以下是主流数据库的典型报错模式及对比： 目录 1. MySQL 2. Microsoft SQL Server 3. Oracle …...

编程日记 2025/9/7 9:58:05

tcpdump`是一个非常强大的命令行工具，用于在网络上捕获并分析数据包

通过 tcpdump，你可以抓取网络流量，诊断网络问题，或分析通信协议的细节。下面是如何在 Linux 上使用 tcpdump 进行抓包的详细步骤。 1. 安装 tcpdump 在大多数 Linux 发行版中，tcpdump 是默认安装的。如果没有安装，可…...

编程日记 2025/9/2 4:09:07

【漏洞复现】Vite 任意文件读取漏洞 CVE-2025-30208/CVE-2025-31125/CVE-2025-31486/CVE-2025-32395

Vite是什么，和Next.js有什么区别？ 我上一篇文章刚介绍了Next.js漏洞的复现： 【漏洞复现】Next.js中间件权限绕过漏洞 CVE-2025-29927_next.js 中间件权限绕过漏洞-CSDN博客 Vite 和 Next.js 是两个不同类型的前端工具，它们各自…...

编程日记 2025/9/4 0:14:11

Odrive源码分析(六) 相关控制变量传递

本文记录下odrive源代码中相关控制模块之间变量的传递，这对理解odrive源代码至关重要。通过前面文字的分析，odrive有两条数据链路，一条是通过中断进行实时的控制，另外一条是OS相关的操作，主要分析下中断内部的相关变量…...

编程日记 2025/9/4 17:36:14

ARM架构FFmpeg极致优化交叉编译指南

ARM架构FFmpeg极致优化交叉编译指南一、工具链科学配置使用最新的ARM官方工具链(Linaro或ARM GNU Toolchain) 确保工具链支持目标平台特定指令集(如NEON, VFP等) 设置正确的–sysroot和–prefix参数 1. 工具链选择原则 # 32位ARM (推荐) wget https://developer.arm.com/…...

编程日记 2025/9/3 10:54:02

zk源码—7.ZAB协议和数据存储一

大纲 1.两阶段提交Two-Phase Commit(2PC) 2.三阶段提交Three-Phase Commit(3PC) 3.ZAB协议算法 4.ZAB协议与Paxos算法 5.zk的数据存储原理之内存数据 6.zk的数据存储原理之事务日志 7.zk的数据存储原理之数据快照 8.zk的数据存储原理之数据初始化和数据同步流程 1.两阶…...

编程日记 2025/9/4 7:04:29

2025蓝桥杯C++A组省赛题解

昨天打完蓝桥杯本来想写个 p y t h o n python python A A A 组的题解，结果被队友截胡了。今天上课把 C A CA CA 组的题看了，感觉挺简单的，所以来水一篇题解。这场 B B B 是一个爆搜， C C C 利用取余的性质比较好写&#…...

编程日记 2025/9/7 9:11:29

用哪个机器学习模型依靠极少量即时静态数据来训练ai预测足球赛的结果？

目录一、模型推荐 1.集成树模型（XGBoost/CatBoost） 2.逻辑回归（Logistic Regression） 3.贝叶斯概率模型（Naive Bayes或贝叶斯网络） 4.支持向量机（SVM） 二、模型排除三、训练…...

编程日记 2025/9/3 21:22:17

讲解贪心算法

贪心算法是一种常用的算法思想，其在解决问题时每一步都做出在当前状态下看起来最优的选择，从而希望最终能够获得全局最优解。C作为一种流行的编程语言，可以很好地应用于贪心算法的实现。下面我们来讲一篇关于C贪心算法的文章。目录贪心算法…...

编程日记 2025/9/5 17:21:39

0基础 | 电动汽车的“电源翻译官” | DC/DC转换器 | 电源系统三

你有没有想过，电动汽车里那么多五花八门的电子设备，比如车灯、仪表盘、摄像头，甚至连控制马达的“大脑”（ECU），是怎么用上电的？今天就来聊聊电动车里一个默默工作的“小功臣”——DC/DC转换器&a…...

编程日记 2025/9/3 1:03:22

zynq7020 u-boot 速通

zynq u-boot 速通简介上回最小系统已经跑起来,证明串口和 ddr 正确配置.现在我们需要正确配置网口, qspi, emmc. 网口:通过 tftp 下载 dtb,image,rootfs 在线调试.qspi:固化 boot.bin 到 qspi flash,这样 qspi 启动就可以直接运行 u-boot.emmc:存放 ubuntu_base 跟文件系统…...

编程日记 2025/9/3 14:51:58

C++学习之路，从0到精通的征途：string类的模拟实现

目录一.string类的成员变量与成员函数二.string类的接口实现 1.构造函数，析构函数，拷贝构造函数，赋值重载 （1）构造函数 （2）析构函数 （3）拷贝构造函数 &…...

编程日记 2025/9/6 12:59:59

网页制作中的MVC和MVT

MVC（模型-视图-控制器）和MVT（模型-模板-视图）是两种常见的软件架构模式，通常用于Web应用程序的设计。它们之间的主要区别在于各自的组件职责和工作方式。 MVC（模型-视图-控制器）： 模…...

编程日记 2025/9/5 9:19:44

02 - spring security基于配置文件及内存的账号密码

spring security基于配置的账号密码文档 00 - spring security框架使用01 - spring security自定义登录页面 yml文件中配置账号密码 spring:security:user:name: adminpassword: 123456yml文件中配置账号密码后，控制台将不再输出临时密码基于内存的账号密码 …...

编程日记 2025/9/2 16:02:05

Firebase Studio：开启 AI 驱动的开发新纪元

Firebase Studio（前身为 Project IDX）的推出，标志着软件开发范式正经历深刻变革。它不仅是一个传统的 IDE，更是一个以 AI 为主导的、代理式 (agentic) 的云端开发环境，专注于全栈 AI 应用（包括 API、后端、…...

编程日记 2025/9/4 7:40:27

网络基础2

目录跨网络传输流程网络中的地址管理 - 认识 IP 地址跨网络传输报文信息的跨网络发送 IP地址的转化认识端口号端口号范围划分源端口号和目的端口号认识 TCP / UDP协议理解 socket 网络字节序 socket 编程接口 sockaddr 结构我们继续来学习网络基础跨网…...

编程日记 2025/9/5 6:58:57

Maven工具学习使用（十一）——部署项目到仓库

1、使用Maven默认方式 Maven 部署项目时默认使用的上传文件方式是通过 HTTP/HTTPS 协议。要在 Maven 项目中配置部署，您需要在项目的 pom.xml 文件中添加部分。这个部分定义了如何部署项目的构件（如 JAR 文件）到仓库。。这个部分定义了如何…...

编程日记 2025/8/27 16:46:35

FPGA 37 ，FPGA千兆以太网设计实战：RGMII接口时序实现全解析（ RGMII接口时序设计，RGMII~GMII，GMII~RGMII 接口转换）

目录前言一、设计流程 1.1 需求理解 1.2 模块划分 1.3 测试验证二、模块分工 2.1 RGMII→GMII（接收方向，rgmii_rx 模块） 2.2 GMII→RGMII（发送方向，rgmii_tx 模块） 三、代码实现 3.1 顶层模块 …...

编程日记 2025/8/22 1:45:11

torch.cat和torch.stack的区别

torch.cat 和 torch.stack 是 PyTorch 中用于组合张量的两个常用函数，它们的核心区别在于输入张量的维度和输出张量的维度变化。以下是详细对比： 1. torch.cat (Concatenate) 作用：沿现有维度拼接多个张量，不创建新维度输入要求…...

编程日记 2025/9/5 12:51:31

索引下推（Index Condition Pushdown, ICP）

概念索引下推是一种数据库查询优化技术，通过在存储引擎层面应用部分WHERE条件来减少不必要的数据读取。它特别适用于复合索引的情况，因为它可以在索引扫描阶段就排除不符合全部条件的数据行，而不是将所有可能匹配的记录加载到服务器层再进行…...

编程日记 2025/9/6 9:04:49

C++基础精讲-06

文章目录 1. this指针1.1 this指针的概念1.2 this指针的使用 2. 特殊的数据成员2.1 常量数据成员2.2 引用数据成员2.3 静态数据成员2.4 对象成员 3. 特殊的成员函数3.1 静态成员函数3.2 const成员函数3.3 mutable关键字 1. this指针 1.1 this指针的概念 1.c规定，t…...

编程日记 2025/9/4 17:35:31

Django3 - 建站基础

学习开发网站必须了解网站的组成部分、网站类型、运行原理和开发流程。使用Django开发网站必须掌握Django的基本操作，比如创建项目、使用Django的操作指令以及开发过程中的调试方法。一、网站的定义及组成网站(Website)是指在因特网上根据一定的规则，…...

编程日记 2025/9/4 9:57:45

UE5蓝图设置界面尺寸大小

UE5蓝图设置界面尺寸大小 Create widget 创建UIadd to Viewport 添加视图get Game User Settings获取游戏用户设置set Screen Resolutions 设置屏幕尺寸大小1920*1080set Fullscreen Mode 设置全屏模式为：窗口化或者全屏Apply Settings 应用设置...

编程日记 2025/9/7 6:45:34

无数字字母RCE

无数字字母RCE，这是一个老生常谈的问题，就是不利用数字和字母构造出webshell，从而能够执行我们的命令。 <?php highlight_file(__FILE__); $code $_GET[code]; if(preg_match("/[A-Za-z0-9]/",$code)){die("hacker!&quo…...

编程日记 2025/9/7 4:08:56

UserProxyAgent用户 user_proxy = UserProxyAgent配置说明： # 构造参数 def __init__(self,name: str,is_termination_msg: Optional[Callable[[Dict], bool]] = None,max_consecutive_auto_reply: Optional[int] = None,human_input_mode: Literal["ALWAYS", &qu…...

编程日记 2025/9/3 4:22:07

6.2 GitHub API接口设计实战：突破限流+智能缓存实现10K+仓库同步

GitHub Sentinel 定期更新 API 接口设计关键词：GitHub API 集成、异步爬虫开发、RESTful 接口设计、请求限流策略、数据增量更新 1. 接口架构设计原则采用分层隔离架构实现数据采集与业务逻辑解耦： #mermaid-svg-WihvC78J0F5oGDbs {font-family:"trebuchet ms&quo…...

编程日记 2025/8/17 19:49:25

用java代码如何存取数据库的blob字段

一.业务在业务中我们被要求将文件或图片等转成 byte[] 或 InputStream存到数据库的Blob类型的字段中. 二.Blob类型介绍在 MySQL 中，Blob 数据类型用于存储二进制数据。MySQL 提供了四种不同的 Blob 类型： TINYBLOB: 最大存储长度为 255 个字节。BL…...

编程日记 2025/9/4 8:00:19

2025蓝桥杯C++研究生组真题-上海市省赛

2025蓝桥杯C研究生组真题 A：数位倍数（5分） 问题描述：请问在 1 至 202504（含）中，有多少个数的各个数位之和是 5 的整数倍。例如：5、19、8025 都是这样的数。 A是填空题&#xff0c…...

编程日记 2025/9/2 15:28:19

原子操作CAS（Compare-And-Swap）和锁

目录原子操作优缺点锁互斥锁（Mutex） 自旋锁（Spin Lock） 原子性单核单CPU 多核多CPU 存储体系结构缓存一致性写传播（Write Propagation） 事务串行化（Transaction Serialization&#…...

编程日记 2025/9/1 3:33:31

Aspose.Words导出word，服务器用内存流处理，不生成磁盘文件

框架集：.NET8 public async Task<IActionResult> ExportPDF(long? id) {var infoawait form_Dahui_ReportDao.GetAsync(id);if (info null){return Content("没找到数据");}//读取word模板string fileTemp Path.Combine(AppContext.BaseDirect…...

编程日记 2025/9/5 13:04:15

攻防世界——Web题ez_curl

目录 Express PHP和Node.js的解析差异 Python代码这道题最终得不到flag，用了很多师傅的代码也不成功。但还是需要学习下载的附件： const express require(express);const app express();const port 3000; const flag process.env.flag;app.ge…...

编程日记 2025/8/29 0:12:37

力扣面试150题--螺旋矩阵

Day 20 题目描述思路根据题目描述，我们需要顺时针输出矩阵元素，顺时针说明有四种输出状态，横向从左到右和从右到左，纵向从上到下和从下到上，唯一的难点在于，输出完成一层后，如何进入内层&am…...

编程日记 2025/8/28 11:08:51

智能指针之设计模式2

前面介绍了工厂模式控制了智能指针和资源对象的创建过程，现在介绍一下智能指针是如何利用代理模式来实现“类指针（like-pointer）”的功能，并控制资源对象的销毁过程的。 2、代理模式代理模式是为其它对象提供一种代理以控制对这…...

编程日记 2025/9/2 4:50:14

【Redis】redis持久化

Redis 持久化 Redis：非关系型的内存数据库持久化：将数据永久写入磁盘（内存→磁盘） Redis 默认开启了持久化，默认模式为 RDB 为什么需要持久化？ Redis 是内存数据库，宕机或关机后数据会丢失。…...

编程日记 2025/9/6 15:46:24

AtCoder Beginner Contest 401 E题题解

E - Reachable Sethttp://E - Reachable Set 题意概述 ： 给定一个无向图， 对于每个 ，解决以下问题： -选择最少的一些顶点，使得删除这些顶点及其关联的所有边后点1只能到达以内的所有点牵制芝士 ：头文…...

编程日记 2025/9/2 18:30:38

Kubernetes控制平面组件：API Server Webhook 授权机制详解

云原生学习路线导航页（持续更新中） kubernetes学习系列快捷链接 Kubernetes架构原则和对象设计（一）Kubernetes架构原则和对象设计（二）Kubernetes架构原则和对象设计（三）Kubernetes控…...

编程日记 2025/9/5 14:34:58

【CodeMirror】系列（二）官网示例（六）自动补全、边栏

一、自动补全 codemirror/autocomplete 包提供了在编辑器中显示输入建议的功能。这个示例展示了如何启用该功能以及如何编写自己的补全来源。自动补全是通过在编辑器的配置项中加入 autocompletion 扩展实现的。有些语言包支持内置的自动补全功能，比如HTML包。默…...

编程日记 2025/9/3 1:25:22

CSS 表格样式学习笔记

CSS 提供了强大的工具来美化和定制 HTML 表格的外观。通过合理使用 CSS 属性，可以使表格更加美观、易读且功能强大。以下是对 CSS 表格样式的详细学习笔记。一、表格边框 1. 单独边框默认情况下，表格的 <table>、<th> 和 <td> 元…...

编程日记 2025/8/29 12:51:51

简单记录一下Android四大组件

1、Android Layout 1.1、LinearLayout 线性布局，子控件按照水平或垂直的方向依次排列，排列方向通过属性android:orientation控制，horizontal为水平排列，vertical为垂直排列。对于同一水平线上的控件，可以调整它的lay…...

编程日记 2025/9/3 0:27:01

在线地图支持天地图和腾讯地图，仪表板和数据大屏支持发布功能，DataEase开源BI工具v2.10.7 LTS版本发布

2025年4月11日，人人可用的开源BI工具DataEase正式发布v2.10.7 LTS版本。这一版本的功能变动包括：数据源方面，Oracle数据源支持获取和查询物化视图；图表方面，在线地图支持天地图、腾讯地图；新增子弹图&…...

编程日记 2025/9/4 18:19:28

【图像处理基石】什么是通透感？

一、画面的通透感定义画面的通透感指图像在色彩鲜明度、空间层次感、物体轮廓清晰度三方面的综合表现，具体表现为： 色彩鲜明：颜色纯净且饱和度适中，无灰暗或浑浊感；层次分明：明暗过渡自然，光…...

编程日记 2025/9/4 16:55:53

猫咪如厕检测与分类识别系统系列【六】分类模型训练+混合检测分类+未知目标自动更新

前情提要家里养了三只猫咪，其中一只布偶猫经常出入厕所。但因为平时忙于学业，没法时刻关注牠的行为。我知道猫咪的如厕频率和时长与健康状况密切相关，频繁如厕可能是泌尿问题，停留过久也可能是便秘或不适。为了更科学地了解牠的如…...

编程日记 2025/9/3 16:23:24

NoSQL入门指南：Redis与MongoDB的Java实战

一、为什么需要NoSQL？ 在传统SQL数据库中，数据必须严格遵循预定义的表结构，就像把所有物品整齐摆放在固定尺寸的货架上。而NoSQL（Not Only SQL）数据库则像一个灵活的储物间，允许存储各种类型的数据&#x…...

编程日记 2025/9/2 17:31:42