-
.once- 只觸發一次回調 -
.{keyCode | keyAlias}- 只當事件是從特定鍵觸發時才觸發回調 -
.prevent- 調用event.preventDefault() -
.stop- 調用event.stopPropagation()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-on修飾符</title>
</head>
<body>
<div id="app">
<!-- .stop用於停止冒泡事件，點擊按鈕不會調用divClick-->
<div @click="divClick">
111111111
<button @click.stop="btnClick">按鈕</button>
</div>
<!-- .prevent用於阻止默認事件的執行-->
<form action="new">
<input type="submit" value="提交" @click.prevent="submitClick">
</form>
<!-- .{keyCode | keyAlias}用於監聽鍵盤的按鍵，keyCode表示鍵盤對應的編碼，keyAlias代表鍵盤的名稱-->
<input type="text" @keyup.enter="keyUp">
<!-- .once只觸發一次回調，點擊一次之後，不會再調用點擊事件-->
<button @click.once="btnClick">按鈕</button>
</div>
<script src="js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
methods: {
btnClick() {
console.log("按鈕被點擊了")
},
divClick() {
console.log("div被點擊了")
},
submitClick() {
console.log("手動進行提交")
},
keyUp() {
console.log("用戶按下了鍵盤")
}
}
})
</script>
</body>
</html>