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

Vue3（自定义指令directive详解）

news 来源：原创 2025/7/24 2:50:02

文章目录

前言
一、自定义指令的生命周期钩子
二、自定义指令的创建与注册+使用
三、扩展简化形式
总结

前言

在Vue3中，自定义指令是一种强大的工具，允许开发者扩展和增强HTML元素的功能。以下是对Vue3中自定义指令的详细解析：

一、自定义指令的生命周期钩子

Vue3中的自定义指令提供了多个生命周期钩子函数，允许开发者在指令的不同阶段执行特定的操作。这些钩子函数包括：

created：在绑定元素的attribute或事件监听器被应用之前调用。
beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用。
mounted：在绑定元素的父组件被挂载后调用，此时元素已经被插入到DOM中，可以进行DOM操作。
beforeUpdate：在更新包含组件的VNode之前调用。
updated：在包含组件的VNode及其子组件的VNode更新后调用。
beforeUnmount：在卸载绑定元素的父组件之前调用。
unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。

二、自定义指令的创建与注册+使用

在Vue3中，自定义指令可以通过全局或局部的方式进行注册。

全局注册：
全局注册的指令在整个应用中都可用。通常在应用的入口文件（如main.js或main.ts）中进行注册。
示例代码：

import { createApp } from 'vue'
import App from './App.vue'
import 'vant/lib/index.css'
import './style.css'import { Directive,DirectiveBinding } from 'vue';// 定义一个全局指令
const myGlobalDirective = {mounted(el:HTMLElement, binding:DirectiveBinding<any>) {console.log("我是全局指令");console.log(el);console.log(binding.value);// 在这里添加你的指令逻辑el.style.color = binding.value.color || 'black';el.style.background = binding.value.background || 'black';},// 你可以根据需要添加其他生命周期钩子};
const app = createApp(App)//  全局注册指令
app.directive('my-global', myGlobalDirective);
app.mount('#app')

模板中使用全局指令
在这里插入图片描述

2. 局部注册
局部注册的指令仅在指定的组件中有效。

模板中使用

三、扩展简化形式

对于自定义指令来说，一个很常见的情况是仅仅需要在 mounted 和 updated 上实现相同的行为，除此之外并不需要其他钩子。这种情况下我们可以直接用一个函数来定义指令，如下所示：

<div v-color="color"></div>

app.directive('color', (el, binding) => {// 这会在 `mounted` 和 `updated` 时都调用el.style.color = binding.value
})

总结

综上所述，Vue3中的自定义指令是一种强大的工具，允许开发者根据项目需求扩展Vue的功能。通过合理使用自定义指令，可以提升代码的复用性和可维护性，同时增强应用的交互性和用户体验。

Vue3（自定义指令directive详解）

文章目录前言一、自定义指令的生命周期钩子二、自定义指令的创建与注册使用三、扩展简化形式总结前言在Vue3中，自定义指令是一种强大的工具，允许开发者扩展和增强HTML元素的功能。以下是对Vue3中自定义指令的详细解析： 一、自定义指令…...

编程日记 2025/7/24 2:50:02

Redis--redis客户端

目录一、引言二、数据库管理命令三、redis客户端四、Java客户端使用Redis 五、相关命令使用 1.get，set 2.exists，del 3.keys 4.expire，ttl 六、总结一、引言在之前学了redis相关类型命令之后，本篇文章，…...

编程日记 2025/7/24 2:40:47

【高项】信息系统项目管理师（十）项目风险管理【5分】

项目风险是一种不确定的事件或条件，一旦发生，会对项目目标产生某种正面或负面的影响。项目风险既包括对项目目标的威胁，也包括促进项目目标的机会。已知风险是那些已经经过识别和分析的风险，对于已知风险，对其进行规划，寻找应对方案是可行的；虽然项目经理们可以依据以往…...

编程日记 2025/7/24 2:41:59

jenkins批量复制视图项目到新的视图

1、当前视图为测试2分支，创建了新的视图为国际化预生产 2、进入系统设置的脚本管理 import hudson.model.* //源view def str_view "测试2分支" //目标view def str_new_view "国际化预生产" //源job名称(模糊匹配) def str_search &qu…...

编程日记 2025/7/20 11:47:00

uv：Rust 驱动的 Python 包管理新时代

在 Python 包管理工具层出不穷的今天，pip、pip-tools、poetry、conda 等各有千秋。而今天要介绍的 uv，则是一款由 Astral 团队推出、采用 Rust 编写的全新工具，目标直指成为 “Python 的 Cargo”。它不仅在性能上表现优异，而且在功…...

编程日记 2025/7/21 4:48:58

GD32 ISP下载程序（串口烧录）

一、下载烧录软件下载地址兆易创新GigaDevice-资料下载兆易创新GD32 MCUhttps://www.gd32mcu.com/cn/download?kwGD32All-In-OneProgrammer&lancn 二、使用USB转串口连接GD32开发板这里使用GD32E230C8T6为例： GD32E230C8T6USB 转串口模块说明PA9&#xff…...

编程日记 2025/7/20 23:05:06

Spring MVC 配置详解与入门案例

目录引言一、Spring MVC 的发展背景 1. Model I 与 Model II 2. MVC 模式二、Spring MVC 入门案例 1. 创建 WEB 工程并引入依赖 2. 配置 web.xml 3. 配置 springmvc.xml 4. 创建控制器和视图 5. 部署并测试三、Spring MVC 原理 1. 核心组件 2. 请求处理流程 …...

编程日记 2025/7/20 5:05:03

【10万QPS压力测试】Redis三主三从高可用集群基准测试

📕我是廖志伟，一名Java开发工程师、《Java项目实战——深入理解大型互联网企业通用技术》（基础篇）、（进阶篇）、（架构篇）清华大学出版社签约作家、Java领域优质创作者、CSDN博客专家、…...

编程日记 2025/7/19 12:16:15

git的进阶使用

一.协作冲突举个简单的例子，公司里两个人(A,B)同一天上班，都拉取了远程仓库数据。然后A做完了所有的工作，进行了x文件的修改并提交至远程仓库。而B在做自己工作的时候不小心或者需要修改x文件，B认为A没有操作x文件直接push没有问…...

编程日记 2025/7/20 9:46:41

23种设计模式-责任链(Chain of Responsibility)设计模式

责任链设计模式 🚩什么是责任链设计模式？🚩责任链设计模式的特点🚩责任链设计模式的结构🚩责任链设计模式的优缺点🚩责任链设计模式的Java实现🚩代码总结🚩总结 🚩什么是…...

编程日记 2025/7/23 17:15:40

MySQL复习

1基本操作复习 1.1数据库创建创建数据库create database 数据库名;判断再创建数据库create database if not exists 数据库名;创建数据库指定字符集create database 数据库名 character set 字符集;创建数据库指定排序方式create database 数据库名 collate 排序方式;创建数据…...

编程日记 2025/7/22 16:21:29

【嵌入式学习2】c语言重点整理

目录 ## 重点掌握 1、数组 2、指针 3、结构体 4、函数回调函数的常见用途 ## 如何区分数组指针，指针数组，函数指针，结构体指针，指针偏移量 ## 重点掌握 1、数组 https://blog.csdn.net/weixin_60546365/article/details…...

编程日记 2025/7/16 23:57:41

java项目之基于ssm的个人博客网站（源码+文档）

项目简介个人博客网站实现了以下功能： 个人博客网站在Eclipse环境中，使用Java语言进行编码，使用Mysql创建数据表保存本系统产生的数据。系统可以提供信息显示和相应服务，其管理员审核博客文章和相册分享信息，管理文…...

编程日记 2025/7/23 13:49:39

C++学习之路：从头搞懂配置VScode开发环境的逻辑与步骤

目录编辑器与IDE基于vscode的C开发环境配置1. 下载vscode、浅尝编译。番外篇 2. 安装插件，赋能编程。3. 各种json文件的作用。c_cpp_properties.jsontask.jsonlaunch.json 总结&&彩蛋编辑器与IDE 上一篇博客已经介绍过了C程序的一个编译流程，从…...

编程日记 2025/7/19 7:30:32

deploy myEclipse j2ee project to server没反应

解决办法 1.如果工作空间的问题,那么需要删除你工作空间的一个文件就可以解决了。这个文件在Myeclipse工作区(workspace) .metadata\.plugins\org.eclipse.core.runtime\.settings目录...

编程日记 2025/7/4 18:03:47

react项目中当组件渲染的时候如何执行接口

最近遇到一个场景，就是组件渲染的时候去调用接口进行数据回填。这个在vue中很简单，在created生命周期函数中，直接调用接口即可。但是react没有created生命周期，所以在react中我们需要用到useEffect钩子函数。在 React 函数组件中…...

编程日记 2025/7/23 22:11:37

python虚拟环境安装opus(windows)

python -m venv venv 创建虚拟环境后,并且安装软件包后,运行项目报错,提示如下: Could not find Opus library. Make sure it is installed 原因是缺少opus.dll, (先把项目内所有使用的第三方库都安装完成) 从以下页面下载.dll文件之后,放入venv\Scripts目录下即可 https://…...

编程日记 2025/7/21 16:32:28

手机怎么换网络IP有什么用？操作指南与场景应用‌

在数字化时代，手机已经成为我们日常生活中不可或缺的一部分，无论是工作、学习还是娱乐，手机都扮演着至关重要的角色。而在手机的使用过程中，网络IP地址作为设备在互联网上的唯一标识符，其重要性和作用不容忽视。本文将…...

编程日记 2025/7/19 17:47:22

小程序内表格合并功能实现—行合并

功能介绍：支付宝小程序手写表格实现行内合并，依据动态数据自动计算每次需求合并的值，本次记录行内合并，如果列内合并，同理即可实现前端技术：grid布局 display：grid 先看实现效果: axml&…...

编程日记 2025/7/23 5:28:16

基于Flask的通用登录注册模块，并代理跳转到目标网址

实现了用户密码的加密，代理跳转到目标网址，不会暴露目标路径，未登录的情况下访问proxy则自动跳转到登录页，使用时需要修改配置项config，登录注册页面背景快速修改，可以实现登录注册模块的快速复用。 1.app…...

编程日记 2025/7/21 7:31:42

nlohmann::json教程

nlohmann::json 核心函数和方法 1. 基础构造与初始化函数/方法描述示例json j;创建一个空的 JSON 对象（默认是 object 类型）json j;json::object()显式创建一个空的 JSON 对象json j json::object();json::array()显式创建一个空的 JSON 数组json ar…...

编程日记 2025/7/20 11:48:19

多层感知机从0开始实现

《动手学深度学习》-4.2-笔记多层感知机在输出层和输入层之间增加一个或多个全连接隐藏层，并通过激活函数转换隐藏层的输出。常用的激活函数包括ReLU函数、sigmoid函数和tanh函数。 import torch from torch import nn from d2l import torch as d2lbatch_size …...

编程日记 2025/7/23 9:05:37

在K8S中使用ArgoCD做持续部署

一、了解argocd ArgoCD是一个基于Kubernetes的GitOps持续交付工具，应用的部署和更新都可以在Git仓库上同步实现，并自带一个可视化界面。本文介绍如何使用GitArgocd方式来实现在k8s中部署和更新应用服务。关于ci这一块这里不多介绍。主要讲解argocd如何实…...

编程日记 2025/7/18 22:01:32

Python中数据结构元组详解

在Python中，元组（Tuple）是一种不可变的序列类型，常用于存储一组有序的数据。与列表（List）不同，元组一旦创建，其内容无法修改。本文将详细介绍元组的基本操作、常见运算、内置函数以及…...

编程日记 2025/7/13 16:46:15

23种设计模式-命令(Command)设计模式

命令设计模式 🚩什么是命令设计模式？🚩命令设计模式的特点🚩命令设计模式的结构🚩命令设计模式的优缺点🚩命令设计模式的Java实现🚩代码总结🚩总结 🚩什么是命令设计模式…...

编程日记 2025/7/17 22:00:36

计算机网络——数据链路层的功能

目录物理链路逻辑链路封装成帧（组帧） 帧定界透明传输 SDU 差错控制可靠传输流量控制介质访问控制主机需要实现第一层到第五层的功能，而路由器这种节点只需要实现第一层到第三层的这些功能假设左边用户需要给右边用户发送…...

编程日记 2025/7/21 1:13:40

Axure项目实战：智慧城市APP（一）首页（动态面板、拖动效果）

亲爱的小伙伴，在您浏览之前，烦请关注一下，在此深表感谢！ 课程主题：智慧城市APP 主要内容：首页、政务公告、公交查询页面设计应用场景：各类政务型、B端APP均可参考案例展示：&am…...

编程日记 2025/7/23 14:21:12

Unity网络开发快速回顾

知识点来源：总结人间自有韬哥在， 唐老狮，豆包目录 1.网络通信-通信必备知识-IP地址和端口类2.网络通信中序列化和反序列化2进制数据3.Socket类4.TCP同步服务端和客户端基础实现4.1.服务端基本实现4.2.客户端实现： 5.区分消息类型…...

编程日记 2025/7/19 13:26:22

鸿蒙学习笔记（1）-文件解读、编写程序、生命周期

一、文件解读 .hvigor:装有一些编译过程中的依赖缓存。 .idea:工具自动生成的，标记我们的工具是基于idea。 AppScope:代表着整个APP的配置，最后打包使用。之中的resources目录下是应用的名称和图片存放路径，其中app.json5： bund…...

编程日记 2025/7/17 11:38:47

多维动态规划力扣hot100热门面试算法题面试基础核心思路背题

多维动态规划不同路径 https://leetcode.cn/problems/unique-paths/ 核心思路比较简单 f[i][j] f[i - 1][j] f[i][j - 1] ; 示例代码 class Solution {public int uniquePaths(int n, int m) {int[][] f new int[n][m];for (int i 0; i < n; i)f[i][0] 1;for…...

编程日记 2025/7/20 19:57:05

C++ 多线程简要讲解

std::thread是 C11 标准库中用于多线程编程的核心类，提供线程的创建、管理和同步功能。下面我们一一讲解。一.构造函数官网的构造函数如下： 1.默认构造函数和线程创建 thread() noexcept; 作用：创建一个 std::thread 对象，但…...

编程日记 2025/7/22 20:55:18

乐仓VUE常用点

页面跳转发送 router.push({ name: config.editRouteName, query: { type: create, from: route.name as string, }, }); router.push({ name: MbdCalScheme }); 接收 const route useRoute(); const type compu…...

编程日记 2025/7/21 3:15:12

单一主数据系统 vs. 统一主数据中心，哪种更优？

在企业中，主数据管理（MDM）已成为确保数据一致性和高效运营的关键。企业通常使用多个系统来处理业务数据，如ERP、CRM、SRM等。在这种多系统环境下，如何统一管理企业数据、避免数据孤岛，成为了一项重大挑战。…...

编程日记 2025/7/21 20:06:55

数据结构—树（java实现）

目录一、树的基本概念1.树的术语2.常见的树结构二、节点的定义三、有关树结构的操作1.按照数组构造平衡二叉搜索树2.层序遍历树3.前、中、后序遍历树(1).前序遍历树(2).中序遍历树(3).后序遍历树(4).各种遍历的情况的效果对比 4.元素添加5.元素删除1.删除叶子节点2.删除单一…...

编程日记 2025/7/20 8:06:15

Modbus RTU ---＞ Modbus TCP透传技术实现（Modbus透传、RS485透传、RTU透传）分站代码实现、协议转换器

文章目录 Modbus RTU到Modbus TCP透传技术实现1. 透传技术概述1.1 透传基本原理- 协议帧格式转换- 地址映射与管理- 通信时序适配- 错误检测与处理 2. 透传网关硬件架构2.1 典型硬件结构- 微控制器/处理器(ARM、STM32等)- RS-485/RS-232收发器- 以太网控制器(如W5500)- 电源管理…...

编程日记 2025/7/19 14:57:22

Flask（三）路由与视图函数

在 Flask 中，路由 (Route) 是将 URL 地址映射到特定的视图函数 (View Function) 的机制。视图函数处理用户请求，并返回 HTTP 响应。理解路由和视图函数是构建 Flask 应用的基础。 3.1 路由的基本概念 Flask 使用 app.route() 装饰器来定义路由。以下是…...

编程日记 2025/7/21 8:20:00

mysql 磐维（opengauss）tidb误删数据之高级恢复

Mysql参考： Mysql 8.0 XtraBackupMysqlbinlog 完全恢复 - 墨天轮 Mysql 8.0 XtraBackupMysqlbinlog 完全恢复[TOC]# 一、安装mysql 8.0.19## 1.1https://www.modb.pro/db/509223MySQL 的全量备份、增量备份与 Binlog 时间点恢复_mysqlbinlog自动备份吗-CSDN博客文章…...

编程日记 2025/7/21 13:58:37

常见框架漏洞（一）----Thinkphp（TP）

Thinkphp框架介绍： ThinkPHP是为了简化企业级应⽤开发和敏捷WEB应⽤开发⽽诞⽣的，是⼀个快速、兼容⽽且简单的轻量级国产PHP开发框架，诞⽣于2006年初，原名FCS，2007年元旦正式更名为 ThinkPHP，遵循Apache…...

编程日记 2025/7/18 18:12:24

Git 使用指南：从设置用户信息到项目提交的全流程教程（持续更新）

一、设置 Git 用户信息 1.全局设置（适用于所有 Git 仓库）： git config --global user.name "Your Name" git config --global user.email youexample.com 2.仅针对当前仓库设置（如果您只想为当前项目设置&#xff0…...

编程日记 2025/7/19 19:33:09

Json在扩展属性xdata中的应用实例——cad 二次开发c#

以下是一个使用AutoCAD C#.NET API实现你需求的示例代码，代码实现了提示用户选择一个实体，将一些字符串变量及其对应的值组成JSON格式数据存储到实体的扩展数据（XData）中，并在弹出窗口中显示该实体的所有扩展数据信息。…...

编程日记 2025/7/19 22:22:52

Unity Animation的其中一种运用方式

Animation是Unity的旧的动画系统，先说目的，其使用是为了在UI中播放动效，并且在动效播放结束后接自定义事件而设计的设计的关键点在于，这个脚本不是通过Animation直接播放动画片段，而是通过修改AnimationState的nor…...

编程日记 2025/7/22 2:20:41

C++ 的基本内置类型（十二）

C 作为一门强大的编程语言，其内置类型是开发者必须掌握的基础。本文将详细介绍 C 的基本内置类型，包括算术类型和空类型，探讨它们的特性、尺寸以及在机器上的实现方式。一、基本内置类型概述 C 定义了一套基本数据类型，主要包…...

编程日记 2025/7/20 19:29:07

Android设计模式之单例模式

一、定义：确保一个类只有一个实例，并且自动实例化，并向整个系统提供这个实例。二、使用场景：避免重复创建对象，过多消耗系统资源。三、使用方式 3.1饿汉式：类加载时立即初始化，线程安全&…...

编程日记 2025/7/13 17:21:17

随笔（1）

1、解除切屏限制命令 document.body.onblur null2、vue3 getCurrentInstance import { getCurrentInstance } from vue const {proxy} getCurrentInstance() proxy.mittBus.emit(message,xxxx)3、自定义双向绑定，modelValue 就是对应输入框的值 emit(update:mo…...

编程日记 2025/7/19 4:35:21

系统与网络安全------网络应用基础（3）

资料整理于网络资料、书本资料、AI，仅供个人学习参考。路由器认识路由器负责在不同网络之间转发数据的设备路由器决定到达目标的路径路由器也为直连网络的主机充当”网关“角色路由器是实现网络互连的最核心设备工作原理每台路由器维护一份路由表&…...

编程日记 2025/7/22 5:25:37

Java 基于微信小程序的开放实验室预约管理系统

博主介绍：✌Java徐师兄、7年大厂程序员经历。全网粉丝13w、csdn博客专家、掘金/华为云等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇🏻 不…...

编程日记 2025/7/24 1:07:50

Linux内核NIC网卡驱动实战案例分析

以下Linux 内核模块实现了一个虚拟网络设备驱动程序，其作用和意义如下： 1. 作用 （1）创建虚拟网络设备对驱动程序动态创建了两个虚拟网络设备（nic_dev[0]和nic_dev[1]），模拟物理网卡的功能。这两…...

编程日记 2025/7/22 19:56:10

R 基础语法

R 基础语法引言 R 是一种针对统计计算和图形表示而设计的编程语言和环境。它广泛应用于统计学、生物信息学、数据挖掘等领域。本文将为您介绍 R 语言的基础语法，帮助您快速上手。 R 的基本结构 R 语言的基本结构包括：变量、数据类型、运算符、控制结构、函数等。变量 …...

编程日记 2025/7/22 9:33:53

JDK 24 发布，新特性解读！

一、版本演进与技术格局新动向北京时间3月20日，Oracle正式发布Java SE 24。作为继Java 21之后的第三个非LTS版本，其技术革新力度远超预期——共集成24项JEP提案，相当于Java 22（12项）与Java 23（12项&#…...

编程日记 2025/7/18 20:33:25

在 Qt 中，不带参数或整形的参选的信号能够从 std::thread 发送成功，而带枚举离线的信号却发送失败

在 Qt 中，不带参数或整形的参选的信号能够从 std::thread 发送成功，而带枚举离线的信号却发送失败当信号和槽在不同线程时，默认使用队列连接（Qt::QueuedConnection），信号会被放入接收线程的事件队列&…...

编程日记 2025/7/18 20:47:11

文章目录

前言

一、自定义指令的生命周期钩子

二、自定义指令的创建与注册+使用

三、扩展 简化形式​

总结

相关文章：

三、扩展简化形式