<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.father{width: 100px;height: 100px;background: #CCCCCC}
.son{width: 50px;height: 50px;background: darkblue}
</style>
</head>
<body>
<div id="app">
<!--
1)使用修饰符.stop前，点击子元素，随后会触发父元素(事件冒泡)
2).stop - 调用 event.stopPropagation()
3)v-on:click/@click等效
-->
<div class="father" v-on:click="show2">
<p class="son" v-on:click="show1"></p>
</div>
<!--使用修饰符.stop后-->
<div class="father" @click.prevent="show2">
<p class="son" @click.stop="show1"></p>
</div>
<!--只设置@kepup，效果会是任意键盘抬起都会触发所绑定的方法-->
<input type="text" @keyup="show3"/>
<!--如果不想任意键抬起都触发，可在修饰符指定按键，如enter，点击enter触发方法-->
<input type="text" @keyup.enter="show3"/>
<!--或者输入键盘按钮Key值，如a键(65)-->
<input type="text" @keyup.65="show3"/>
<!--修饰符.once代表只触发一次-->
<br />
<button @click="show4">没有.once修饰符</button>
<button @click.once="show4">.once修饰符</button>
</div>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
methods:{
show1(){
alert(111)
},
show2(){
alert(222)
},
show3(){
alert('成功发送!')
},
show4(){
alert('.once修饰符')
}
}
})
</script>
</body>
</html>
网友评论