vue中的事件修饰符：
1.prevent:阻止默认事件
2.stop:阻止事件冒泡
3.once:事件只触发一次
4.capture:使用事件的捕获模式
5.self:只有event.target是当前操作的元素时才触发事件
6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕
ps:vue中事件修饰符可以连着写，如：@click.stop.prevent阻止事件冒泡和默认事件，效果与@click.prevent.click相同
1.prevent：点击a链接时会执行alert事件，然后跳转到百度，prevent阻止跳转到百度的默认事件
<a href="http://www.baidu.com" @click="demo">阻止默认行为1</a>
<a href="http://www.baidu.com" @click.prevent="demo2">阻止默认行为2</a>
methods:{
demo(e){
e.preventDefault()//阻止默认行为
alert('同学，你好')
},
demo2(){
alert('同学，你好')
}
}
2.stop:点击button，其showmsg事件时会冒泡到父元素身上，父元素也会执行showmsg事件，stop阻止showmsg事件冒泡到父元素身上
<div @click="showmsg" style="width: 200px;height:200px;background-color:#ccc">
<button @click="showmsg">阻止冒泡事件1</button>
</div>
<div @click="showmsg2" style="width: 200px;height:200px;background-color:#ededed">
<button @click.stop="showmsg2">阻止冒泡事件2</button>
</div>
methods：{
showmsg(e) {
e.stopPropagation()
alert('同学你好')
},
showmsg2() {
alert('同学你好')
}
}
3.once:事件只触发一次，后面事件不再触发
<button @click.once="showmsg">事件只触发一次</button>
4.capture:事件分为捕获阶段和冒泡阶段，先捕获再冒泡，捕获阶段是由外到内的，冒泡阶段是由内到外的，假如没有阻止事件冒泡，应先输出2再输出1，capture则在捕获阶段处理事件，所以先输出1，再输出2
<div @click="showinfo(1)" style="width: 200px;height:200px;background-color:#ededed">
<div @click="showinfo(2)" style="height: 100px; width:100px;background-color:#ccc">捕获事件</div>
</div>
methods:{
showinfo(number) {
console.log(number)//2 1
}
}
<div @click.capture="showinfo(1)" style="width: 200px;height:200px;background-color:#ededed">
<div @click="showinfo(2)" style="height: 100px; width:100px;background-color:#ccc">捕获事件</div>
</div>
methods:{
showinfo(number) {
console.log(number)//1 2
}
}
5.self:e.target是当前操作元素时才触发,当div中的click事件使用.self修饰符时，点击button,由于e.target是button而不是当前div，所以没有触发div中的事件
<div @click="demo" style="width: 200px;height:200px;background-color:#ededed">
<button @click="demo" style="height: 100px; width:100px;background-color:#ccc">e.target</button>
</div>
methods:{
demo(e) {
console.log(e.target)//点击button时输出两次button代码，因为e.target是button
}
}
6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕。
scroll和wheel的区别：scroll是监听滚动条的滚动事件，鼠标滚轮和键盘上下键都可以触发，滚动条到底后再往下则不触发；whell监听的是鼠标滚轮的滚动事件，只要鼠标滚轮滚动就会触发事件。
<ul @wheel="demo" style="height:200px;width:200px;background-color:#ccc;overflow: auto;">
<li style="height: 100px;">1</li>
<li style="height: 100px;">2</li>
<li style="height: 100px;">3</li>
<li style="height: 100px;">4</li>
</ul>
methods:{
demo() {
for (i = 0; i < 100000; i++) {
console.log("xxx")
}
console.log("完成")
}
}
如果没加.passive修饰符，会先执行for循环，然后再滑动，加了以后不用等待for循环结束，直接滑动