Vue 事件修飾符
Vue 中的事件修飾符會修改事件觸發方法執行的方式，並幫助我們更高效、更直接地處理事件。
事件修飾符與 Vue 的 v-on 指令一起使用，例如：
- 阻止 HTML 表單的預設提交行為 (
v-on:submit.prevent) - 確保事件在頁面載入後只能執行一次 (
v-on:click.once) - 指定使用哪個鍵盤按鍵來觸發事件以執行方法 (
v-on:keyup.enter)
如何修改 v-on 指令
事件修飾符用於更詳細地定義如何響應事件。
我們透過將標籤連線到事件，如前所示，來使用事件修飾符：
<button v-on:click="createAlert">建立警報</button>
現在，要更具體地定義按鈕的點選事件在頁面載入後只觸發一次，我們可以新增 .once 修飾符，如下所示：
<button v-on:click.once="createAlert">建立警報</button>
這是一個使用 .once 修飾符的示例：
示例
在 <button> 標籤上使用 .once 修飾符，以便在“click”事件首次發生時只執行一次該方法。
<div id="app">
<p>點選按鈕建立警報：</p>
<button v-on:click.once="creteAlert">建立警報</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
methods: {
createAlert() {
alert("按鈕點選建立的警報")
}
}
})
app.mount('#app')
</script>
自己動手試一試 »
注意：也可以在方法內部處理事件而不是使用事件修飾符，但事件修飾符使其更簡單。
不同的 v-on 修飾符
事件修飾符在不同情況下使用。我們可以在監聽鍵盤事件、滑鼠點選事件時使用事件修飾符，甚至可以將事件修飾符組合使用。
事件修飾符 .once 可用於鍵盤和滑鼠點選事件之後。
鍵盤按鍵事件修飾符
我們有三種不同的鍵盤事件型別：keydown、keypress 和 keyup。
對於每種按鍵事件型別，我們都可以精確指定要監聽的按鍵。例如，我們有 .space、.enter、.w 和 .up 等。
您可以將按鍵事件寫入網頁，或使用 console.log(event.key) 寫入控制檯，以自行查詢特定按鍵的值。
示例
keydown 鍵盤事件觸發 'getKey' 方法，並且事件物件中的 'key' 值被寫入控制檯和網頁。
<input v-on:keydown="getKey">
<p> {{ keyValue }} </p>
data() {
return {
keyValue = ''
}
},
methods: {
getKey(evt) {
this.keyValue = evt.key
console.log(evt.key)
}
}
自己動手試一試 »
我們還可以選擇將事件限制為僅在按下系統修飾鍵 .alt、.ctrl、.shift 或 .meta 時發生。系統修飾鍵 .meta 在 Windows 計算機上代表 Windows 鍵，在 Apple 計算機上代表 Command 鍵。
| 按鍵修飾符 | 詳情 |
|---|---|
.[Vue 按鍵別名] |
最常用的按鍵在 Vue 中有自己的別名。
|
.[字母] |
指定按下按鍵時出現的字母。例如：使用 .s 按鍵修飾符來監聽 'S' 鍵。 |
.[系統修飾鍵] |
.alt、.ctrl、.shift 或 .meta。這些按鍵可以與其他按鍵組合使用，或與滑鼠點選組合使用。 |
示例
使用 .s 修飾符在使用者在 <textarea> 標籤中輸入“s”時建立一個警報。
<div id="app">
<p>嘗試按 's' 鍵：</p>
<textarea v-on:keyup.s="createAlert"></textarea>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
methods: {
createAlert() {
alert("您按下了 'S' 鍵！")
}
}
})
app.mount('#app')
</script>
自己動手試一試 »
組合鍵盤事件修飾符
事件修飾符也可以組合使用，這樣只有當多個條件同時滿足時，方法才會被呼叫。
示例
使用 .s 和 .ctrl 修飾符組合使用，在 <textarea> 標籤中同時按下“s”和“ctrl”鍵時建立一個警報。
<div id="app">
<p>嘗試按 's' 鍵：</p>
<textarea v-on:keydown.ctrl.s="createAlert"></textarea>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
methods: {
createAlert() {
alert("您同時按下了 'S' 和 'Ctrl' 鍵！")
}
}
})
app.mount('#app')
</script>
自己動手試一試 »
滑鼠按鈕修飾符
要響應滑鼠點選，我們可以寫 v-on:click，但要指定哪個滑鼠按鈕被點選，我們可以使用 .left、.center 或 .right 修飾符。
觸控板使用者：您可能需要透過雙指點選，或在觸控板的右下角點選來執行右鍵單擊。
示例
當用戶在 <div> 元素中右鍵單擊時，更改背景顏色。
<div id="app">
<div v-on:click.right="changeColor"
v-bind:style="{backgroundColor:'hsl('+bgColor+',80%,80%)'}">
<p>在此處按滑鼠右鍵。</p>
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
bgColor: 0
}
},
methods: {
changeColor() {
this.bgColor+=50
}
}
})
app.mount('#app')
</script>
自己動手試一試 »
滑鼠按鈕事件也可以與系統修飾鍵結合使用。
示例
當用戶在 <div> 元素中右鍵單擊並同時按下“ctrl”鍵時，更改背景顏色。
<div id="app">
<div v-on:click.right.ctrl="changeColor"
v-bind:style="{backgroundColor:'hsl('+bgColor+',80%,80%)'}">
<p>在此處按滑鼠右鍵。</p>
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
bgColor: 0
}
},
methods: {
changeColor() {
this.bgColor+=50
}
}
})
app.mount('#app')
</script>
自己動手試一試 »
事件修飾符 .prevent 可以與 .right 修飾符一起使用，以阻止右鍵單擊時出現的預設下拉選單。
示例
當您右鍵單擊以更改 <div> 元素的背景顏色時，會阻止出現下拉選單。
<div id="app">
<div v-on:click.right.prevent="changeColor"
v-bind:style="{backgroundColor:'hsl('+bgColor+',80%,80%)'}">
<p>在此處按滑鼠右鍵。</p>
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
bgColor: 0
}
},
methods: {
changeColor() {
this.bgColor+=50
}
}
})
app.mount('#app')
</script>
自己動手試一試 »
可以在方法中使用 event.preventDefault() 來阻止右鍵單擊後出現下拉選單，但使用 Vue 的 .prevent 修飾符可以使程式碼更易讀、更易維護。
您也可以響應左鍵滑鼠點選並結合其他修飾符，例如 click.left.shift。
示例
按住“shift”鍵盤鍵並在 <img> 標籤上按左滑鼠按鈕以更改影像。
<div id="app">
<p>按住 'Shift' 鍵並按左滑鼠按鈕：</p>
<img v-on:click.left.shift="changeImg" v-bind:src="imgUrl">
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
imgUrlIndex: 0,
imgUrl: 'img_tiger_square.jpeg',
imgages: [
'img_tiger_square.jpeg',
'img_moose_square.jpeg',
'img_kangaroo_square.jpeg'
]
}
},
methods: {
changeImg() {
this.imgUrlIndex++
if(this.imgUrlIndex>=3){
this.imgUrlIndex=0
}
this.imgUrl = this.images[this.imgUrlIndex]
}
}
})
app.mount('#app')
</script>
自己動手試一試 »
