Vue的事件修饰符可以用来处理DOM事件的行为。以下是Vue的事件修饰符
.stop: 阻止事件冒泡。例如：
<div @click.stop="doSomething"></div>
.prevent: 阻止事件的默认行为。例如：
<a href="#" @click.prevent="doSomething"></a>.capture: 使用事件捕获而不是事件冒泡。例如：
<div @click.capture="doSomething"></div>.self: 只有当事件是从当前元素本身触发时才触发处理函数，而不是从子元素冒泡上来的。例如：
<div @click.self="doSomething"></div>.once: 事件将只会触发一次。例如：
<button @click.once="doSomething"></button>.passive: 指示浏览器不应该阻止事件的默认行为，这可以提高性能。例如：
<div @touchmove.passive="doSomething"></div>注意：.passive只能与touchstart、touchmove和wheel事件一起使用。
代码说明
代码里结合了简单的Html表单进行举例说明，可以保存在本地用html打开并且打开控制台去做尝试。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件修饰符</title>
<script type="text/javascript" src="../js/vue.js"></script>
<style>
*{
margin-top: 20px;
}
.demo1{
height: 50px;
background-color: aqua;
}
.box1{
padding: 5px;
background-color: skyblue;
}
.box2{
padding: 5px;
background-color: orange;
}
.list{
width: 200px;
height: 150px;
background-color: peru;
overflow: auto;
}
</style>
</head>
<body>
<div id="root">
<h2>欢迎来到{
{name}}一起学习</h2>
<!-- 阻止默认事件-->
<a href="https://csdn.net" v-on:click.prevent="showInfo">click me</a>
<div class="demo1" v-on:click.capture="showInfo">
<!-- 阻止冒泡事件-->
<button v-on:click.stop="showInfo">click me 2</button>
</div>
<button v-on:click.once="showInfo">click me only show 1 time</button>
<!-- 使用事件捕获模式，先捕获在冒泡，效果先div1，在div2 -->
<div class="box1" v-on:click.capture="showMsg(1)">
div1
<div class="box2" v-on:click="showMsg(2)">
div2
</div>
</div>
<!--只有事件是从当前元素触发时才触发处理函数，而不是从子元素冒泡上来的。 -->
<div class="demo1" v-on:click.self="showInfo">
<button v-on:click="showInfo">click me 6</button>
</div>
<!-- 给ul绑定滚动事件-->
<ul v-on:wheel="demo" class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
<script>
Vue.config.productionTip = false // 阻止vue在启动时生成生产提示
new Vue({
el:'#root',
data:{
name:'csdn',
},
methods:{
showInfo(e){
// e.preventDefault()
alert('你好')
console.log(e.target)
},
showMsg(msg){
alert("hello world")
},
demo(e){
console.log('@')
for (let i = 0; i <200; i++) {
console.log('#')
}
console.log('打印结束')
}
}
})
</script>
</html>