Vue中的事件修饰符：
1. prevent：阻止默认事件（常用）；
2. stop：阻止事件冒泡（常用)；
3. once：事件只触发一次（常用）；
4. capture：使用事件的捕获模式；
5. self：只有event.target是当前操作的元素是才触发事件；
6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
一般会先执行响应事件，响应事件结束后回调执行默认事件。但工作量较大会有卡顿问题，可用passive解决。移动端用得多。
（scroll指的是滚动条滚动，键盘上下、鼠标滚轮均可触发，按照滚动条的位移距离多次触发。
wheel指的是鼠标滚轮滚动，鼠标滚轮滚1次，事件触发1次。）
多个事件修饰符可以连续写，如：@click.prevent.stop
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件修饰符</title>
<script src="lib/vue-2.5.9.js"></script>
<style>
.box {
background-color: aquamarine;
width: 200px;
height: 40px;
margin: 10px;
}
.list {
width: 200px;
height: 200px;
background-color: rosybrown;
overflow: scroll;
}
li {
height: 100px;
width: 150px;
}
</style>
</head>
<body>
<div id="root">
<!-- 阻止默认事件 -->
<a href="https://www.baidu.com" @click.prevent="show_info">点我去百度</a>
<div class="box" id="demo0" @click="show_log(0)">
<!-- 阻止事件冒泡 -->
<button id="demo1" @click.stop="show_log(1)"> 点我打印stop</button>
<!-- 只触发一次 -->
<button id="demo2" @click.once="show_log(2)"> 点我打印once</button>
</div>
<!-- 多个事件修饰符可以连续写。有先后顺序，一般影响不大 -->
<div class="box" id="demo0" @click="show_log(0)">
<a href="https://www.baidu.com" @click.prevent.stop="show_info(1)">点我去百度</a>
</div>
<!-- 事件捕获，先获取再冒泡 -->
<div class="box" id="demoo0" @click.capture="show_log(0)">
<button id="demoo1" @click="show_log(1)">事件捕获capture</button>
</div>
<!-- 只有event.target是当前操作的元素是才触发事件（也可以阻止冒泡） -->
<div class="box" id="demoo0" @click.self="show_log(0)">
<button id="demoo1" @click="show_log(1)">self</button>
</div>
<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕 -->
<!-- 一般会先执行响应事件，响应事件结束后回调执行默认事件。但工作量较大会有卡顿问题，可用passive解决。移动端用得多。 -->
<!-- scroll指的是滚动条滚动，键盘上下、鼠标滚轮均可触发，按照滚动条的位移距离多次触发 -->
<!-- wheel指的是鼠标滚轮滚动，鼠标滚轮滚1次，事件触发1次 -->
<!-- <ul class="list" @scroll="gun"> -->
<ul class="list" @wheel="gun">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
<script>
let vm = new Vue({
el: '#root',
data: {
name: 'mingzi',
},
methods: {
show_info: function () {
alert('被骗了！！')
},
show_log: function (info) {
console.log('我是日志，来自-->', info)
},
gun: function () {
for (var i = 0; i < 10000; i++) {
console.log('在滚了在滚了')
}
console.log('啊~~ 累坏了 QAQ')
}
}
})
</script>
</html>
标签：触发,Vue,console,log,修饰符,事件 From： https://www.cnblogs.com/ximu1009/p/17770277.html