vue3自定义全局指令和局部指令

news2025/4/6 0:33:34

1.全局指令


el:指令绑定到的DOM元素,可以用于直接操作当前元素,默认传入钩子的就是el参数,例如我们开始实现的focus指令,就是直接操作的元素DOM
binding:这是一个对象,包含以下属性:
value:在元素上使用指令时,传递给指令的值。例如:

<div v-reserve:fo.bb="hello">456789</div>

传递给reserve指令的值就是hello,我们可以拿到值并做相关处理
oldValue:之前的值,一般用于beforeUpate和updated钩子函数中,例如:beforeUpdate(el, {oldValue: ‘’})
arg:传递给指令的参数,非必需,例如

,那么传递给指令的参数就是foo
modifiers:一个由修饰符构成的对象,例如

app.directive('reserve', {
  mounted(el, binding) {
    console.log(el,binding);
  }
})

在这里插入图片描述


2.局部指令


<el-input v-model="hello" ref="inputRef2" v-focus:inputRef='2'></el-input>

const vFocus = {
  mounted: (el:any,binding:any) => {
  	console.log("%c 🅿️: binding ", "font-size:16px;background-color:#ee4f91;color:white;",el,binding)
  }
}

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

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

相关文章

Zynq系列FPGA实现SDI视频编解码,基于GTX高速接口,提供5套工程源码和技术支持

目录 1、前言工程概述免责声明 2、相关方案推荐本博已有的 SDI 编解码方案本方案在Xilinx--Kintex系列FPGA上的应用 3、详细设计方案设计原理框图SDI 输入设备Gv8601a 均衡器GTX 解串与串化SMPTE SD/HD/3G SDI IP核BT1120转RGB图像缓存视频读取控制HDMI输出RGB转BT1120Gv8500 驱…

玩转云服务:Oracle Cloud甲骨文永久免费云服务器注册及配置指南

上一篇&#xff0c;带大家分享了&#xff1a;如何薅一台腾讯云服务器。 不过&#xff0c;只有一个月免费额度&#xff0c;到期后需要付费使用。 相对而言&#xff0c;海外云厂商更加慷慨一些&#xff0c;比如微软Azure、甲骨文、亚马逊AWS等。 甲骨文2019年9月就推出了永久免…

信用卡没逾期就万事大吉了吗?

6月28日&#xff0c;中国人民银行揭晓了《2024年第一季度支付体系概览》&#xff0c;数据显示&#xff0c;截至本季度末&#xff0c;信用卡及借贷合一卡的总量为7.6亿张&#xff0c;与上一季度相比&#xff0c;这一数字微降了0.85个百分点。同时&#xff0c;报告还指出&#xf…

华为OD机试 - 跳马 - 广度优先搜索BFS(Java 2024 D卷 200分)

华为OD机试 2024D卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;D卷C卷A卷B卷&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;每一题都有详细的答题思路、详细的代码注释、样例测…

JMeter:循环控制器While Controller的用法小结

前言 在之前的博文“JMeter案例优化&#xff1a;测试执行结束后&#xff0c;实现tearDown的几种方式”中&#xff0c;尝试了JMeter的循环控制器While Controller&#xff0c;发现还有点小复杂&#xff0c;将学习过程记录下来&#xff0c;免得遗忘。 注&#xff1a;我使用的是…

【机器学习】机器学习与自然语言处理的融合应用与性能优化新探索

引言 自然语言处理&#xff08;NLP&#xff09;是计算机科学中的一个重要领域&#xff0c;旨在通过计算机对人类语言进行理解、生成和分析。随着深度学习和大数据技术的发展&#xff0c;机器学习在自然语言处理中的应用越来越广泛&#xff0c;从文本分类、情感分析到机器翻译和…

「ETL趋势」分区支持PostgreSQL、Greenplum、Gauss200, 定时任务支持Kettle

FineDataLink作为一款市场上的顶尖ETL工具&#xff0c;集实时数据同步、ELT/ETL数据处理、数据服务和系统管理于一体的数据集成工具&#xff0c;进行了新的维护迭代。本文把FDL4.1.9最新功能作了介绍&#xff0c;方便大家对比&#xff1a;&#xff08;产品更新详情&#xff1a;…

tobias实现支付宝支付

tobias是一个为支付宝支付SDK做的Flutter插件。 如何使用 你需要在pubspec.yaml中配置url_scheme。url_scheme是一个独特的字符串&#xff0c;用来重新启动你的app&#xff0c;但是请注意字符串“_”是不合法的。 在iOS端&#xff0c;你还需要配置并传入一个universal link。…

PCL 点云压缩算法-Octree空间分割算法

点云压缩 一、概述1.1 算法概念1.2 算法描述1.3 参数解释二、代码实现三、结果示例🙋 效果展示 一、概述 1.1 算法概念 Octree点云压缩算法:是一种用于表示三维空间中的点云数据结构。它将空间划分为一个八叉树,每个节点可以有最多八个子节点,代表了一个正方形的子空间…

jenkins学习

一、jenkins介绍 1.介绍 Jenkins 是一款流行的开源持续集成&#xff08;Continuous Integration&#xff09;工具&#xff0c;广泛用于项目开发&#xff0c;具有自动化构建、测试和部署等功能 2.特点 开源的Java语言开发持续集成工具&#xff0c;支持持续集成&#xff0c;持…

逻辑这回事(八)---- 时钟与复位

时钟设计总结 时钟和复位是FPGA设计的基础&#xff0c;本章总结了一些逻辑时钟复位设计、使用中出现的问题&#xff0c;给出了设计要点&#xff0c;避免后续问题重犯。时钟和复位&#xff0c;本文都先从板级谈起&#xff0c;再到FPGA芯片级&#xff0c;最后到模块级别。仅在此…

Docker-文件分层与数据卷挂载详解(附案例)

文章目录 文件分层数据卷挂载的含义数据卷挂载实践数据卷挂载案例数据卷挂载方式数据卷常用命令容器间数据共享 更多相关内容可查看 文件分层 例&#xff1a;拉取mysql5.7的镜像&#xff0c;在继续拉取mysql5.8的镜像&#xff0c;会出现一部分文件已存在的现象 这种分层技术 是…

昇思MindSpore学习笔记4-04生成式--GAN图像生成

摘要&#xff1a; 记录昇思MindSpore AI框架使用GAN生成式对抗网络模型生成图像的原理和实际使用方法、步骤。包括环境准备、数据集下载、数据加载、隐码、构建生成器与判别器、模型训练、模型推理等。 一、概念 GAN生成式对抗网络模型 (Generative Adversarial Networks) …

停车场小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;车主管理&#xff0c;商家管理&#xff0c;停车场信息管理&#xff0c;预约停车管理&#xff0c;商场收费管理&#xff0c;留言板管理 微信端账号功能包括&#xff1a;系统首页&#xff0c;停车场信息…

IDEA创建Spring项目无法使用Java8的解决方案

文章目录 一&#xff0c;创建Project&#xff0c;无法选择Java81&#xff0c;无法选择Java82&#xff0c;选择JDK17报错 二&#xff0c;原因分析1&#xff0c;Spring Boot将来会全力支持Java17&#xff0c;不再维护支持Java8的版本 三&#xff0c;解决方案1&#xff0c;使用国内…

AndroidKille更新apktool插件-cnblog

AndroidKiller不更新插件容易报错 apktool插件更新 网址 Releases iBotPeaches/Apktool (github.com) 找到apktool管理器 填入apktool位置&#xff0c;并输入apktool名字 选择默认的apktool版本 x掉&#xff0c;退出重启 可以看到反编译完成了 dex2jar 更新 网址 Release…

数据库系统原理 | 查询作业1

整理自博主本科《数据库系统原理》专业课自己完成的实验课查询作业&#xff0c;以便各位学习数据库系统概论的小伙伴们参考、学习。 *文中若存在书写不合理的地方&#xff0c;欢迎各位斧正。 专业课本&#xff1a; ​ ———— 本次实验使用到的图形化工具&#xff1a;Heidisql…

Python酷库之旅-第三方库Pandas(006)

目录 一、用法精讲 10、pandas.DataFrame.to_excel函数 10-1、语法 10-2、参数 10-3、功能 10-4、返回值 10-5、说明 10-6、用法 10-6-1、数据准备 10-6-2、代码示例 10-6-3、结果输出 11、pandas.ExcelFile类 11-1、语法 11-2、参数 11-3、功能 11-4、返回值 …

模型驱动开发(Model-Driven Development,MDD):提高软件开发效率与一致性的利器

目录 前言1. 模型驱动开发的原理1.1 什么是模型驱动开发1.2 MDD的核心思想 2. 模型驱动开发的优势2.1 提高开发效率2.2 确保代码一致性2.3 促进沟通和协作2.4 方便维护和扩展 3. 实现模型驱动开发的方法3.1 选择合适的建模工具3.1.1 UML3.1.2 BPMN3.1.3 SysML 3.2 建模方法3.2.…

SQL注入基础入门

文章目录 前言SQL注入基本操作SQL注入类型分类数字型字符型搜索型xx型Json型数据类型提交的方式 SQL注入的位置分类报错注入报错注入实战案例 SQL注入语句分类insert注入update注入delete注入 编码Tips&#xff1a;Mysql版本区别information_schema数据库详解 其他注入手段宽字…