Vue中的事件修饰符:
1、prevent:阻止默认事件(就是不跳转超链接)
2、stop:阻止事件冒泡
3、once:事件只触发一次
4、capture:使用事件的捕获模式
5、self:只有event.target是当前操作的元素是才触发事件。
6、passive:事件的默认行为立即执行,无需等事件回调执行完毕(异步)
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Hello World</title>
<script src="vue.js"></script>
</head>
<style>
#app {
background-color: antiquewhite;
width: 200px;
height: 150px;
padding-top: 20px;
padding-left: 10px;
}
</style>
<body>
<div id="app" v-on:click="divClick">
<a href="http://www.baidu.com" @click.stop.passive="hello">
<!--
阻止默认事件(就是不跳转超链接)prevent
<a href="http://www.baidu.com" @click.prevent="hello">
阻止事件冒泡
<a href="http://www.baidu.com" @click.stop="hello">
事件只触发一次
<a href="http://www.baidu.com" @click.once="hello">
使用事件的捕获模式
<a href="http://www.baidu.com" @click.capture="hello">
只有event.target是当前操作的元素是才触发事件
<a href="http://www.baidu.com" @click.self="hello">
事件的默认行为立即执行,无需等事件回调执行完毕
<a href="http://www.baidu.com" @click.passive="hello">
-->
<h3>{{city}}欢迎你</h3>
</a>
<button @click.stop="getCity">显示城市</button>
<button v-on:click="getName($event,'石家庄')">显示省会</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false; // 不显示Vue在启动时的提示
/*
Vue中的事件修饰符:
1、prevent:阻止默认事件(就是不跳转超链接)
2、stop:阻止事件冒泡
3、once:事件只触发一次
4、capture:使用事件的捕获模式
5、self:只有event.target是当前操作的元素是才触发事件。
6、passive:事件的默认行为立即执行,无需等事件回调执行完毕(异步)
*/
var app = new Vue({
el: "#app",
data: {
city: "邯郸"
},
methods: {
hello() {
alert(app.city + "欢迎你!");
},
getCity() {
alert('ok');
},
getName(event, a) {
alert('河北的省会是:' + a);
},
divClick() {
alert("我是DIV");
}
}
})
</script>
</html>