<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="../js/vue.js"></script>
<style>
*{
margin-top: 20px;
}
.dem{
height: 50px;
background-color: blueviolet
}
.box1{
padding: 5px;
background-color: cadetblue
}
.box2{
padding: 5px;
background-color: orangered
}
.list{
width: 200px;
height: 200px;
background-color: springgreen;
overflow: auto;
}
li{
height: 100px;
}
</style>
<title>事件修饰符</title>
</head>
<body>
<!-- vue中的事件修饰符
1.prevent:阻止默认事件；
2.stop:阻止冒泡事件
3.once:事件只触发一次
4.capture:使用事件的捕获模式
5.self:只有event.target是当前操作的元素时才触发的事件
6.passsive:事件默认立即执行，无需等待事件回调完成
-->
<div id="root">
<h1>你好 {{name}}</h1>
<!-- 1.prevent:阻止默认事件；-->
<a href="https://www.baidu.com/" @click.prevent="shouwInfo">点我提示信息</a>
<!--2.stop:阻止冒泡事件 -->
<div class="dem" @click="shouwInfo">
<button @click.stop="shouwInfo">点我提示</button>
</div>
<!-- 3.once:事件只触发一次 -->
<button @click.once="shouwInfo">点我提示</button>
<!-- 4.capture:使用事件的捕获模式-->
<div class="box1" @click.capture="showMessage(1)">
div1
<div class="box2" @click.capture="showMessage(2)">
div2
</div>
</div>
<!-- 5.self:只有event.target是当前操作的元素时才触发的事件 -->
<div class="dem" @click.self="shouwInfo">
<button @click="shouwInfo">点我提示</button>
</div>
<!-- 6.passsive:事件默认立即执行，无需等待事件回调完成 手机等移动端用的较多 -->
<ul @wheel="demo.passsive" class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script>
const vm=new Vue({
el:"#root",
data:{
name:"xiao bai"
},
methods:{
shouwInfo(){
alert("你好呀")
},
showMessage(num){
console.log(num)
},
demo(){
for (let i = 0; i < 10000; i++) {
console.log("#");
}
alert("累了");
}
}
})
</script>
</body>
</html>
