九、事件监听（二 v-on 修饰符）
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
<!-- 点击回调只会出发一次 -->
<button @click.once="doThis"></button>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../Js/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- 1 .stop修饰符的使用( 相当于之前的event.stopPropagation() ) 停止冒泡-->
<div @click="divClick()">
aaaaa
<button @click.stop="btnClick()">按钮</button>
</div>
<!-- 2 .prevent修饰符的使用( 相当于之前的event.preventDefault() ) 阻止默认事件、行为-->
<form action="baidu">
<input type="submit" value="提交" @click.prevent="submitClick()">
<br>
</form>
<!-- 3 .{keyCode | keyAlias} 只当事件是从特定键触发时才触发回调 -->
<!-- 监听某个键盘的键帽 -->
<input type="text" v-on:keyup="keyup()"><br/>
<!-- 监听某个键盘的enter -->
<input type="text" v-on:keyup.enter="keyupEnter()"><br/>
<!-- 4 .once 只触发一次 -->
<button @click.once="btn2Click()">只被点击一次</button>
</div>
<script>
const app = new Vue({
el:"#app",
data:{
message:"你好啊"
},
methods: {
divClick(){
console.log("divClick");
},
btnClick(){
console.log("btnClick")
},
submitClick(){
console.log("submitClick")
},
keyup(){
console.log("keyup")
},
keyupEnter(){
console.log("keyupEnter")
},
btn2Click(){
console.log("btn2Click")
}
}
});
</script>
</body>
</html>
浙公网安备 33010602011771号