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" 来传递给一个不同的元素。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/65884.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

面试题:@Transactional 注解在自调用情况下会失效原因

Transactional 注解在自调用情况下会失效&#xff0c;这主要是由于 Spring 事务管理的实现机制所导致的。以下是对这一问题的详细解释&#xff1a; 一、Spring 事务管理的实现机制 Spring 的事务管理是基于 AOP&#xff08;面向切面编程&#xff09;实现的&#xff0c;它通过…

Speech Recognition vs. Voice Recognition | 语音识别工作原理 | 模型训练 | 应用

注&#xff1a;Speech Recognition 与 Voice Recognition 机翻混淆&#xff0c;未校。 Speech Recognition vs. Voice Recognition: In Depth Comparison 语音识别与语音识别&#xff1a;深度比较 Calendar12 July 2023 Have you ever stopped to think about how your voice…

[ubuntu-22.04]ubuntu不识别rtl8153 usb转网口

问题描述 ubuntu22.04插入rtl8153 usb转网口不识别 解决方案 安装依赖包 sudo apt-get install libelf-dev build-essential linux-headers-uname -r sudo apt-get install gcc-12 下载源码 Realtek USB FE / GBE / 2.5G / 5G Ethernet Family Controller Softwarehttps:/…

USB 控制传输的 PID 序列

文章目录 USB 控制传输的 PID 序列PID 序列setup 设置阶段data 数据阶段status 状态阶段setup + in data + out statussetupin dataout statussetup + in statussetupin statussetup + out data + in statussetupout datain status为什么需要了解 PID 序列状态转换总结参考USB …

LeetCode题解:2625. 扁平化嵌套数组,递归

原题链接 https://leetcode.cn/problems/flatten-deeply-nested-array/ 题目解析 题目要求我们将一个多维数组扁平化到指定的深度。具体来说&#xff0c;我们需要将数组中的子数组扁平化&#xff0c;直到达到给定的深度n。如果子数组的深度大于n&#xff0c;则不进行扁平化。…

SkyWalking Agent 配置 Spring Cloud Gateway 插件解决日志错误

SkyWalking Agent 配置 Spring Cloud Gateway 插件解决日志错误 IDEA中启动网管时&#xff0c;需要配置VM启动参数&#xff0c;格式如下&#xff1a; # 配置 SkyWalking Agent 启动参数&#xff0c;以便将网关服务的性能数据上报到 SkyWalking 服务器。 -javaagent:/path/to/sk…

JavaWeb Servlet的getInitParameter、业务层、控制反转IOC和依赖注入DI

目录 1. Servlet的getInitParameter2. 业务层3. 控制反转IOC和依赖注入DI3.1 背景3.2 实现如下3.3 原理 1. Servlet的getInitParameter Servlet有两个getInitParameter 一个是servletContext.getInitParameter&#xff0c;获取context-param的全局参数一个是servletConfig.ge…

前端-动画库Lottie 3分钟学会使用

目录 1. Lottie地址 2. 使用html实操 3. 也可以选择其他的语言 1. Lottie地址 LottieFiles: Download Free lightweight animations for website & apps.Effortlessly bring the smallest, free, ready-to-use motion graphics for the web, app, social, and designs.…

在Ubuntu 18.04.6 LTS安装OpenFace流程

一、修改配置:将gcc8&#xff0c;g8作为默认选项 sudo update-alternatives --install /usr/bin/gcc gcc /usr/bin/gcc-8 100 sudo update-alternatives --config gcc 选择版本&#xff0c;再查看gcc --version sudo update-alternatives --install /usr/bin/g g /usr/bin/g-…

Cauchy-Schwarz不等式:向量内积的“上限卫士”,帮你衡量向量有多“同向”

【有作图代码】Cauchy-Schwarz不等式&#xff1a;向量内积的“上限卫士”&#xff0c;帮你衡量向量有多“同向” 关键词&#xff1a; #柯西-施瓦茨不等式 Cauchy-Schwarz Inequality #向量内积 Vector Dot Product #向量范数 Vector Norm #向量夹角 Angle Between Vectors #不…

比较 FreeSWITCH 的 asr 事件和回调函数

用 lua 来描述&#xff0c;是这样的 第一种做法&#xff1a; session:setVariable("fire_asr_events", "true") session:execute("detect_speech", "start-input-timers") 识别到结果之后可以收到 DETECTED_SPEECH 事件 另外一个做法…

Flink源码解析之:如何根据JobGraph生成ExecutionGraph

Flink源码解析之&#xff1a;如何根据JobGraph生成ExecutionGraph 在上一篇Flink源码解析中&#xff0c;我们介绍了Flink如何根据StreamGraph生成JobGraph的流程&#xff0c;并着重分析了其算子链的合并过程和JobGraph的构造流程。 对于StreamGraph和JobGraph的生成来说&…

Spring Boot 中的 classpath详解

Spring Boot 中的 classpath 详解 在开发 Spring Boot 应用时&#xff0c;理解 classpath 的概念对于配置、资源管理以及构建项目非常重要。特别是当我们使用 Maven 打包工具时&#xff0c;项目的资源文件在不同的阶段会被放置到不同的目录。本文将深入探讨 Spring Boot 中的 …

数据结构之串

数据结构之串&#xff08;String&#xff09; 数据结构之串&#xff08;String&#xff09;1. 串的定义2. 串的存储结构2.1 顺序存储2.2 链式存储2.3 索引存储 3. 串的常见操作3.1 基本操作3.1.1 创建串3.1.2 求串长度3.1.3 串连接3.1.4 串比较3.1.5 串拷贝 3.2 高级操作3.2.1 …

生成式AI与RAG架构:如何选择合适的向量数据库?

大规模语言模型和情境感知的AI应用程序推动了检索增强生成&#xff08;RAG&#xff09;架构的发展&#xff0c;使其成为关注的焦点。RAG将生成模型的力量与外部知识相结合&#xff0c;允许系统生成更加具体且与情境相关的回应。 向量数据库构成了RAG系统的基石。选择正确的向量…

hive on spark报错解决(基于hive-3.1.3和spark-2.3.0)

相关配置可参考&#xff1a;https://blog.csdn.net/weixin_46389691/article/details/134126254 原作者&#xff1a;月亮给我抄代码 他写的很详细 ERROR : Job failed with java.lang.IllegalAccessError: tried to access method com.google.common.base.Stopwatch.<init&…

电脑找不到mfc110.dll文件要如何解决?Windows缺失mfc110.dll文件快速解决方法

一、mfc110.dll文件的重要性 mfc110.dll&#xff0c;全称Microsoft Foundation Class Library 110&#xff0c;是Microsoft Visual C Redistributable for Visual Studio 2012的一部分。这个动态链接库&#xff08;DLL&#xff09;文件对于支持基于MFC&#xff08;Microsoft F…

大模型Weekly 03|OpenAI o3发布;DeepSeek-V3上线即开源!

大模型Weekly 03&#xff5c;OpenAI o3发布&#xff1b;DeepSeek-V3上线即开源&#xff01;DeepSeek-V3上线即开源&#xff1b;OpenAI 发布高级推理模型 o3https://mp.weixin.qq.com/s/9qU_zzIv9ibFdJZ5cTocOw?token47960959&langzh_CN 「青稞大模型Weekly」&#xff0c;持…

4、上一个接口返回值,作为下一个方法(接口)的变量

import requestsclass TestCase:# 设置1个类变量B "初始值"def test1(self):url "**这里是接口url**"params {"type": "json"}resp1 requests.get(urlurl, paramsparams)# .json()用于将服务器返回的 JSON 格式的响应内容解析为 P…

USB 中断传输的 PID 序列

中断传输的 PID 序列 端点在初始化后&#xff0c;从 DATA0 开始&#xff0c;每成功执行一个事务&#xff0c;数据包序列翻转一次&#xff08;从 DATA0 变为DATA1 或从 DATA1 变为 DATA0)。 数据翻转和传输的个数没有直接关系&#xff0c;只由端点在初始化后处理的总数决定。 …