友情提示:此篇文章大约需要阅读 6分钟5秒,不足之处请多指教,感谢您的阅读。 订阅本站
在事件处理程序中调用
event.preventDefault()
或event.stopPropagation()
是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。为了解决这个问题,Vue.js 为
Vue 事件修饰符v-on
提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。
.stop
阻止事件继续传播(阻止冒泡).prevent
阻止默认事件.capture
添加事件监听器时使用事件捕获模式.self
只点击当前元素才会被执行.once
只触发一次事件处理函数.passive
只有修饰符
.stop
阻止冒泡
<h1>.stop 阻止事件冒泡</h1>
<div class="inside" @click.stop="inside">
<input type="button" value="确定" @click.stop="button">
</div>
var vm = new Vue({
el : "#app",
methods: {
button(){
console.log("触发了点击 button 事件");
},
inside(){
console.log("触发了点击 inside 事件");
},
},
});

.prevent
阻止默认事件
<h1>.prevent 阻止默认事件</h1>
<p>点击链接的时候阻止跳转事件</p>
<a href="http://debuginn.cn" @click.prevent="clickLink">Debug客栈</a>
<br>
var vm = new Vue({
el : "#app",
methods: {
button(){
console.log("触发了点击 button 事件");
},
inside(){
console.log("触发了点击 inside 事件");
},
clickLink(){
console.log("触发了点击 链接点击 事件");
}
},
});

点击链接的时候阻止跳转事件。
.capture
添加事件监听器时使用事件捕获模式

.self
只点击当前元素才会被执行
点击那个元素,那个元素才有事件产生,父子元素互不影响。
<h1>.self 只点击当前元素才会被执行</h1>
<div class="outside" @click.self="outside">
<div class="inside" @click.self="inside">
<input type="button" value="确定" @click.self="button">
</div>
</div>
<br>
var vm = new Vue({
el : "#app",
methods: {
button(){
console.log("触发了点击 button 事件");
},
inside(){
console.log("触发了点击 inside 事件");
},
outside(){
console.log("触发了点击 outside 事件");
},
clickLink(){
console.log("触发了点击 链接点击 事件");
}
},
});
.once
只触发一次事件处理函数

第一次点击元素有事件产生,第二次点击就没有相对应事件的产生。
<h1>.once 只触发一次事件处理函数</h1>
<div class="outside" @click.once="outside">
<div class="inside" @click.once="inside">
<input type="button" value="确定" @click.once="button">
</div>
</div>
<br>
.passive
只有修饰符


点击元素后有事件产生之后发生跳转事件。
<h1>.passive 只有修饰符</h1>
<a href="http://debuginn.cn" @click.passive="clickLink">Debug客栈</a>
<br>
发表回复