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

VUE3 自定义指令的介绍

news 来源：原创 2025/6/19 0:31:30

自定义指令的概述

在 Vue 中，自定义指令是一种机制，允许开发者在模板中直接操作 DOM 元素，执行一些低级别的操作。Vue 提供了几个内置指令（如 v-if、v-for、v-model 等），但当我们需要一些特定功能时，可以创建自己的自定义指令。这为我们提供了灵活性，允许在模板中更直接地控制 DOM 元素的行为。

自定义指令通常用来操作 DOM，比如动态控制元素的样式、执行一些行为（例如监听事件或获取焦点）等。

注册全局和局部自定义指令

Vue 中的自定义指令有两种注册方式：全局注册和局部注册。

1. 全局自定义指令

全局指令是应用中的任何组件都可以使用的指令。它通过 app.directive() 在根实例中注册。

示例代码（全局注册）:

// main.js
import { createApp } from 'vue';
import App from './App.vue';const app = createApp(App);// 全局注册自定义指令 v-focus
app.directive('focus', {mounted(el) {el.focus(); // 元素挂载后，自动聚焦}
});app.mount('#app');

在模板中使用：

<input v-focus />

2. 局部自定义指令

局部指令是只在某个特定组件中有效的指令。它们通过组件的 directives 选项进行注册。

示例代码（局部注册）:

// MyComponent.vue
<template><input v-focus />
</template><script>
export default {directives: {focus: {mounted(el) {el.focus(); // 只有在这个组件中才有效}}}
};
</script>

在此例中，v-focus 只在 MyComponent 组件中生效，而其他组件无法访问该指令。

自定义指令的基本使用

自定义指令需要通过 app.directive 或 directives 选项进行注册。指令对象可以包含多个生命周期钩子，来实现对 DOM 元素的操作。

生命周期钩子

自定义指令支持多个生命周期钩子，帮助我们在不同阶段操作 DOM 元素：

以下是 Vue 3 自定义指令生命周期钩子的详细描述：

created：在绑定元素的属性或事件监听器应用前调用。此时，指令的元素还没有插入到 DOM 中，但可以用于初始化某些属性或事件的设置。
beforeMount：在元素被插入到 DOM 前调用。你可以在这里进行一些操作，比如在 DOM 中插入额外内容或者做一些预处理。
mounted：在元素插入到 DOM 后调用。此时，元素已经可以访问 DOM，通常用于对已插入的 DOM 元素进行操作。
beforeUpdate：在绑定元素的父组件及它的所有子节点更新前调用。这个钩子在更新阶段非常有用，可以用来准备或比较更新之前的状态。
updated：在绑定元素的父组件及它的所有子节点更新后调用。这个钩子在元素更新后可以用来处理更新后的状态。
beforeUnmount：在绑定元素的父组件卸载前调用。可以用于清理资源、移除事件监听等操作。
unmounted：在绑定元素的父组件卸载后调用。通常用于销毁相关的操作，释放资源，清理事件监听等。

示例代码：

app.directive('demo', {beforeMount(el, binding) {console.log('beforeMount', binding);},mounted(el, binding) {console.log('mounted', binding);},updated(el, binding) {console.log('updated', binding);},beforeUnmount(el, binding) {console.log('beforeUnmount', binding);},unmounted(el, binding) {console.log('unmounted', binding);}
});

传递参数和修饰符

指令不仅可以接收值，还可以接收参数和修饰符，帮助我们进一步定制指令的行为。

1. 参数

自定义指令支持传递参数（arg），它可以用于标识不同的行为或操作。例如，可以在指令中传递不同的操作类型。

<p v-color:red="'blue'">这段文字会变蓝色</p>

app.directive('color', {mounted(el, binding) {if (binding.arg === 'red') {el.style.color = binding.value; // 设置颜色为传递的值}}
});

2. 修饰符

修饰符（modifiers）是以点号（.）为前缀的标志，用于指定特定的行为。例如，v-focus 可以结合 .uppercase 修饰符来将文本转换为大写。

<p v-color.bold="'red'">这段文字是红色并且加粗</p>

app.directive('color', {mounted(el, binding) {if (binding.modifiers.bold) {el.style.fontWeight = 'bold'; // 如果有 .bold 修饰符，设置加粗}el.style.color = binding.value; // 设置颜色}
});

一个复杂的例子

让我们结合参数和修饰符来实现一个动态效果的自定义指令，支持修改颜色并控制字体样式。

app.directive('textStyle', {mounted(el, binding) {// 默认颜色为红色const color = binding.value || 'red';el.style.color = color;// 检查修饰符if (binding.modifiers.bold) {el.style.fontWeight = 'bold';}if (binding.modifiers.italic) {el.style.fontStyle = 'italic';}}
});

模板中使用：

<p v-textStyle="'green'" class="highlight">绿色的文字</p>
<p v-textStyle.bold.italic="'blue'">蓝色加粗斜体的文字</p>

总结

全局指令：通过 app.directive() 注册，所有组件都能访问。
局部指令：通过组件的 directives 选项注册，只在该组件中有效。
自定义指令通过生命周期钩子来操作 DOM，支持传递参数和修饰符，以便进行细粒度的控制。
常见生命周期钩子包括 beforeMount、mounted、updated 等。

自定义指令可以在 Vue 中进行复杂的 DOM 操作，并且提供了灵活的参数传递、修饰符支持等特性，使得我们能够定制化地实现各种 UI 行为。如果你有更多问题，或者需要更具体的案例，欢迎继续提问！

VUE3 自定义指令的介绍

自定义指令的概述在 Vue 中，自定义指令是一种机制，允许开发者在模板中直接操作 DOM 元素，执行一些低级别的操作。Vue 提供了几个内置指令（如 v-if、v-for、v-model 等），但当我们需要一些特定功能时&#…...

编程日记 2025/6/1 20:18:13

安装redisDB 主节点 apt install redis-server修改配置 /etc/redis/redis.conf bind 0.0.0.0save "" # 禁止RDB持久化 #save 900 1 #save 300 10 #save 60 10000appendonly no # 禁止AOF持久化重启服务 systemctl restart redis-server从节点配置文件 bind 0.…...

编程日记 2025/6/3 10:22:59

【汇编】x86汇编编程寄存器资源心中有数

1. CPU状态及控制寄存器 TR，GDTR，LDTRcr0-cr3EFLAGS 等等 2. 业务计算寄存器（我起的名字） 业务寄存器用于访问内存、参数传递、数据传递、计算。段寄存器6个： cs，ds，es，ss&…...

编程日记 2025/5/31 7:03:34

一.项目课题＜基于TCP的文件传输协议实现＞

客户端代码需要cJSON.c文件和cJSON.h文件在这里插入代码片#include "myheadth.h" #include "myfun.h"#define TIME 10 int sockfd; void heartbeat(int signum) {cJSON* root cJSON_CreateObject();cJSON_AddStringToObject(root,"request"…...

编程日记 2025/6/3 10:36:17

【数据结构学习笔记】19：跳表（SkipList）

介绍跳表是一个能在 O ( n l o g n ) O(nlogn) O(nlogn)时间完成查找、插入、删除的数据结构，相比于树形结构优点就是很好写（所以也用于实现Redis ZSet）。其核心思想就是维护一个元素有序的，能随机提升索引层数的链表。最下面一…...

编程日记 2025/5/23 23:21:59

Cocos Creator 3.8 修改纹理像素值

修改的代码： import { _decorator, Component, RenderTexture, Sprite, Texture2D, ImageAsset, SpriteFrame, Vec2, gfx, director, log, math, v2 } from cc;const { ccclass, property } _decorator;ccclass(GradientTransparency) export class GradientTrans…...

编程日记 2025/6/3 17:27:03

【Linux】网络层

目录 IP协议协议头格式网段划分 2中网段划分的方式为什么要进行网段划分特殊的IP地址 IP地址的数量限制私有IP地址和公有IP地址路由 IP协议在通信时，主机B要把数据要给主机C，一定要经过一条路径选择，为什么经过路由器G后&…...

编程日记 2025/6/3 22:13:09

单片机Day1

目录一.什么是单片机？ 二.单片机的组成三.封装形式四.优势五.分类通用型： 专用型： 按处理的二进制位可以分为： 六.应用： 七.发展趋势 1.增加CPU的数据总线宽度。 2.存储器的发展。 3.片内1/0的改进 …...

编程日记 2025/6/1 10:40:51

django基于 Python 的考研学习系统的设计与实现

以下是对Django基于Python的考研学习系统的设计与实现： 一、系统概述 Django基于Python的考研学习系统是一个为考研学子提供一站式学习辅助的平台。它整合了丰富的学习资源、学习计划制定、学习进度跟踪以及交流互动等功能，旨在满足考生在备考过程中的…...

编程日记 2025/6/4 10:57:01

openCvSharp 计算机视觉图片找茬

一、安装包 <PackageReference Include"OpenCvSharp4" Version"4.10.0.20241108" /> <PackageReference Include"OpenCvSharp4.runtime.win" Version"4.10.0.20241108" /> 二、准备两张图片三、编写代码 using OpenCv…...

编程日记 2025/5/30 22:18:22

深入学习 Python 爬虫：从基础到实战

深入学习 Python 爬虫：从基础到实战前言 Python 爬虫是一个强大的工具，可以帮助你从互联网上抓取各种数据。无论你是数据分析师、机器学习工程师，还是对网络数据感兴趣的开发者，爬虫都是一个非常实用的技能。在本文中&#xff…...

编程日记 2025/6/1 5:55:02

【Web安全】SQL 注入攻击技巧详解：UNION 注入（UNION SQL Injection）

【Web安全】SQL 注入攻击技巧详解：UNION 注入（UNION SQL Injection） 引言 UNION注入是一种利用SQL的UNION操作符进行注入攻击的技术。攻击者通过合并两个或多个SELECT语句的结果集，可以获取数据库中未授权的数据。这种注入技术要…...

编程日记 2025/6/2 3:42:22

【DAPM杂谈之一】DAPM作用与内核文档解读

本文主要分析DAPM的设计与实现内核的版本是：linux-5.15.164，下载链接： Linux内核下载主要讲解有关于DAPM相关的知识，会给出一些例程并分析内核如何去实现的 /****************************************************************…...

编程日记 2025/6/2 10:20:45

计算机网络之---防火墙与入侵检测系统(IDS)

防火墙与入侵检测系统(IDS) 防火墙（Firewall） 和入侵检测系统（IDS, Intrusion Detection System） 都是网络安全的关键组件，但它们的作用、功能和工作方式有所不同。防火墙防火墙是网络安全的一种设备或软件&#…...

编程日记 2025/6/3 23:49:12

HTML中meta的用法

学习网络空间安全专业，每个人有每个人的学法和选择。不论他选择什么，哪都是他自己的选择，这就是大多数视频教学的博主教学的步骤都不同原因之一。有人选择丢掉大部分理论直接学习网安，而我，选择了捡起大部分理论学习网…...

编程日记 2025/5/30 18:00:06

前端学习-事件流，事件捕获，事件冒泡以及阻止冒泡以及相应案例（二十八）

目录前言事件流与两个阶段说明说明事件捕获目标说明事件冒泡目标事件冒泡概念简单理解阻止冒泡目标语法注意综合示例代码总结前言梳洗罢，独倚望江楼。过尽千帆皆不是，斜晖脉脉水悠悠。肠断白蘋洲事件流与两个阶段说明…...

编程日记 2025/6/1 11:56:45

国产OS移植工业物联网OPC-UA协议

国家对于工业互联网、基础软件等关键领域的重视程度不断提升，为工业领域的硬件与软件国产化提供了坚实的政策保障。国产操作系统对工业物联网的一些重要领域的适配支持一直在推进。本次通过国产UOS系统移植测试OPC-UA协议。 1、OPC UA通信协议 OPC UA 协议&#xf…...

编程日记 2025/5/30 15:50:56

第25章汇编语言--- 信号量与互斥锁

信号量（Semaphore）和互斥锁（Mutex，全称Mutual Exclusion Object）是两种用于管理对共享资源的访问的同步机制。它们在多线程或多进程编程中非常重要，可以确保同一时间只有一个线程或进程能够访问特定的资源&…...

编程日记 2025/6/1 14:10:58

写个自己的vue-cli

写个自己的vue-cli 1.插件代码2. 发布流程3. 模板代码讲解3.1 vue2模板的运行流程:3.2 vue3模板的运行流程: 1.插件代码写一个自己的vue-cli插件插件地址：插件地址流程： 实现简单版 vue-cli 步骤文档1. 项目初始化 - 创建项目文件夹 qsl-vue-cli - …...

编程日记 2025/6/4 15:47:07

使用new Vue创建Vue 实例并使用$mount挂载到元素上(包括el选项和$mount区别)

new Vue({...}) 是创建一个新的 Vue 实例的方式。你可以通过传递一个选项对象来配置这个实例。常见的选项包括： •data：定义组件的数据属性。 •el：指定 Vue 实例应该挂载到哪个 DOM 元素上（通常是一个选择器字符串，如…...

编程日记 2025/6/3 6:40:44

【理论】测试框架体系TDD、BDD、ATDD、MBT、DDT介绍

一、测试框架是什么测试框架是一组用于创建和设计测试用例的指南或规则。框架由旨在帮助 QA 专业人员更有效地测试的实践和工具的组合组成。这些指南可能包括编码标准、测试数据处理方法、对象存储库、存储测试结果的过程或有关如何访问外部资源的信息。 A testing framewo…...

编程日记 2025/6/4 10:49:00

机器学习全流程解析：数据导入到服务上线全阶段介绍

目录 1. 数据导入 2. 数据预处理 3. 超参数搜索与优化 4. 模型训练 5. 模型评估 6. 模型压缩与优化 7. 模型注册与版本管理 8. 服务上线与部署总结 1. 数据导入数据源：数据库、文件系统、API等。数据格式：CSV、JSON、SQL 数据库表、Parquet …...

编程日记 2025/5/31 9:19:50

shell脚本练习

1、shell 脚本写出检测 /tmp/size.log 文件如果存在显示它的内容，不存在则创建一个文件将创建时间写入。 if [ -f /tmp/size.log ];thencat /tmp/size.logelsestat exist.sh | awk -F: "NR5" > /tmp/size.logfi 2、写一个 shel1 脚本,实现批量添加…...

编程日记 2025/5/31 4:42:09

金山WPS Android面试题及参考答案

说说你所知道的所有集合？并阐述其内部实现。在 Android 开发（Java 语言基础上）中有多种集合。首先是 List 集合，主要包括 ArrayList 和 LinkedList。 ArrayList 是基于数组实现的动态数组。它的内部有一个数组来存储元素，当添加元素时，如果数组容量不够，会进行扩容操作…...

编程日记 2025/5/29 10:10:43

分类模型为什么使用交叉熵作为损失函数

推导过程让推理更有体感，进行下面假设： 假设要对猫、狗进行图片识别分类假设模型输出 y y y，是一个几率，表示是猫的概率训练资料如下： x n x^n xn类别 y ^ n \widehat{y}^n y n x 1 x^1 x1猫1 x 2 x^2 x2猫1 x …...

编程日记 2025/6/2 14:55:24

高等数学学习笔记 ☞ 单调性、凸凹性、极值、最值、曲率

1. 单调性 1. 单调性定义：设函数在区间上有定义，对于区间上任意两点，若： ①：当时，恒有，则称函数在区间上单调递增。 ②：当时，恒有，则称函数在区间上单调递减…...

编程日记 2025/6/3 1:50:59

【操作系统】详解操作系统及其结构

考察频率难度40%--60%⭐⭐ 这又是一类面试考察题，是关于操作系统的一些概念问题，很少会单独拎出来作为一个问题进行提问，但却是必须要掌握的。因为如果这个你不会，其他的问题就已经没有回答的必要了。什么是操作系统&#xff1…...

编程日记 2025/6/2 8:49:07

primitive 的 Appearance编写着色器材质

import { nextTick, onMounted, ref } from vue import * as Cesium from cesium import gsap from gsaponMounted(() > { ... })// 1、创建矩形几何体，Cesium.RectangleGeometry：几何体，Rectangle：矩形 let rectGeometry new…...

编程日记 2025/5/30 8:34:53

自动化测试框架搭建-接口数据结构设计

目的确认数据库如何保存接口数据，既有扩展性，数据又全又好用根据用途设计数据库字段区分环境：可以明确当前接口自动化用例，是在哪个环境需要执行的模块：微服务架构，不同测试同学负责不同的模块&…...

编程日记 2025/6/3 8:22:57

Python自学 - 使用自定义异常

<< 返回目录 1 Python自学 - 使用自定义异常在Python中， 不仅可以使用内置异常，用户还可以创建自己的异常。自定义异常需要继承自Exception类或其子类，如下是一个自定义异常示例： 示例1：一个简单的自定义异常…...

编程日记 2025/6/2 10:36:51

微信小程序-Docker+Nginx环境配置业务域名验证文件

在实际开发或运维工作中，我们时常需要在 Nginx 部署的服务器上提供一个特定的静态文件，用于域名验证或第三方平台验证。若此时使用 Docker 容器部署了 Nginx，就需要将该验证文件正确地映射（挂载）到容器中，并…...

编程日记 2025/6/4 15:30:00

“AI智能服务平台系统，让生活更便捷、更智能

大家好，我是资深产品经理老王，今天咱们来聊聊一个让生活变得越来越方便的高科技产品——AI智能服务平台系统。这个系统可是现代服务业的一颗璀璨明珠，它究竟有哪些魅力呢？下面我就跟大家伙儿闲聊一下。一、什么是AI智能服务平台系…...

编程日记 2025/6/4 1:29:22

【PPTist】插入形状、插入图片、插入图表

一、插入形状插入形状有两种情况，一种是插入固定的形状， 一种是插入自定义的形状。插入固定的形状时，跟上一篇文章绘制文本框是一样一样的，都是调用的 mainStore.setCreatingElement() 方法，只不多传的类型不一…...

编程日记 2025/6/3 13:44:29

云集电商：数据库的分布式升级实践｜OceanBase案例

电商行业对数据库有哪些需求云集电商作为一家传统电商企业，业务涵盖了美妆个护、服饰、水果生鲜、健康保健等多个领域，在创立四年后在纳斯达克上市（股票代码：YJ）。与京东、淘宝、拼多多等电商平台不同，云…...

编程日记 2025/6/3 19:26:58

OOM排查思路

K8S 容器的云原生生态，改变了服务的交付方式，自愈能力和自动扩缩等功能简直不要太好用。有好的地方咱要夸，不好的地方咱也要说，真正的业务是部署于容器内部，而容器之外，又有一逻辑层 Pod 。对于容器和…...

编程日记 2025/6/4 12:51:51

Q_OBJECT宏报错的问题

在Qt中继承QObject，并且加上Q_OBJECT宏，有时候会报错，比如我的错误： error: debug/httpmgr.o:httpmgr.cpp:(.rdata$.refptr._ZTV7HttpMgr[.refptr._ZTV7HttpMgr]0x0): undefined reference to vtable for HttpMgr 意思是没有虚…...

编程日记 2025/6/2 5:33:13

iOS - 关联对象

详细总结 Objective-C 的关联对象功能： 1. 基本使用 // 1. 设置关联对象 objc_setAssociatedObject(id object, const void *key, id value, objc_AssociationPolicy policy);// 2. 获取关联对象 id objc_getAssociatedObject(id object, const void *key);// 3. …...

编程日记 2025/6/4 17:12:19

Linux之进程

Linux之进程一.进程进程之形ps命令进程状态特殊进程孤儿进程守护进程进程创建之创建子进程进程特性优先级进程切换（分时操作系统） 二.环境变量三.进程地址空间四.进程终止&进程等待五.进程替换六.自定义shell 本篇博客希望简略的介绍进程&#xff…...

编程日记 2025/6/1 16:02:39

数据库事务

一事务的概念为什么要有事务，我们先前没学事务，也能写sql语句，事务的意义是什么? 由来: 是为了服务应用层开发，降低开发难度。假如没有事务，那我们身为开发人员，要处理转账需求，此时一定是有…...

编程日记 2025/6/4 12:26:23

Python statistics 模块

在数据分析和科学计算中，统计学是一个非常重要的工具。 Python 提供了一个内置的 statistics 模块，专门用于处理基本的统计计算。本文将详细介绍 statistics 模块的功能和使用方法，帮助初学者快速掌握如何使用这个模块进行基本的统计分析。 …...

编程日记 2025/6/2 18:39:54

AI知识-TF-IDF技术（Term Frequency-Inverse Document Frequency）

摘要 TF-IDF（Term Frequency-Inverse Document Frequency）是一种常见的统计方法，用于评估一个词对于一个文档集或一个语料库中的其中一份文档的重要性。本文将全面阐述TF-IDF的通俗理解、技术原理、应用场景，并做以总结。通俗理…...

编程日记 2025/6/2 3:16:49

spring cloud的核心模块有哪些

Spring Cloud 的核心模块就像一套精心设计的工具箱，每个模块都扮演着特定的角色，共同构建起微服务架构的坚实基础。 1. Spring Cloud Netflix（部分组件已迁移或弃用，但仍是理解 Spring Cloud 的重要参考）： …...

编程日记 2025/6/3 16:18:00

java_将数据存入elasticsearch进行高效搜索

使用技术简介： (1) 使用Nginx实现反向代理，使前端可以调用多个微服务 (2) 使用nacos将多个服务管理关联起来 (3) 将数据存入elasticsearch进行高效搜索 (4) 使用消息队列rabbitmq进行消息的传递 (5) 使用 openfeign 进行多个服务之间的api调用参…...

编程日记 2025/6/2 22:50:19

RAG中的文本切分策略详解

RAG中的文本切分策略详解 1. 选择RAG中的文本切分策略 1.1 不同的文本切分策略 1. CharacterTextSplitter - 这是最简单的方法。它默认基于字符（默认为""）来切割，并且通过字符的数量来衡量块的长度 2. RecursiveCharacterTextSplitter - 基于字符列表拆分文本。 …...

编程日记 2025/6/4 5:36:41

1-1 电场基本概念

目录： 目录目录： 1.0 电荷守恒定律 2.0 互斥与相吸 3.0 电场的概念 4.0 库伦定律 5.0 矢量的概念 1.0 电荷守恒定律电荷守恒定律是物理学中的一个基本原理，它指出在一个封闭系统内，电荷的总量是保持不变的。这意味着电荷既…...

编程日记 2025/5/31 4:55:01

SpringBoot初始化执行自定义接口

SpringBoot初始化执行自定义接口直接加载接口的方法上即可 PostConstructpublic void init() {//加载初始化数据}PostConstruct‌是一个在Java EE 5规范中引入的注解，用于标记在依赖注入完成后需要执行的方法。这个注解定义在javax.annotation包中，而不…...

编程日记 2025/5/28 21:43:52

【Ubuntu与Linux操作系统：一、Ubuntu安装与基本使用】

第1章 Ubuntu安装与基本使用 1.1 Linux与Ubuntu Linux是一种开源、类Unix操作系统内核，拥有高稳定性和强大的网络功能。由于其开源性和灵活性，Linux被广泛应用于服务器、嵌入式设备以及桌面环境中。 Ubuntu是基于Debian的一个流行Linux发行版&#xf…...

编程日记 2025/5/22 16:13:44

C++大端小端判断方法

文章目录大端小端定义判断方法方法一：利用联合体（Union）特性判断方法二：通过指针类型转换判断方法三：利用位运算与移位操作判断方法四：使用系统提供的字节序相关宏（特定平台支持） 联…...

编程日记 2025/6/4 13:36:46

【IO编程】标准IO和文件IO的对比

标准 I/O 和文件 I/O 是两种常见的输入输出操作方式。它们的核心功能都是处理数据流，但使用场景和实现方式有所不同，适用于不同的需求。标准 I/O 标准 I/O 是指与标准输入、标准输出和标准错误流（分别为 stdin、stdout 和 stderr&#xf…...

编程日记 2025/6/2 17:19:30

C#范围表达式,模式匹配,逆变和协变--11

目录一.范围表达式 1.概述 2.语法 3.代码示例 4.实现原理 5.应用场景二.模式匹配 1.概述 2.核心概念 3.常用模式类型 4.Switch表达式 5.使用示例 6.优势三.逆变和协变 1.概述 2.泛型类型参数的变性 3.协变示例 4.逆变示例 5.注意事项 6.应用场景总结一…...

编程日记 2025/6/3 18:04:16