vue-day9--事件修饰符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script type="text/javascript" src="../js/vue.js"></script>
<style>
* {
margin-top: 20px;
}
.demo1 {
height: 50px;
background-color: blueviolet;
}
.box1 {
height: 50px;
background-color: blueviolet;
}
.box2 {
height: 50xp;
background-color: orange;
}
.list {
width: 200px;
height: 200px;
background-color: purple;
overflow: auto;
}
li {
height: 100px;
}
</style>
</head>
<body>
<div id="root">
<div>欢迎来带{{name}}学习</div>
<!--
vue 中的常用的修饰符
1.prevent 阻止默认事件 常用
2.stop 阻止事件冒泡 常用
3.once 使事件触发一次 常用
4.capture 使用事件的捕获模式
5.self 只有event.target 是当前操作的元素时才触发事件
6.passive 事件的默认行为为立即自行 无需等待事件回调执行完毕
8.事件修饰符可以连写。 @click.stop.prevent
-->
<a href="http://www.atguigu.com" @click.prevent="showinfo1"
>点我提示信息</a
>
<!--阻止事件冒泡-->
<div class="demo1" @click="showinfo1">
<a @click.stop="showinfo1">点我提示信息</a>
</div>
<!--事件只是触发一次-->
<button @click.once="showinfo1">点我提示信息</button>
<!--使用事件捕获方式-->
<div class="box1" @click.capture="showmsg(1)">
div1
<div class="box2" @click="showmsg(2)">div2</div>
</div>
<!--只有event.target 是当前操作的元素时才触发事-->
<div class="demo1" @click.self="showinfo1">
<button @click="showinfo1">点我提示信息</button>
</div>
<!--事件的默认行为为立即自行 无需等待事件回调执行完毕 wheel鼠标滚轮的 scroll滚动条的滚动-->
<ul @wheel.passive="demo" class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el: "#root",
data: {
name: "尚硅谷",
},
methods: {
showinfo1(event) {
//event.preventDefault();
//event.stopPropagation();
//alert("nihaoya");
console.log(event.target);
},
showmsg(n) {
alert(n);
},
demo() {
for (var i = 0; i < 10000; i++) {
console.log("#");
}
},
},
});
</script>
</html>
