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

Vue3.2 自定义指令详解与实战

一、介绍

在Vue3中,自定义指令为开发者提供了一种灵活的方式来扩展Vue的HTML模板语法,使其能够执行特定的DOM操作或组件逻辑。不同于Vue2.x中的全局和局部指令注册方式,Vue3引入了Composition API,这使得自定义指令的编写和使用更为直观和简洁。

二、创建自定义指令

1. 全局自定义指令

在Vue3中,我们首先需要通过app.directive()方法来注册全局自定义指令:

// 导入createApp和其他必要的库
import { createApp } from 'vue';// 定义全局自定义指令
const focusDirective = {mounted(el) {el.focus();}
};// 创建并配置应用实例
const app = createApp(App);// 注册全局自定义指令
app.directive('focus', focusDirective);// 挂载应用
app.mount('#app');

上述代码定义了一个名为focus的全局指令,当指令绑定到元素时,会在该元素挂载完成后自动获取焦点。

2. 局部自定义指令

在单个组件内部,我们可以直接在组件选项的directives对象中定义和注册局部指令:

<template><input v-focus />
</template><script>
import { defineComponent, onMounted } from 'vue';export default defineComponent({directives: {focus: {mounted(el) {onMounted(() => {// 防抖优化,避免频繁调用el.focus()setTimeout(() => {el.focus();});});}}}
});
</script>

这里我们同样定义了一个focus指令,但它只在当前组件内有效。为了实现防抖效果(debounce),我们在mounted钩子中使用了onMounted函数结合setTimeout来延迟调用el.focus()

3. 指令参数与生命周期钩子

除了mounted钩子外,自定义指令还可以有其他生命周期钩子,例如beforeMountupdatedunmounted等。每个指令接收四个参数:el(绑定元素)、binding(包含指令信息的对象,如值、修饰符等)、vnode(虚拟节点)和prevVnode(上一个虚拟节点,在更新钩子中可用)。

4. 使用修饰符和动态参数

指令可以接受修饰符和动态参数,例如:

<input v-my-directive.modifier="value" />

在指令处理器中可以通过binding.arg访问到指令名后的参数,通过binding.modifiers访问修饰符。

{mounted(el, binding) {if (binding.modifiers.myModifier) {// 处理myModifier修饰符逻辑}const paramValue = binding.value; // 访问动态传入的值}
}

三、实战案例 - Input自动聚焦

让我们看一个实际的小demo,它使用自定义指令让Input框在渲染后自动获取焦点:

// 全局注册
app.directive('auto-focus', {mounted(el) {el.focus();}
});// 或者在组件内部注册
directives: {autoFocus: {mounted(el) {el.focus();}}
}// 在模板中使用
<input v-auto-focus />

通过以上步骤,我们就成功地在Vue3.2项目中实现了自定义指令的创建和使用,从而增强了Vue的灵活性和可定制性。

相关文章:

Vue3.2 自定义指令详解与实战

一、介绍 在Vue3中&#xff0c;自定义指令为开发者提供了一种灵活的方式来扩展Vue的HTML模板语法&#xff0c;使其能够执行特定的DOM操作或组件逻辑。不同于Vue2.x中的全局和局部指令注册方式&#xff0c;Vue3引入了Composition API&#xff0c;这使得自定义指令的编写和使用更…...

XV-3510CB振动陀螺仪传感器

XV-3510CB传感器是一款振动陀螺仪传感器&#xff0c;具有卓越的稳定性和可靠性&#xff0c;超小的封装尺寸SMD53.21.3mm&#xff0c;密封提供了良好的可持续环保能力&#xff0c;采用振动晶体&#xff0c;该传感器具有稳定的性能和超长的寿命。振动晶体的振动能够提供更为精确的…...

设计模式Java向

设计原则&#xff1a; 开闭原则&#xff1a; 用例对象和提供抽象功能进行分割&#xff0c;用例不变&#xff0c;抽象功能被实现&#xff0c;用于不断的扩展&#xff0c;于是源代码不需要进行修改&#xff0c;只在原有基础上进行抽象功能的实现从而进行代码扩展。不变源于代码…...

图片素材管理软件Eagle for mac提高素材整理维度

Eagle for mac是一款图片素材管理软件&#xff0c;支持藏网页图片&#xff0c;网页截屏&#xff0c;屏幕截图和标注&#xff0c;自动标签和筛选等功能&#xff0c;让你设计师方便存储需要的素材和查找&#xff0c;提供工作效率。 Eagle mac软件介绍 Eagle mac帮助你成为更好、…...

Transformer各模块结构详解(附图)

前言&#xff1a;基于TRANSFORMER的结构在视觉领域是承上启下的作用。刚接触会比较难&#xff0c;上的话需要对RNN&#xff0c;LSTM&#xff0c;ATTENTION先有初步的了解。下的话需要学习VIT&#xff0c;GPT&#xff0c;DETR等结构先了解TRANSFORMER都是必要的。 参考&#xff…...

Python遥感影像深度学习指南(2)-在 PyTorch 中创建自定义数据集和加载器

在上一篇 文章中,我们Fast.ai 在卫星图像中检测云轮廓,检测物体轮廓被称为语义分割。虽然我们用几行代码就能达到 96% 的准确率,但该模型无法考虑数据集中提供的所有输入通道(红、绿、蓝和近红外)。问题在于,深度学习框架(如 Keras、Fast.ai 甚至 PyTorch)中的大多数语…...

韩版传奇 2 源码分析与 Unity 重制(三)客户端渲染管线

专题介绍 该专题将会分析 LOMCN 基于韩版传奇 2,使用 .NET 重写的传奇源码(服务端 + 客户端),分析数据交互、状态管理和客户端渲染等技术,此外笔者还会分享将客户端部分移植到 Unity 和服务端用现代编程语言重写的全过程。 概览 在这一篇文章中,我们将开始分析传奇客户…...

深入浅出图解C#堆与栈 C# Heap(ing) VS Stack(ing) 第三节 栈与堆,值类型与引用类型

深入浅出图解C#堆与栈 C# Heaping VS Stacking 第三节 栈与堆&#xff0c;值类型与引用类型 [深入浅出图解C#堆与栈 C# Heap(ing) VS Stack(ing) 第一节 理解堆与栈](https://mp.csdn.net/mdeditor/101021023)[深入浅出图解C#堆与栈 C# Heap(ing) VS Stack(ing) 第二节 栈基本工…...

分享好用的chatgpt

1.在vscode中&#xff0c;点击这个&#xff1a; 2.搜索&#xff1a;ChatGPT - 中文版&#xff0c;个人觉得这个更好用&#xff1a; 3.下载完成之后&#xff0c;左侧会多出来这个&#xff1a; 点击这个图标就能进入chatgpt界面了 4.如果想使用tizi访问国外的chatgpt&#xf…...

【小白专用】C# 压缩文件 ICSharpCode.SharpZipLib.dll效果:

插件描述&#xff1a; ICSharpCode.SharpZipLib.dll 是一个完全由c#编写的Zip, GZip、Tar 、 BZip2 类库,可以方便地支持这几种格式的压缩解压缩, SharpZipLib 的许可是经过修改的GPL&#xff0c;底线是允许用在不开源商业软件中&#xff0c;意思就是免费使用。具体可访问ICSha…...

Protobuf 编码规则及c++使用详解

Protobuf 编码规则及c使用详解 Protobuf 介绍 Protocol Buffers (a.k.a., protobuf) are Google’s language-neutral, platform-neutral, extensible mechanism for serializing structured data Protocol Buffers&#xff08;简称为protobuf&#xff09;是谷歌的语言无关、…...

Kafka优异的性能是如何实现的?

Apache Kafka是一个分布式流处理平台&#xff0c;设计用来处理高吞吐量的数据。它被广泛用于构建实时数据管道和流式应用程序。Kafka之所以能够提供优秀的性能和高吞吐量&#xff0c;主要得益于以下几个方面的设计和实现&#xff1a; 1. 分布式系统设计 Kafka是一个分布式系统…...

(二)MaterializedMySQL具体实施步骤举例

要将 MySQL 中的 test 数据库实时同步到位于同一台服务器&#xff08;IP 地址为 192.168.197.128&#xff09;上的 ClickHouse&#xff0c;您可以使用 MaterializedMySQL 引擎。以下是详细的步骤&#xff1a; 1. 准备工作 确保您的 MySQL 和 ClickHouse 服务都在运行&#xf…...

日志框架简介-Slf4j+Logback入门实践 | 京东云技术团队

前言 随着互联网和大数据的迅猛发展&#xff0c;分布式日志系统和日志分析系统已广泛应用&#xff0c;几乎所有应用程序都使用各种日志框架记录程序运行信息。因此&#xff0c;作为工程师&#xff0c;了解主流的日志记录框架非常重要。虽然应用程序的运行结果不受日志的有无影…...

c 语言, 随机数,一个不像随机数的随机数

c 语言&#xff0c; 随机数&#xff0c;一个不像随机数的随机数 使用两种方式获取随机数&#xff0c;总感觉使用比例的那个不太像随机数。 方法一&#xff1a; rand() 获取一个随机数&#xff0c;计算这个随机数跟最大可能值 RAND_MAX&#xff08;定义在 stdlib.h 中&#xf…...

Git三种方法从远程仓库拉取指定分支

克隆指定分支 git clone -b dev开发分支 https://github.com/521/springboot-rabbitmq.git切换到远程分支 git checkout -b dev开发分支 origin/dev开发分支参考 Git三种方法从远程仓库拉取指定的某一个分支...

7.6分割回文串(LC131-M)

算法&#xff1a; 有很多分割结果&#xff0c;按照for循环去做肯定做不来 这个时候就要想到回溯&#xff01;那就要画树&#xff01; 画树 分割的画树过程其实和组合很像。 例如对于字符串aab&#xff1a; 组合问题&#xff1a;选取一个a之后&#xff0c;在ab中再去选取第…...

stata回归结果输出中,R方和F值到底是用来干嘛的?

先直接回答问题&#xff0c;R方表示可决系数&#xff0c;反映模型的拟合优度&#xff0c;也就是模型的解释能力如何&#xff0c;也可以理解为模型中的各个解释变量联合起来能够在多大程度上解释被解释变量&#xff1b;F值用于模型整体的统计显著性&#xff0c;对应的P值越小&am…...

Windows搭建RTMP视频流服务(Nginx服务器版)

文章目录 引言1、安装FFmpeg2、安装Nginx服务器3、实现本地视频推流服务4、使用VLC或PotPlayer可视化播放器播放视频5、RTSP / RTMP系列文章 引言 RTSP和RTMP视频流的区别 RTSP &#xff08;Real-Time Streaming Protocol&#xff09;实时流媒体协议。 RTSP定义流格式&#xff…...

IP地址SSL证书

IP地址SSL证书是一种专门针对公网IP地址颁发的数字证书。与常规的域名SSL证书类似&#xff0c;其主要目标是提供数据加密和身份验证。以下几点概述了IP地址SSL证书的重要特性及其申请过程&#xff1a; 1. 保护直接IP访问&#xff1a; 当用户直接通过IP地址访问服务时&#xff…...

技术萨满祭典:给数据中心献祭机械硬盘

一、仪式的缘起&#xff1a;当测试工程师遇见数据之灵在数字文明的殿堂中&#xff0c;数据中心是承载万物之灵的圣地。而软件测试从业者&#xff0c;正是穿梭于代码与硬件之间的现代萨满。当机械硬盘&#xff08;HDD&#xff09;在SSD洪流中逐渐退居幕后&#xff0c;这场为老旧…...

零代码玩转OpenClaw:ollama-QwQ-32B自动化脚本生成教程

零代码玩转OpenClaw&#xff1a;ollama-QwQ-32B自动化脚本生成教程 1. 为什么选择OpenClawollama-QwQ-32B组合&#xff1f; 上周我在整理旅行照片时&#xff0c;面对上千张命名混乱的图片文件&#xff0c;突然意识到&#xff1a;这不正是测试OpenClaw自动化能力的绝佳场景吗&…...

Python农业物联网部署突然中断?揭秘土壤传感器数据丢包率超37%的底层时钟漂移根源(附校准代码)

第一章&#xff1a;Python农业物联网部署在现代农业数字化转型中&#xff0c;Python凭借其丰富的物联网生态库&#xff08;如paho-mqtt、Adafruit-IO、RPi.GPIO&#xff09;和轻量级运行特性&#xff0c;成为边缘设备与云平台协同的核心语言。本章聚焦于基于树莓派的土壤温湿度…...

这次终于选对了!降AI率软件深度测评与推荐

2026年真正好用的AI论文降重与改写工具&#xff0c;核心看降重效果、去AI味、格式保留、学术适配四大指标。综合实测&#xff0c;千笔AI、ThouPen、豆包、DeepSeek、Grammarly 是当前最值得推荐的梯队&#xff0c;覆盖从免费到付费、从中文到英文、从文科到理工的全场景需求。 …...

FireRedASR-AED-L在Windows系统的部署问题解决方案

FireRedASR-AED-L在Windows系统的部署问题解决方案 1. 引言 如果你正在Windows系统上尝试部署FireRedASR-AED-L这个强大的语音识别模型&#xff0c;可能会遇到各种让人头疼的问题。环境配置、依赖冲突、GPU兼容性——这些都是Windows环境下部署深度学习模型时常见的拦路虎。 …...

Go-Gin-API跨域处理终极指南:5分钟配置CORS中间件

Go-Gin-API跨域处理终极指南&#xff1a;5分钟配置CORS中间件 【免费下载链接】go-gin-api xinliangnote/go-gin-api 是一个用于快速构建 Go 语言 API 的框架。适合在Go语言开发的Web应用中使用&#xff0c;提供丰富的中间件和模块化架构。特点是提供了简洁的API、自动化API文档…...

隐私保护方案:OpenClaw+GLM-4.7-Flash本地化处理敏感数据

隐私保护方案&#xff1a;OpenClawGLM-4.7-Flash本地化处理敏感数据 1. 为什么需要本地化处理敏感数据&#xff1f; 去年我帮一位做财务咨询的朋友处理季度报表时&#xff0c;遇到了一个棘手问题。他需要分析上百份包含客户银行流水、身份证号等信息的Excel文件&#xff0c;但…...

微信公众号自动回复避坑指南:如何高效处理用户关键词匹配(PHP版)

微信公众号自动回复进阶实战&#xff1a;PHP高效关键词匹配与消息处理 在运营微信公众号时&#xff0c;自动回复功能是与用户互动的第一道门槛。一个响应迅速、匹配精准的自动回复系统不仅能提升用户体验&#xff0c;还能有效减轻人工客服压力。本文将深入探讨如何用PHP构建一个…...

Uvicorn连接池配置:优化数据库连接性能的完整指南

Uvicorn连接池配置&#xff1a;优化数据库连接性能的完整指南 【免费下载链接】uvicorn An ASGI web server, for Python. &#x1f984; 项目地址: https://gitcode.com/GitHub_Trending/uv/uvicorn Uvicorn作为一款高性能的ASGI web服务器&#xff0c;在Python Web应用…...

FLUX.1文生图优化技巧:SDXL风格节点参数这样调,图片效果更出彩

FLUX.1文生图优化技巧&#xff1a;SDXL风格节点参数这样调&#xff0c;图片效果更出彩 1. 快速上手&#xff1a;FLUX.1文生图工作流基础操作 1.1 工作流启动指南 启动FLUX.1文生图工作流只需简单三步&#xff1a; 在ComfyUI左侧面板找到"FLUX.1-dev-fp8-dit文生图&quo…...