1、prevent
---阻止事件的默认行为
2、stop
----阻止事件冒泡
3、once
---事件只能触发一次
4、capture
----使用事件捕获模式
5、self
----只有event.target(按钮中的mouseevent,点击按钮调函数时会默认传给你)是当前操作的元素才操作
6、passive
---事件的默认行为立即执行,无需等待事件回调执行完成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<style>
*{
margin-top: 20px;
}
.demo{
height: 100px;
width: 200px;
background-color: aqua;
}
</style>
<body>
<div id="app">
<!-- prevent阻止默认事件,写了这个a标签便不会有默认跳转的行为-->
<a href="https://www.baidu.com/" @click.prevent="myFunction">{{name}}</a>
<!-- once事件只触发一次-->
<button @click.once="myFunction2">点击按钮</button>
<!--stop阻止事件冒泡-->
<div class="demo" @click="myFunction3">
<button @click.stop="myFunction3">点击按钮2</button>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
name:'事件修饰符的作用'
},
methods:{
myFunction(){
alert("你好,世界")
},
myFunction2(){
alert("我怎么打不开")
},
myFunction3(){
alert("怎么只打开一次")
}
}
})
</script>
</body>
</html>