Vue中事件绑定使用= v-on指令，指令后可跟事件修饰符，Vue提供以下修饰符：
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left- 只当点击鼠标左键时触发。
.right - 只当点击鼠标右键时触发。
.middle - 只当点击鼠标中键时触发。
.passive - 以 { passive: true } 模式添加侦听器

修饰符使用方法，如：

<button @click.stop="doThis"></button>

修饰符还可以串联使用，如：

<button @click.stop.prevent="doThis"></button>

下文将具体描述部分修饰符使用方法

.stop

.stop用来防止冒泡，我们先来看看冒泡的场景

 <div id="app"><div @click="onDivClick"><input type="button" value="点击" @click="onButtonClick"></div></div><script>var vm = new Vue({el:"#app",data: { },methods: {onDivClick() {console.log('这是触发了 DIV 的点击事件')},onButtonClick() {console.log('这是触发了 BUTTON按钮 的点击事件')}}})</script>

页面操作效果：

从上图中，我们发现点击按钮的时候不仅触发了按钮本身绑定的方法，其父级(DIV)绑定的方法也触发了。
如果不想让实践冒泡，那么我们可以使用修饰符 .stop来解决这个问题，具体如下：

<div id="app"><div @click="onDivClick"><input type="button" value="点击" @click.stop="onButtonClick"></div></div>

.prevent

<a href="http://www.baidu.com" @click="onAClick">点击我跳转到百度</a><script>methods: {onAClick() {console.log('点击了连接')}}</script>

见上面代码，点击连接之后页面跳转到百度首页。如果不希望点击跳转到百度，那么久需要组织 a标签点击的默认事件，这时可使用修饰符 .prevent

<a href="http://www.baidu.com" @click.prevent="onAClick">点击我跳转到百度</a>

.capture

实现捕获触发事件的机制,即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。
就是谁有该事件修饰符，就先触发谁。

 <div id="app"><div @click="onDivClick"><input type="button" value="点击" @click="onButtonClick"></div></div><script>var vm = new Vue({el:"#app",data: { },methods: {onDivClick() {console.log('这是触发了 DIV 的点击事件')},onButtonClick() {console.log('这是触发了 BUTTON按钮 的点击事件')}}})</script>

运行效果见上面.stop示例图片。代码做以下调整：

<div id="app"><div @click.capture="onDivClick"><input type="button" value="点击" @click="onButtonClick"></div></div>

由上图，我们发现是先触发DIV绑定的方法，然后再触发按钮绑定的方法。

.stop 和 .self 的区别

.stop会阻止事件冒泡，而.self只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡的行为

参考资料：
https://cn.vuejs.org/v2/api/#v-on

新手干货：Vue - 事件修饰符相关推荐

vue事件修饰符有哪些
vue 事件修饰符 1.prevent:阻止默认事件 2.stop:阻止事件冒泡 3.once:事件只触发一次 4.capture:使用事件的捕捉模式 5.self:只有event.target是当前 ...
Vue 事件修饰符详解
本人后端程序员,由于绑页面需要使用vue,在自学的过程中不懂事件修饰符,特此请教后才理解,在这提出我的分享,忘各位大神指正. vue官网上指出: 在事件处理程序中调用 event.preventDef ...
vue学习：事件传递（冒泡和捕获），事件委托，jquery中的事件委托，$event 获取元素，vue事件修饰符
事件传递 ----冒泡和捕获 DOM事件标准定义了两种事件流,这两种事件流分别是捕获和冒泡. 和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们.Netscape选 ...
Vue事件修饰符的总结
分为六点: 1.prevent 阻止默认行为(常用) 2.stop 阻止事件冒泡(常用) 3.once 事件值触发一次(常用) ...
vue事件修饰符，六次实操带你快速了解与应用~
一.速识概念: 你好呀,最近过的怎么样?今天总结了vue常见的事件修饰符,学习面试都是常遇到的,快来看看吧~
Vue事件修饰符（prevent，stop，once，capture，self）
1.Vue的事件修饰符: 1.prevent 阻止默认事件(常用) 2.stop:阻止默认冒泡(常用) 3.once:事件只触发一次(常用) 4.capture:使用事件的捕获模式 5.self:只有 ...
vue 事件修饰符与按键修饰符
事件修饰符在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求.尽管我们可以在方法中轻松实现这点,但更好的方式是: ...
Vue2.0学习笔记：Vue事件修饰符的使用
事件处理如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间 ...
Vue事件修饰符的使用
事件处理如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间 ...
vue 事件修饰符按键修饰符
事件修饰符在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求. .stop 阻止单击事件传播即阻止了事件冒泡, ...

新手干货：Vue - 事件修饰符

.stop

.prevent

.capture

.stop 和 .self 的区别

新手干货：Vue - 事件修饰符相关推荐

最新文章

热门文章