Vue2.0中的事件修饰符： 1.prevent:阻止默认事件，原生js里面为event.preventDefault() 2.stop:阻止事件冒泡 3.once:事件只触发一次 4.capture:使用事件的捕获模式:事件分为捕获阶段和冒泡阶段，事件捕获阶段事件执行顺序是有外向内，就是父向子，冒泡阶段事件执行时由内向外，子向父 5.self:只有event.target是当前操作元素是才触发事件 6.passsive:事件的默认行为立即执行，无需等待事件回调执行完毕 7.native:把Vue的事件当做原生事件使用,用修饰符native
<div id='root'>
<!--1.prevent阻止a标签在点击时跳转页面-->
<a href="https://www.jianshu.com/" @click.prevent="showInfo($event)">点击信息</a>
<!--2.stop阻止事件冒泡-->
<div class="demo" @click="showInfo">
<button @click.stop="showInfo">阻止事件冒泡</button>
</div>
<!--补充:如果既要阻止冒泡又要阻止默认事件连续写-->
<div class="demo" @click="showInfo">
<a href="https://www.jianshu.com/" @click.stop.prevent="showInfo">点击信息</a>
</div>
<!--3.事件只触发一次-->
<button @click.once="showInfo">我只触发一次</button>
<!--4.事件铺获capture-->
<!--在不加capture时点击showInfo1(2)会打印出的顺序为2,1 正常的冒泡阶段执行-->
<!--加capture时点击事件会在捕获阶段触发则，打印出来的为1,2-->
<div class="one" @click.capture="showInfo1(1)">
<div class="two" @click="showInfo1(2)"></div>
</div>
<!--5.self :event.target当前点击的元素:也可以用来阻止冒泡-->
<div class="demo" @click.self="showInfo">
<button @click="showInfo">event.target当前点击的元素</button>
</div>
<!--5.passsive -->
<!--@scroll滚动条的滚动-->
<!--@wheel鼠标滚轮滚动 @wheel.passsive可以不用等1万个字打印完在执行滚动条-->
<uL class="list" @wheel.passsive="scroll">
<li>1</li>
<li>3</li>
<li>3</li>
<li>3</li>
</uL>
</div>
<script>
const vm = new Vue({
el: '#root',
data: {
},
methods: {
showInfo() {
alert("ah")
},
showInfo1(a) {
console.log(a)
},
scroll() {
//在触发滚轮事件时，控制台打印完这个1万数字完成后，才滚动滚动条，
//中间有一个时间段，用了passsive无需等待滚动条先滚动在执行那1万个字
for (let index = 0; index < 10000; index++) {
console.log(index)
}
},
}
})
</script>
