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

Vue3实战教程》24:Vue3自定义指令

如果您有疑问,请观看视频教程《Vue3实战教程》

自定义指令​

介绍​

除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外,Vue 还允许你注册自定义的指令 (Custom Directives)。

我们已经介绍了两种在 Vue 中重用代码的方式:组件和组合式函数。组件是主要的构建模块,而组合式函数则侧重于有状态的逻辑。另一方面,自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。

一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。下面是一个自定义指令的例子,当 Vue 将元素插入到 DOM 中后,该指令会将一个 class 添加到元素中:

vue

<script setup>
// 在模板中启用 v-highlight
const vHighlight = {mounted: (el) => {el.classList.add('is-highlight')}
}
</script><template><p v-highlight>This sentence is important!</p>
</template>

This sentence is important!

在 <script setup> 中,任何以 v 开头的驼峰式命名的变量都可以当作自定义指令使用。在上述例子中,vHighlight 可以在模板中以 v-highlight 的形式使用。

在不使用 <script setup> 的情况下,自定义指令需要通过 directives 选项注册:

js

export default {setup() {/*...*/},directives: {// 在模板中启用 v-highlighthighlight: {/* ... */}}
}

将一个自定义指令全局注册到应用层级也是一种常见的做法:

js

const app = createApp({})// 使 v-highlight 在所有组件中都可用
app.directive('highlight', {/* ... */
})

When to use custom directives​

只有当所需功能只能通过直接的 DOM 操作来实现时,才应该使用自定义指令。

一个常见例子是使元素获取焦点的 v-focus 指令。

vue

<script setup>
// 在模板中启用 v-focus
const vFocus = {mounted: (el) => el.focus()
}
</script><template><input v-focus />
</template>

该指令比 autofocus 属性更有用,因为它不仅在页面加载时有效,而且在 Vue 动态插入元素时也有效!

建议尽可能使用 v-bind 等内置指令声明模板,因为它们更高效,对服务端渲染也更友好。

指令钩子​

一个指令的定义对象可以提供几种钩子函数 (都是可选的):

js

const myDirective = {// 在绑定元素的 attribute 前// 或事件监听器应用前调用created(el, binding, vnode) {// 下面会介绍各个参数的细节},// 在元素被插入到 DOM 前调用beforeMount(el, binding, vnode) {},// 在绑定元素的父组件// 及他自己的所有子节点都挂载完成后调用mounted(el, binding, vnode) {},// 绑定元素的父组件更新前调用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 钩子中可用。

举例来说,像下面这样使用指令:

template

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

binding 参数会是一个这样的对象:

js

{arg: 'foo',modifiers: { bar: true },value: /* `baz` 的值 */,oldValue: /* 上一次更新时 `baz` 的值 */
}

和内置指令类似,自定义指令的参数也可以是动态的。举例来说:

template

<div v-example:[arg]="value"></div>

这里指令的参数会基于组件的 arg 数据属性响应式地更新。

Note

除了 el 外,其他参数都是只读的,不要更改它们。若你需要在不同的钩子间共享信息,推荐通过元素的 dataset attribute 实现。

简化形式​

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

template

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

js

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

对象字面量​

如果你的指令需要多个值,你可以向它传递一个 JavaScript 对象字面量。别忘了,指令也可以接收任何合法的 JavaScript 表达式。

template

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

js

app.directive('demo', (el, binding) => {console.log(binding.value.color) // => "white"console.log(binding.value.text) // => "hello!"
})

在组件上使用​

不推荐

不推荐在组件上使用自定义指令。当组件具有多个根节点时可能会出现预期外的行为。

当在组件上使用自定义指令时,它会始终应用于组件的根节点,和透传 attributes 类似。

template

<MyComponent v-demo="test" />

template

<!-- MyComponent 的模板 --><div> <!-- v-demo 指令会被应用在此处 --><span>My component content</span>
</div>

需要注意的是组件可能含有多个根节点。当应用到一个多根组件时,指令将会被忽略且抛出一个警告。和 attribute 不同,指令不能通过 v-bind="$attrs" 来传递给一个不同的元素。

相关文章:

Vue3实战教程》24:Vue3自定义指令

如果您有疑问&#xff0c;请观看视频教程《Vue3实战教程》 自定义指令​ 介绍​ 除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外&#xff0c;Vue 还允许你注册自定义的指令 (Custom Directives)。 我们已经介绍了两种在 Vue 中重用代码的方式&#xff1a;组件和组…...

【2025优质学术推荐】征稿控制科学、仪器、智能系统、通信、计算机、电子信息、人工智能、大数据、机器学习、软件工程、网络安全方向

【2025优质学术推荐】征稿控制科学、仪器、智能系统、通信、计算机、电子信息、人工智能、大数据、机器学习、软件工程、网络安全方向 【2025优质学术推荐】征稿控制科学、仪器、智能系统、通信、计算机、电子信息、人工智能、大数据、机器学习、软件工程、网络安全方向 文章目…...

【ArcGIS Pro/GeoScene Pro】可视化时态数据

可视化过去二十年新西兰国际旅游业的发展变化 工程数据下载 ArcGIS Pro 快速入门指南—ArcGIS Pro | 文档 添加数据 数据为中国旅客数据 转置表字段 列数据转行数据...

Linux buildroot和ubuntu的异同点

Buildroot 和 Ubuntu 都是 Linux 系统的操作环境,但它们的设计理念和使用场景有很大的不同。 一、定义与目标 Buildroot Buildroot 是一个用于生成嵌入式 Linux 系统的工具集,专注于交叉编译和构建嵌入式设备的最小 Linux 环境。它的目标是为嵌入式系统提供定制化和优化的…...

k8s系列--通过docker拉取的镜像导入到 containerd中

要将通过 docker pull 拉取的镜像导入到 containerd 中&#xff0c;可以按照以下步骤操作&#xff1a; 步骤 1&#xff1a;使用 docker 将镜像保存为 tar 文件 docker pull registry.cn-hangzhou.aliyuncs.com/google_containers/coredns:v1.11.1 docker save registry.cn-ha…...

Spring Boot(快速上手)

Spring Boot 零、环境配置 1. 创建项目 2. 热部署 添加依赖&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><optional>true</optional> </dependency&…...

note 41:账务系统开发规范

目录 系统设计 防重控制 流量控制 并发控制 异常处理 备份机制 系统开发​​​​​​​ 前端队列操作 外系统交互 ​​​​​​​​​​​​​​ 系统设计 防重控制 对于进入到系统中的数据&#xff08;文件导入、手工录入、系统直连等&#xff09;以及本系统发往外…...

基于嵌入式无人机UAV通信系统的实时最优资源分配算法matlab仿真

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 5.完整工程文件 1.课题概述 基于嵌入式无人机UAV通信系统的实时最优资源分配算法matlab仿真。具体参考文献&#xff1a; 考虑使用UAV作为中继辅助节点的设备到设备&#xff08;D2D&#xff09;无线信息和…...

《Vue3实战教程》35:Vue3测试

如果您有疑问&#xff0c;请观看视频教程《Vue3实战教程》 测试​ 为什么需要测试​ 自动化测试能够预防无意引入的 bug&#xff0c;并鼓励开发者将应用分解为可测试、可维护的函数、模块、类和组件。这能够帮助你和你的团队更快速、自信地构建复杂的 Vue 应用。与任何应用一…...

【Java设计模式-3】门面模式——简化复杂系统的魔法

在软件开发的世界里&#xff0c;我们常常会遇到复杂的系统&#xff0c;这些系统由多个子系统或模块组成&#xff0c;各个部分之间的交互错综复杂。如果直接让外部系统与这些复杂的子系统进行交互&#xff0c;不仅会让外部系统的代码变得复杂难懂&#xff0c;还会增加系统之间的…...

log4j2的Strategy、log4j2的DefaultRolloverStrategy、删除过期文件

文章目录 一、DefaultRolloverStrategy1.1、DefaultRolloverStrategy节点1.1.1、filePattern属性1.1.2、DefaultRolloverStrategy删除原理 1.2、Delete节点1.2.1、maxDepth属性 二、知识扩展2.1、DefaultRolloverStrategy与Delete会冲突吗&#xff1f;2.1.1、场景一&#xff1a…...

super_vlan

Super VLAN产生的背景 就经典的酒店例子来说&#xff0c;若是将101房和102房的网络划分在同一个vlan下面&#xff0c;那么101房出现了一个懂得某些安全技术的大佬&#xff0c;就会使得102房的隐私得到严重的隐患 所以这时我们就需要将二层给隔离开&#xff0c;但又要去保证10…...

前端CSS3学习

学习菜鸟教程 火狐-moz- 谷歌 Safari -webkit- 前面都加这个&#xff0c;可能才生效 边框 border: 1px solid #ddd 粗细 样式 样色 经常和border-radius 一块用 border-radius: 50px 20px 第一个左右 第二个右左 border-top-left-radius … box-shadow: 10px 5px 10px 0 #88…...

HTML——58.value和placeholder

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>value和placeholder属性</title></head><body><!--input元素的type属性&#xff1a;(必须要有)1.指定输入内容的类型2.默认为text,单行文本框-->&l…...

STM32单片机芯片与内部57 SPI 数据手册 寄存器

目录 一、SPI寄存器 1、SPI控制寄存器 1(SPI_CR1)(I2S模式下不使用) 2、SPI控制寄存器 2(SPI_CR2) 3、SPI 状态寄存器(SPI_SR) 4、SPI 数据寄存器(SPI_DR) 5、SPI CRC多项式寄存器(SPI_CRCPR)(I2S模式下不使用&#xff09; 6、SPI Rx CRC寄存器(SPI_RXCRCR)(I2S模式下不…...

前端异常处理合集

文章目录 前言&#xff1a;思考&#xff1a;一、为什么要处理异常&#xff1f;二、需要处理哪些异常&#xff1f; js 代码处理基本的try...catch语句 Promise 异常Promise 错误处理async/await 全局处理错误捕获window.onerrorwindow.onunhandledrejectionwindow.addEventListe…...

求职:求职者在现场面试中应该注意哪些问题?

求职者在现场面试中需要注意诸多方面的问题 面试前的准备 了解公司信息&#xff1a; 提前通过公司官网、社交媒体账号、新闻报道等渠道&#xff0c;熟悉公司的发展历程、业务范围、企业文化、主要产品或服务等内容。例如&#xff0c;如果是应聘一家互联网科技公司&#xff0c…...

第2章波动光学引论—抓本质,本质必定简单

1波动光学的电磁理论 1.1波动方程 1&#xff09;波动方程是通过描述波函数随时间和空间的变化来表达波动的传播和演化。 2&#xff09;一维波动方程&#xff1a; a.一维波动方程描述了沿着一条直线传播的波动。它的一般形式为&#xff1a; ∂u/∂t v ∂u/∂x 其中&#xff…...

分类模型评估利器-混淆矩阵

相关文章 地理时空动态模拟工具介绍&#xff08;上&#xff09; 地理时空动态模拟工具介绍&#xff08;下&#xff09;地理时空动态模拟工具的使用方法 前言 混淆矩阵&#xff08;Confusion Matrix&#xff09;是机器学习领域中用于评估分类模型性能的一种工具。它通过矩阵的…...

算法题(23):只出现一次的数字

初级&#xff1a; 审题&#xff1a; 需要输出只出现了一次的数据&#xff0c;其他数据均出现了两次 思路&#xff1a; 若不限制空间复杂度&#xff1a; 方法一&#xff1a;哈希表 用哈希映射循环一次&#xff0c;把对应数字出现的次数记录到数组里面&#xff0c;然后再遍历一次…...

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

Spring AI Chat Memory 实战指南:Local 与 JDBC 存储集成

一个面向 Java 开发者的 Sring-Ai 示例工程项目&#xff0c;该项目是一个 Spring AI 快速入门的样例工程项目&#xff0c;旨在通过一些小的案例展示 Spring AI 框架的核心功能和使用方法。 项目采用模块化设计&#xff0c;每个模块都专注于特定的功能领域&#xff0c;便于学习和…...

阿里云Ubuntu 22.04 64位搭建Flask流程(亲测)

cd /home 进入home盘 安装虚拟环境&#xff1a; 1、安装virtualenv pip install virtualenv 2.创建新的虚拟环境&#xff1a; virtualenv myenv 3、激活虚拟环境&#xff08;激活环境可以在当前环境下安装包&#xff09; source myenv/bin/activate 此时&#xff0c;终端…...

【Kafka】Kafka从入门到实战:构建高吞吐量分布式消息系统

Kafka从入门到实战:构建高吞吐量分布式消息系统 一、Kafka概述 Apache Kafka是一个分布式流处理平台,最初由LinkedIn开发,后成为Apache顶级项目。它被设计用于高吞吐量、低延迟的消息处理,能够处理来自多个生产者的海量数据,并将这些数据实时传递给消费者。 Kafka核心特…...

麒麟系统使用-进行.NET开发

文章目录 前言一、搭建dotnet环境1.获取相关资源2.配置dotnet 二、使用dotnet三、其他说明总结 前言 麒麟系统的内核是基于linux的&#xff0c;如果需要进行.NET开发&#xff0c;则需要安装特定的应用。由于NET Framework 是仅适用于 Windows 版本的 .NET&#xff0c;所以要进…...

PydanticAI快速入门示例

参考链接&#xff1a;https://ai.pydantic.dev/#why-use-pydanticai 示例代码 from pydantic_ai import Agent from pydantic_ai.models.openai import OpenAIModel from pydantic_ai.providers.openai import OpenAIProvider# 配置使用阿里云通义千问模型 model OpenAIMode…...

StarRocks 全面向量化执行引擎深度解析

StarRocks 全面向量化执行引擎深度解析 StarRocks 的向量化执行引擎是其高性能的核心设计&#xff0c;相比传统行式处理引擎&#xff08;如MySQL&#xff09;&#xff0c;性能可提升 5-10倍。以下是分层拆解&#xff1a; 1. 向量化 vs 传统行式处理 维度行式处理向量化处理数…...