VUE 事件修飾符以及按鍵碼
之前寫了一篇關于事件處理的文章，這篇的時間修飾符主要就是來修飾之前事件處理的事件名的，目的是為了擴充事件的功能。
事件修飾符
- .stop：阻止單擊事件繼續傳播，event.stopPropagation()
- .prevent：阻止事件預設行為 event.preventDefault()
- .once：點選事件将隻會觸發一次
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件處理</title>
</head>
<body>
<div id="app">
<h3>事件處理函數 v-on 或者 @</h3>
<button v-on:click="say">Say {{msg}}</button>
<!-- $event 代表的是原生的DOM事件 -->
<button @click="warn('王佳偉',$event)">Warn</button>
<hr>
<h3>事件修飾符</h3>
<!-- 1. 防止單擊事件繼續傳播 -->
<!-- 如果不加 .stop ，點選按鈕之後，執行doThis函數，執行完後，todo函數也會被執行，也就是說，會先彈出doThis，然後彈出todo -->
<div @click="todo">
<button @click="doThis">單擊事件會繼續傳播</button>
</div>
<br>
<div @click="todo">
<!-- .stop 的作用是阻止事件的傳播，此時，隻會彈出 doThis -->
<button @click.stop="doThis">單擊事件會組織繼續傳播</button>
</div>
<br>
<!-- 2. 阻止時間預設行為 -->
<a href=" @click.prevent="doStop">我的部落格園部落格</a>
<br><br>
<!-- 3. 點選事件隻會觸發一次 -->
<button @click.once="doOnly">點選隻會觸發一次：{{num}}</button>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '你好，王佳偉',
num: 0
},
// 定義事件處理函數
methods: {
say: function (event) {
// event 代表的是DOM的原生事件，vue會自動的而将它傳入進來。
alert(this.msg)
alert(event.target.innerHTML)
},
warn: function (name, event) {
// 如果說函數有多個參數，而又需要使用原生事件，則需要使用$event作為參數傳入
alert(name + ' ' + event.target.tagName)
},
doThis: function () {
alert("doThis ...")
},
todo: function () {
alert("todo ...")
},
doStop: function () {
alert("doStop ... href 預設行為已被阻止！")
},
doOnly: function () {
this.num++
}
},
})
</script>
</body>
</html> 
按鍵修飾符
格式：
v-on:keyup.按鍵名 或者 @keyup.按鍵名 常用的按鍵名：
- .enterEnter鍵
- .tabTab鍵
- .deleteDelete鍵
- .escESC鍵
- space空格鍵
- up向上鍵
- down向下鍵
- left向左鍵
- right向右鍵
案例：
<input v-on:keyup.enter = "submit" /> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件處理</title>
</head>
<body>
<div id="app">
<h3>事件處理函數 v-on 或者 @</h3>
<button v-on:click="say">Say {{msg}}</button>
<!-- $event 代表的是原生的DOM事件 -->
<button @click="warn('王佳偉',$event)">Warn</button>
<hr>
<h3>事件修飾符</h3>
<!-- 1. 防止單擊事件繼續傳播 -->
<!-- 如果不加 .stop ，點選按鈕之後，執行doThis函數，執行完後，todo函數也會被執行，也就是說，會先彈出doThis，然後彈出todo -->
<div @click="todo">
<button @click="doThis">單擊事件會繼續傳播</button>
</div>
<br>
<div @click="todo">
<!-- .stop 的作用是阻止事件的傳播，此時，隻會彈出 doThis -->
<button @click.stop="doThis">單擊事件會組織繼續傳播</button>
</div>
<br>
<!-- 2. 阻止時間預設行為 -->
<a href=" @click.prevent="doStop">我的部落格園部落格</a>
<br><br>
<!-- 3. 點選事件隻會觸發一次 -->
<button @click.once="doOnly">點選隻會觸發一次：{{num}}</button>
<hr>
<h3>按鍵修飾符或按鍵碼</h3>
<!-- 按下Enter鍵執行 -->
<input type="text" @keyup.enter="keyEnter"><br><br>
<!-- 按下空格鍵執行 -->
<input type="text" @keyup.space="keySpace"><br><br>
<!-- 其實還可以使用按鍵碼，比如13也是回車，自己查 -->
<input type="text" @keyup.13="keyDown">
<!-- 按鍵碼查詢位址： https://www.bejson.com/othertools/keycodes/ -->
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '你好，王佳偉',
num: 0
},
// 定義事件處理函數
methods: {
say: function (event) {
// event 代表的是DOM的原生事件，vue會自動的而将它傳入進來。
alert(this.msg)
alert(event.target.innerHTML)
},
warn: function (name, event) {
// 如果說函數有多個參數，而又需要使用原生事件，則需要使用$event作為參數傳入
alert(name + ' ' + event.target.tagName)
},
doThis: function () {
alert("doThis ...")
},
todo: function () {
alert("todo ...")
},
doStop: function () {
alert("doStop ... href 預設行為已被阻止！")
},
doOnly: function () {
this.num++
},
keyEnter: function () {
alert("目前按的是Enter鍵！")
},
keySpace: function () {
alert("目前按的是空格鍵！")
},
keyDown:function(){
alert("目前按鍵碼是13！")
}
},
})
</script>
</body>
</html> 
源碼位置：https://gitee.com/wjw1014/vue_learning_course
【版權聲明】本博文著作權歸作者所有，任何形式的轉載都請聯系作者擷取授權并注明出處！
【重要說明】本文為本人的學習記錄，論點和觀點僅代表個人而不代表當時技術的真理，目的是自我學習和有幸成為可以向他人分享的經驗，是以有錯誤會虛心接受改正，但不代表此刻博文無誤！