Vue 3 遷移政策筆記—— 第18節：按鍵修飾符

前言

本筆記主要基于官方文檔《遷移政策—— 按鍵修飾符》彙總而來。如有了解出入，請以官方文檔為主。建議您以官方文檔為主，本文為輔。這樣您可以“以自己為主”審視的閱讀，進而不被我的觀點帶偏。

知識儲備

• 棄用

  KeyboardEvent.keyCode

概述

• 不再支援使用 keyCodes (即鍵碼) 作為

  v-on

  修飾符；
• 不再支援

  config.keyCodes

  ；

Vue 2.x 中的 keyCodes 修飾符

在 Vue 2.x 中，允許使用 keyCodes 作為

v-on

的修飾符：

<!-- keyCode version -->
<input v-on:keyup.13="submit" />

<!-- alias version -->
<input v-on:keyup.enter="submit" />
           

上面兩種寫法，在 Vue 2.x 是等價的。

另外， 我們還可以通過全局的

config.keyCodes

選項來自定義 alias （别名）。

Vue.config.keyCodes = {
  f1: 112
}
           

<!-- keyCode version -->
<input v-on:keyup.112="showHelpText" />

<!-- custom alias version -->
<input v-on:keyup.f1="showHelpText" />
           

Vue 3.x 棄用 keyCodes

因為 Web 标準已經棄用

KeyboardEvent.keyCode

，是以 Vue 3.x 為了和 Web 标準保持一緻也不再支援 keyCodes。Vue 3.x 建議使用按鍵 alias （别名）作為

v-on

的修飾符。

<!-- Vue 3 Key Modifier on v-on -->
<input v-on:keyup.delete="confirmDelete" />
           

是以，這也意味着

config.keyCodes

也被棄用了。

本系列目錄

• Vue 3 遷移政策筆記—— 第1節：v-for 中的 Ref 數組
• Vue 3 遷移政策筆記—— 第2節：Async Components 異步元件
• Vue 3 遷移政策筆記—— 第3節：Attribute Coercion Behavior （屬性強制行為）
• Vue 3 遷移政策筆記——第4節：$attrs 包括class&style
• Vue 3 遷移政策筆記—— 第5節：移除 $children
• Vue 3 遷移政策筆記—— 第6節：自定義指令
• Vue 3 遷移政策筆記—— 第7節：自定義元素互動
• Vue 3 遷移政策筆記—— 第8節：Data 選項
• Vue 3 遷移政策筆記—— 第9節：新增 emits 選項
• Vue 3 遷移政策筆記—— 第10節：事件 API
• Vue 3 遷移政策筆記—— 第11節：移除過濾器
• Vue 3 遷移政策筆記—— 第12節：片段
• Vue 3 遷移政策筆記—— 第13節：函數式元件
• Vue 3 遷移政策筆記—— 第14節：全局 API
• Vue 3 遷移政策筆記—— 第15節：全局 API 的 tree shaking
• Vue 3 遷移政策筆記—— 第16節：Inline Template 屬性
• Vue 3 遷移政策筆記—— 第17節：Key 屬性
• Vue 3 遷移政策筆記—— 第18節：按鍵修飾符
• Vue 3 遷移政策筆記—— 第19節：移除 $listeners
• Vue 3 遷移政策筆記—— 第20節：Props 的預設值函數不能通路this
• Vue 3 遷移政策筆記—— 第21節：渲染函數 API
• Vue 3 遷移政策筆記—— 第22節：Slots 的統一
• Vue 3 遷移政策筆記—— 第23節：Transition Class 的變化
• Vue 3 遷移政策筆記—— 第24節：Transition Group 不再需要設定根元素
• Vue 3 遷移政策筆記—— 第25節：v-on.native修飾符被移除
• Vue 3 遷移政策筆記—— 第26節：在元件上使用 v-model 的變化
• Vue 3 遷移政策筆記—— 第27節：v-if 和 v-for 的優先級
• Vue 3 遷移政策筆記—— 第28節：v-bind 合并行為
• Vue 3 遷移政策筆記—— 第29節：數組的監聽