1.事件对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="box">
<!-- 在vue中 $event 表示事件对象 -->
<button type="button" v-on:click="show($event,msg)">点击按钮</button>
</div>
</body>
</html>
<script type="text/javascript">
new Vue({
el: "#box",
data: {
msg: 'hello'
},
methods: {
show: function(e, msg) {
//弹出绑定事件的类型
alert(e.type)
alert(msg);
}
}
})
</script>
运行效果为：
2.事件的冒泡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#wai {
height: 300px;
width: 400px;
background: yellow;
}
</style>
</head>
<body>
<div id="box">
<div id="wai" @click="wai($event)">
<!-- 在vue中 $event 表示事件对象 -->
<button type="button" v-on:click="show($event)">点击按钮</button>
</div>
</div>
</body>
</html>
<script type="text/javascript">
new Vue({
el: "#box",
data: {
msg: 'hello'
},
methods: {
show: function(e) {
//阻止冒泡的方法
//e.stopPropagation();
alert("里")
},
wai(e) {
alert("外")
}
}
})
</script>
运行结果为：
若将e.stopPropagation()前的注释去掉，则代码只显示外。
3.阻止元素的默认行为
<!-- 通过事件修饰符 .prevent 来阻止默认行为 加了该修饰符后点击链接或提交不会跳转-->
<a href="http://www.163.com" @click.prevent="show()">点击跳转</a>
<form action="123.html" method="post" @submit.prevent="ajaxSend()">