按键修饰符"/>
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节:数组的监听
更多推荐
Vue 3 迁移策略笔记—— 第18节:按键修饰符
发布评论