八、事件監聽（二 v-on 修飾符）
阿新 • • 發佈：2022-03-30
<!-- 停止冒泡 -->
<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>
<!-- 阻止預設行為 --> <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>