Vue中常用事件修饰符

最新推荐文章于 2024-09-16 19:05:20 发布
原创 最新推荐文章于 2024-09-16 19:05:20 发布 · 2.3k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

本文介绍了Vue.js中click事件的六个修饰符：stop阻止冒泡，prevent阻止默认行为，self绑定自身，once触发一次，passive优化滚动事件流畅度，capture优先执行。了解这些修饰符有助于更精细地控制组件间的交互和事件传递。

①.stop:阻止冒泡
        --对于嵌套的两级,如果子父级元素都存在click事件,点击子级元素会触发父级元素的事件;如果子级元素设置@click.stop的话就不会触发父级的click事件
②.prevent:阻止默认行为
        --对于如<a href="www.baidu.com" @click.prevent="linkMethod">百度</a>自带事件的,添加prevent事件后,href跳转路径将不会触发
③.self:仅绑定元素自身触发,防止事件冒泡
        --对于嵌套的两级,如果子父级元素都存在click事件,点击子级元素会触发父级元素的事件;如果父级元素设置@click.self的话就不会被子级元素的click事件影响
④.once: 事件只触发一次(常用表单提交)
⑤.passive: 滚动事件的默认行为 (即滚动行为) 将会立即触发,不能和.prevent 一起使用,浏览器内核线程在每个事件执行时查询prevent,造成卡顿,使用passive将会跳过内核线程查询,进而提升流畅度
⑥.capture: 对于冒泡事件,且存在多个冒泡事件时,存在该修饰符的会优先执行,如果有多个,则从外到内执行
⑦.native: 将vue组件转换为一个普通的HTML标签,如果该修饰符用在普通html标签上是不起任何作用的

14.Vue的事件修饰符
爱米酱的博客
04-15 1040
今天这一节，我们来讲讲Vue中的事件修饰符。下面我们用一个小例子来引入它。 1.Vue事件修饰符小例子 我们都知道一个a标签既有跳转链接，又有点击事件的时候，它会先执行点击事件，然后再跳转链接。就像下面这样 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edg
vue中的事件修饰符
C20000407的博客
07-27 1128
vue中的事件修饰符 1.prevent：阻止默认事件（常用） <a href="http://www.baidu.com" @click.prevent="showinfo"></a> 2.stop：阻止事件冒泡（常用） *{ margin-top: 20px; } .demo1{ height: 50px; background-color: skyblue; } <div class="demo1" @click="showInfo"> <butto
Vue 事件修饰符汇总
克里斯蒂亚诺更新的博客
04-12 890
Vue 提供了一些事件修饰符，用于在处理 DOM 事件时提供额外的控制或功能。：阻止事件冒泡。（内有外无）：阻止事件默认行为。（阻止事件）：事件将在捕获阶段触发。（先外后内）：只当事件在该元素本身触发时触发回调。：事件将只触发一次。：告诉浏览器不要等待完成。：监听组件根元素的原生事件。：只当点击鼠标左键时触发。：只当点击鼠标右键时触发。：只当点击鼠标中键时触发。：精确匹配监听的按键，而不是包含它们的修饰符组合。：只触发一次。：滚动事件的默认行为（即滚动行为）将会立即触发。---
『VUE』10. 事件修饰符（详细图文注释）
MZH
04-04 3144
『VUE』10. 事件修饰符（详细图文注释）
Vue常见的事件修饰符
见证自己学习,成长的记录
03-08 4861
vue一共给我们准备了6个事件修饰符，前三个比较常用，后三个少见，这里着重讲下前三个1.prevent:阻止默认事件(常用)2. stop:阻止事件冒泡(常用)3. once:事件只触发一次(常用)4.captrue:使用事件的捕捉模式(不常用)5.self:只有event.target是当前操作的元素时才触发事件(不常用)6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕(不常用)个人感觉，了解常见的这些时间修饰符就够用了，不常见的了解即可。用到的时候再搜索相关资料。
Vue.js 事件修饰符的使用教程
10-17
下面详细说明Vue.js中事件修饰符的使用以及相关知识点。 首先，我们需要了解什么是事件修饰符。在Vue.js中，事件修饰符是一种特殊的指令后缀，它们以点号表示，用来直接作用于事件监听器。使用事件修饰符可以让我们...
聊聊vue中的修饰符，常用事件修饰符【总结】
m0_60150712的博客
08-02 565
本篇文章会带大家聊一聊vue指令中的修饰符，对比vue中的指令修饰符和dom事件中的event对象，介绍一下常用的事件修饰符，希望对大家有所帮助！
Vue实战指南：Vue常用九个事件修饰符
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-16 1962
修饰符的存在使得我们在处理 DOM 事件时更加灵活，可以轻松地控制事件的传播和默认行为，减少了手动编写处理函数的工作量。此外，在处理复杂的事件逻辑时，可以考虑将多个修饰符组合使用，以达到更加精细的控制。在这个例子中，点击按钮只会触发按钮自身的点击事件处理函数，而不会触发外层 div 的点击事件处理函数。在这个例子中，点击按钮只会触发按钮自身的点击事件处理函数，而不会触发外层 div 的点击事件处理函数。修饰符来防止表单的默认提交行为，而在需要监听键盘事件时，则可以利用按键修饰符来简化逻辑。
Vue 按键修饰符处理事件的方法
08-27
Vue 按键修饰符是 Vue 框架中的一种特殊处理事件的方法，它允许开发者轻松地处理键盘事件，无需关心 keyCode 的值。 Vue 按键修饰符主要分为两大类：按键别名和系统修饰键。 按键别名是 Vue 为常用的按键提供的...
VUE的6种事件修饰符
godkzz的博客
08-13 5883
一、修饰符 1、prevent：阻止默认事件（常用） 2、stop：阻止事件冒泡（常用） 3、once：事件只触发一次（常用） 4、capture：使用事件的捕获模式 5、self：只有event.target是当前操作的元素才触发事件 6、passive：事件的默认行为立即执行，无需等待事件回避执行完毕 二、用法 以prevent举例，点击A链接不会跳转页面 <div id="root"> <a href="www.baidu.com" @click.preven
vue基础15（vue的修饰符）
weixin_30691871的博客
05-23 214
修饰符 .lazy 在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步 。你可以添加lazy修饰符，从而转变为使用change事件进行同步： <!-- 在“change”时而非“input”时更新 --> <input v-model.lazy="msg" > .number 如果想自动将用户的输入值转为...
vue中的事件修饰符有哪些
weixin_55808645的博客
04-16 555
1. 事件绑定 我们通过 v-on/@:(+事件名).(+事件修饰符)=“函数事件名(参数可传/不传)” <p @click.stop="cookie"></p> <p v-on:click.stop="cookie($event,1)"></p> 2. 事件修饰符 事件 事件执行描述 .stop 阻止事件冒泡 .prevent 阻止浏览器默认事件 .capture 事件捕获 .once 事件只触发一次 .self 只执行自
VUE事件修饰符
danielyulu的博客
05-25 1791
对事件添加一些通用的限制，比如阻止事件冒泡，Vue 对这种事件的限制提供了特定的写法，称之为修饰符 用法：v-on:事件.修饰符 &lt;!--阻止事件冒泡.stop--&gt; &lt;div id="div1" class="stop" @click.stop="event1(1)"&gt; &lt;!--使用事件捕获模式.capture--&gt; &lt;
Vue基础知识之常用属性和事件修饰符（二）
weixin_30711917的博客
06-18 152
Vue中的常用选项 1、计算属性 computed为可以计算的属性,由get方法和set方法组成,默认调用的是get方法。里面的 计算属性简单来说，就是根据数据推算出来的值，当给这个值赋值时可以影响其他值的变化。 <div id="app"> 全选：<input type="checkbox" v‐model="checkAll" > <br&gt...
vue(事件处理：v-on)
热门推荐
qq_42238554的博客
01-22 2万+
注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。
Vue常见事件修饰符
qq_42975998的博客
03-07 250
.stop：当事件触发时，阻止事件冒泡 .prevent：当事件触发时，阻止元素默认行为 .capture：当事件触发时，阻止事件捕获 .self：限制事件仅作用于节点自身 .once：事件被触发一次后解除监听 .passive：作用于移动端滚动事件，限制事件永不调用preventDefault方法 .native：给自定义组件绑定原生事件 ...
Vue修饰符
Yannnnnm的博客
01-11 1663
一、修饰符是什么 在程序世界里，修饰符是用于限定类型以及类型成员的声明的一种符号 在Vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理 二、修饰符包含哪些 vue中修饰符分为以下五种： 表单修饰符 事件修饰符 鼠标按键修饰符 键值修饰符 v-bind修饰符 三、修饰符的作用 表单修饰符 在我们填写表单的时候用得最多的是input标签，指令用得最多的是v-model 关于表单的修饰符有如下： lazy .
vue 常见的事件修饰符及其作用
Future1994的博客
09-13 1172
常见的事件修饰符及其作用 .stop：等同于 JavaScript 中的 event.stopPropagation() ，防止事件冒泡； .prevent：等同于 JavaScript 中的 event.preventDefault() ，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）； .capture：当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。如 div1中嵌套div2中嵌套div3.capture中嵌套div4，那么执行顺序..
vue常用的事件修饰符
最新发布
07-10
<think>我们正在讨论Vue的事件修饰符。事件修饰符是Vue为v-on指令提供的特殊后缀，用于处理DOM事件细节。 常用的事件修饰符包括： .stop - 调用 event.stopPropagation()，阻止事件冒泡 .prevent - 调用 event.preventDefault()，阻止默认行为 .capture - 添加事件侦听器时使用 capture 模式（即事件捕获阶段处理） .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调（即事件源是自身才触发） .once - 只触发一次回调 .passive - 以 { passive: true } 模式添加侦听器，提升移动端性能（尤其滚动性能） 此外，还有按键修饰符（如 .enter, .tab, .delete, .esc, .space, .up, .down, .left, .right）和系统修饰键（如 .ctrl, .alt, .shift, .meta）等。 下面我们将详细说明这些事件修饰符的用法和场景。</think>### Vue 常用事件修饰符详解 事件修饰符是 Vue 为 `v-on` 指令提供的特殊后缀，用于简化常见 DOM 事件处理逻辑。以下是核心修饰符及其应用场景： --- #### **基础事件修饰符** 1. **`.stop`** - 阻止事件冒泡 ```html <button @click.stop="handleClick">点击不会向上冒泡</button> ``` 2. **`.prevent`** - 阻止默认行为 ```html <form @submit.prevent="onSubmit">阻止表单默认提交</form> ``` 3. **`.capture`** - 使用捕获模式（从外向内触发） ```html <div @click.capture="outer">外层先触发</div> ``` 4. **`.self`** - 仅当事件源是元素自身时触发（忽略子元素冒泡） ```html <div @click.self="onlySelf">子元素点击不会触发</div> ``` 5. **`.once`** - 事件只触发一次 ```html <button @click.once="oneTime">仅生效一次</button> ``` 6. **`.passive`** - 提升滚动性能（不阻塞主线程） ```html <div @scroll.passive="onScroll">移动端优化</div> ``` --- #### **按键修饰符** 7. **系统按键** ```html <!-- 组合键 --> <input @keyup.ctrl.enter="submit"> <!-- 精确按键 --> <input @keyup.exact.esc="close"> ``` 8. **常用按键别名** | 修饰符 | 对应按键 | |--------------|----------------------| | `.enter` | Enter 回车键 | | `.tab` | Tab 键 | | `.delete` | Delete / Backspace | | `.esc` | Esc 键 | | `.space` | 空格键 | | `.up`/`.down`| 上下方向键 | --- #### **鼠标修饰符** 9. **鼠标按键限定** ```html <div @click.middle="middleClick">中键点击</div> <div @click.right.prevent>禁用右键菜单</div> <!-- 其他：.left, .right, .middle --> ``` --- ### 修饰符链式调用 可串联使用多个修饰符： ```html <!-- 阻止冒泡 + 阻止默认行为 + 只触发一次 --> <a @click.stop.prevent.once="doSomething">链接</a> ``` --- ### 性能与场景对比 | 修饰符 | 典型场景 | 注意事项 | |--------------|--------------------------|--------------------------| | `.passive` | 移动端滚动事件 | 不能与 `.prevent` 共用 | | `.exact` | 精确控制系统修饰键组合 | 需 Vue 2.5+ | | `.once` | 一次性操作（如表单提交） | 解绑后不影响手动触发 | ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值