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


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.mzph.cn/bicheng/41076.shtml

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

相关文章

【C#】ProgressBar进度条异步编程思想

1.控件介绍 进度条通常用于显示代码的执行进程进度&#xff0c;在一些复杂功能交互体验时告知用户进程还在继续。 在属性栏中&#xff0c;有三个值常用&#xff1a; Value表示当前值&#xff0c;Minimum表示进度条范围下限&#xff0c;Maximum表示进度条范围上限。 2.简单实…

简单的git pull fail Can‘t update has no tracked branch解决记录

简单的git pull fail Can‘t update has no tracked branch解决记录 1. 问题描述 上午同事使用idea拉取代码的时候&#xff0c;发现拉取不了&#xff0c;提示用户权限问题&#xff0c;之后修改了git用户信息&#xff0c;发现还是拉取不了分支代码&#xff0c;然后删除了git r…

对FPGA开发流程系统的学习

FPGA 开发流程&#xff1a; HDL&#xff08;Hardware Design Language&#xff09;和原理图是两种最常用的数字硬件电路描述方法&#xff0c;HDL 设计法具有更好的可移植性、通用性和模块划分与重用性的特点&#xff0c;在目前的工程设计中被广泛使用。所以&#xff0c;我们在…

WPF在.NET9中的重大更新:Windows 11 主题

在2023年的2月20日&#xff0c;在WPF的讨论区&#xff0c;WPF团队对路线的优先级发起了一次讨论。 对三个事项发起了投票。 第一个是Windows 11 主题 第二个是更新的控件 第三个是可空性注释 最终Windows 11 主题得票最高&#xff0c;WPF团队2023-2024的工作优先级就是Windows…

网安小贴士(8)IPv4与IPv6

一、前言 IPv4和IPv6都是互联网协议&#xff08;IP&#xff09;的版本&#xff0c;它们用于在互联网上标识和定位设备。 二、定义 IPv4&#xff08;互联网协议第四版&#xff09;&#xff1a; IPv4是互联网协议的第一个广泛使用的版本&#xff0c;最初在1981年被标准化为RFC 7…

交换数字00

题目链接 交换数字 题目描述 注意点 numbers.length 2-2147483647 < numbers[i] < 2147483647 解答思路 不适用临时变量&#xff0c;可以先将numbers[0]和numbers[1]的信息都存到某个位置&#xff08;可以相加可以相减或其他位操作&#xff09;&#xff0c;然后另一…

SpringBoot 通过Knife4j集成API文档 在线调试

介绍 Knife4j 是一款基于 Swagger 构建的增强型 API 文档生成工具&#xff0c;它提供了更多的定制化功能和界面优化&#xff0c;使得生成的 API 文档更加美观和易用。它可以帮助开发者快速生成和管理 API 文档&#xff0c;支持在线调试和交互。 依赖 <!--knife4j--> &…

期末C语言易错知识点整理

1.在定义多维数组时&#xff0c;除了最左边的维度&#xff0c;其余的维度必须明确指定大小 2.int m[1][4]{4}; 定义的是一个 1 行 4 列的二维数组&#xff0c;初始化时提供了一个元素 4&#xff0c;其余元素默认初始化为 0&#xff0c;因此是正确的。 3.二维数组 a[3][6] 中的索…

谷粒商城学习笔记-05-项目微服务划分图

文章目录 一&#xff0c;商城业务服务-前端服务二&#xff0c;商城业务服务-后端服务三&#xff0c;存储服务四&#xff0c;第三方服务五&#xff0c;服务治理六&#xff0c;日志七&#xff0c;监控预警系统1&#xff0c;Prometheus2&#xff0c;Grafana3&#xff0c;Prometheu…

科技助力农业——土壤化肥测试仪

在农业生产中&#xff0c;土壤养分是作物健康生长的关键因素。然而&#xff0c;如何科学、精准地评估土壤养分含量&#xff0c;指导农民合理施肥&#xff0c;一直是农业科研和技术人员努力的方向。近年来&#xff0c;随着科技的进步&#xff0c;土壤化肥测试仪作为一种新型农业…

clion远程开发

clion远程开发 简要概括&#xff1a; 建立 SFTP 通讯&#xff0c;创建远程目录与本地目录的映射文件夹&#xff0c;就可以把本机文件夹中的文件用鼠标右键选中上全传&#xff0c;打开自动同步功能&#xff0c;后面更改文件就可以自动同步文件了。 一.新建SFTP远程链接服务 …

Unity游戏帧率查看软件Fraps

Download Fraps 3.5.99 free version 下载、安装、运行这个软件&#xff0c;左上角就会自动显示帧率

Java面试八股之MYISAM和INNODB有哪些不同

MYISAM和INNODB有哪些不同 MyISAM和InnoDB是MySQL数据库中两种不同的存储引擎&#xff0c;它们在设计哲学、功能特性和性能表现上存在显著差异。以下是一些关键的不同点&#xff1a; 事务支持&#xff1a; MyISAM 不支持事务&#xff0c;没有回滚或崩溃恢复的能力。 InnoDB…

通义千问 Qwen2,登顶国内第一大模型!

大家好&#xff0c;我是煎鱼。 7 月 9 日起&#xff0c;OpenAI 将正式终止对部分地区&#xff08;包含中国&#xff09;提供 API 服务&#xff0c;引起业内一片哗然&#xff0c;纷纷开始自检&#xff0c;找新的国内可用的国产化替代方案。 此时我有一个朋友的 Boss&#xff0c;…

【论文阅读】LLM+3D (1)

文章目录 1. 【CoRL 2023】SayPlan: Grounding Large Language Models using 3D Scene Graphs for Scalable Robot Task Planning动机摘要和结论引言模型框架3.1 Problem Formulation3.2 Preliminaries 2. ShapeLLM: Universal 3D Object Understanding for Embodied Interacti…

leetcode 403周赛 包含所有1的最小矩形面积||「暴力」

3197. 包含所有 1 的最小矩形面积 II 题目描述&#xff1a; 给你一个二维 二进制 数组 grid。你需要找到 3 个 不重叠、面积 非零 、边在水平方向和竖直方向上的矩形&#xff0c;并且满足 grid 中所有的 1 都在这些矩形的内部。 返回这些矩形面积之和的 最小 可能值。 注意…

Node.js的下载、安装和配置

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

返回值处理器器【Spring源码学习】

定义返回值类型处理器的组合&#xff1b; public static HandlerMethodReturnValueHandlerComposite getReturnValueHandler(){HandlerMethodReturnValueHandlerComposite composite new HandlerMethodReturnValueHandlerComposite();// 处理ModelAndViewcomposite.addHandle…

Elasticsearch实战教程:如何使用集群索引数据来进行统计多个数据?

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 引入 Elasticsearch聚合查询是一种强大的工具&#xff0c;允许我们对索引中的数据进行复杂的统计分析和计算。本文将详细解释一…

CFS三层内网渗透——外网打点(一)

目录 外网打点 先爆破一下看看有没有啥可进攻路径 尝试那个可疑的路径发现是thinkphp这个框架&#xff0c;同时也知道了版本&#xff0c;那就nday打吧 写入php ​编辑写入php成功&#xff0c;简简单单nday拿下​编辑 蚁剑rce尝试链接 打点成功 外网打点 先爆破一下看看有…