vue修饰符的使用

news/2024/11/2 0:36:08/

事件修饰符:

在处理事件时调用 event.preventDefault() 或 event.stopPropagation() 是很常见的。尽管我们可以直接在方法内调用,但如果方法能更专注于数据逻辑而不用去处理 DOM 事件的细节会更好。

为解决这一问题,Vue 为 v-on 提供了事件修饰符。修饰符是用 . 表示的指令后缀,包含以下这些:

<!-- 单击事件将停止传递 -->
<a @click.stop="doThis"></a><!-- 提交事件将不再重新加载页面,阻止默认事件 -->
<form @submit.prevent="onSubmit"></form><!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a><!-- 也可以只有修饰符 -->
<form @submit.prevent></form><!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
<!-- 例如:事件处理器不来自子元素 -->
<div @click.self="doThat">...</div>

使用修饰符时需要注意调用顺序,因为相关代码是以相同的顺序生成的。因此使用 @click.prevent.self 会阻止元素及其子元素的所有点击事件的默认行为,而 @click.self.prevent 则只会阻止对元素本身的点击事件的默认行为。

<!-- 添加事件监听器时,使用 `capture` 捕获模式 -->
<!-- 例如:指向内部元素的事件,在被内部元素处理前,先被外部处理,能够改变冒泡事件的触发顺序 -->
<div @click.capture="doThis">...</div><!-- 点击事件最多被触发一次 -->
<a @click.once="doThis"></a><!-- 滚动事件的默认行为 (scrolling) 将立即发生而非等待 `onScroll` 完成 -->
<!-- 以防其中包含 `event.preventDefault()` -->
<div @scroll.passive="onScroll">...</div>

按键修饰符:

在监听键盘事件时,我们经常需要检查特定的按键。Vue 允许在 v-on 或 @ 监听按键事件时添加按键修饰符。

<!-- 仅在 `key` 为 `Enter` 时调用 `submit` -->
<input @keyup.enter="submit" />

你可以直接使用 KeyboardEvent.key (可跳转查看)暴露的按键名称作为修饰符,但需要转为 kebab-case 形式。

<input @keyup.page-down="onPageDown" />

Vue 为一些常用的按键提供了别名:

.enter .tab .delete (捕获“Delete”和“Backspace”两个按键) .esc .space .up .down .left .right


系统按键修饰符

你可以使用以下系统按键修饰符来触发鼠标或键盘事件监听器,只有当按键被按下时才会触发。

.ctrl .alt .shift .meta

在 Mac 键盘上,meta 是 Command 键 (⌘)。在 Windows 键盘上,meta 键是 Windows 键 (⊞)。在 Sun 微机系统键盘上,meta 是钻石键 (◆)。在某些键盘上,特别是 MIT 和 Lisp 机器的键盘及其后代版本的键盘,如 Knight 键盘,space-cadet 键盘,meta 都被标记为“META”。在 Symbolics 键盘上,meta 也被标识为“META”或“Meta”。

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" /><!-- Ctrl + 点击 -->
<div @click.ctrl="doSomething">Do something</div>

请注意,系统按键修饰符和常规按键不同。与 keyup 事件一起使用时,该按键必须在事件发出时处于按下状态。换句话说,keyup.ctrl 只会在你仍然按住 ctrl 但松开了另一个键时被触发。若你单独松开 ctrl 键将不会触发。


.exact 修饰符

.exact 修饰符允许控制触发一个事件所需的确定组合的系统按键修饰符。

<!-- 当按下 Ctrl 时,即使同时按下 Alt 或 Shift 也会触发 -->
<button @click.ctrl="onClick">A</button><!-- 仅当按下 Ctrl 且未按任何其他键时才会触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button><!-- 仅当没有按下任何系统按键时触发 -->
<button @click.exact="onClick">A</button>

鼠标按键修饰符

.left .right .middle 这些修饰符将处理程序限定为由特定鼠标按键触发的事件


http://www.ppmy.cn/news/60497.html

相关文章

uni-app获取手机号-获取用户地理位置-根据位置获取经纬度跳转高德

一.获取手机号 1.获取手机号首先要先登录拿到code&#xff0c;用code去获取session_key 2.获取 code需要知道自己的AppID(小程序ID)和AppSecret(小程序密钥) 3.解密后得到手机号 登录微信公众平台拿到自己的AppID(小程序ID)和AppSecret(小程序密钥) 微信公众平台 获取sessio…

各SQL引擎的SQL转换过程对比

SQL引擎 参考文档:高级语言的解析过程—解析树 从 MySQL、Oracle、TiDB、CK,到 Hive、HBase、Spark,从关系型数据库到大数据计算引擎,他们大都可以借助 SQL 引擎,实现 “接受一条 sql 语句然后返回查询结果” 的功能。 他们核心的执行逻辑都是一样的,大致可以通过下面…

Java 基础进阶篇(十)—— Java集合详细总结

文章目录 一、集合类体系结构二、Collection系列集合2.1 Collection 集合体系2.2 Collection 集合体系特点2.3 Collection 常用API2.4 Collection 集合的遍历方式2.4.1 方式一&#xff1a;迭代器2.4.2 方式二&#xff1a;foreach&#xff08;增强for循环&#xff09;2.4.3 方式…

Spring事务失效场景

&#xff08;1&#xff09;事务方法所在的类没有加载到容器中&#xff08;未被Spring管理的Bean&#xff09; 如果一个被注解的类不是由Spring容器来创建的&#xff0c;比如手动new对象&#xff0c;那么该类的事务注解则不会生效。可以通过将该类交给Spring容器来解决此问题。 …

【Java】BitSet的使用

BitSet和boolean[]为什么不用boolean[]BitSet相关的API为什么不用boolean[]? boolean[]占用的内存比较大。 以1024个位置为例。 boolean[1024]总共占用1040 bytes,包括对象头等大小。(对象头20bytes) boolean[] bits = new boolean[1024];使用BitSet(1024)的话,总共占用…

搭建Serv-U FTP服务器共享文件外网远程访问「无公网IP」

文章目录 1. 前言2. 本地FTP搭建2.1 Serv-U下载和安装2.2 Serv-U共享网页测试2.3 Cpolar下载和安装 3. 本地FTP发布3.1 Cpolar云端设置3.2 Cpolar本地设置 4. 公网访问测试5. 结语 转载自内网穿透工具的文章&#xff1a;使用Serv-U搭建FTP服务器并公网访问【内网穿透】 1. 前言…

Center-based 3D Object Detection and Tracking 论文学习

论文地址&#xff1a;Center-based 3D Object Detection and Tracking Github 地址&#xff1a;Center-based 3D Object Detection and Tracking 1. 解决了什么问题&#xff1f; 在点云中&#xff0c;3D 目标通常以 3D 框的形式表示。这个表征借鉴于 2D 图像的检测&#xff0…

C#学习教程大纲

以下是C#学习教程的大纲&#xff1a; 第一部分&#xff1a;基础知识 C#简介 什么是C#&#xff1f; C#的历史和发展 C#的特点和优势 开发环境的搭建 安装Visual Studio开发环境 配置开发环境 第一个C#程序 Hello World程序 程序的结构 编译和运行程序 数据类型和变…