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节：数组的监听