九、事件监听(二 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>