Skip to content

Commit b6b2e3b

Browse files
committed
docs (#153): add keycodes deprecated section
1 parent 89548b5 commit b6b2e3b

File tree

2 files changed

+57
-0
lines changed

2 files changed

+57
-0
lines changed

src/guide/migration/introduction.md

+6
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,12 @@ It depends on a few factors:
4040

4141
## Overview
4242

43+
### Deprecated
44+
45+
The following features are now deprecated from v2:
46+
47+
- **keyCode support as `v-on` modifiers.** For more information, [see in-depth explanation](/guides/migration/keycodes.html)
48+
4349
## Built-in Directives
4450

4551
### `v-model` API Change

src/guide/migration/keycodes.md

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
# Remove keyCode support in v-on
2+
3+
## Overview
4+
5+
Here is a quick summary of what has changed:
6+
7+
- **DEPRECATED**: Using numbers, i.e. keyCodes, as `v-on` modifiers
8+
- **DEPRECATED**: Support for `config.keyCodes`
9+
10+
## Previous Syntax
11+
12+
In Vue 2, keyCodes were supported as a way to modify a `v-on` method.
13+
14+
```html
15+
<!-- keyCode version -->
16+
<input v-on:keyup.13="submit" />
17+
18+
<!-- alias version -->
19+
<input v-on:keyup.enter="submit" />
20+
```
21+
22+
In addition, you could define your own aliases via the global `config.keyCodes` option.
23+
24+
```js
25+
Vue.config.keyCodes = {
26+
f1: 112
27+
}
28+
```
29+
30+
```html
31+
<!-- keyCode version -->
32+
<input v-on:keyup.112="showHelpText" />
33+
34+
<!-- custom alias version -->
35+
<input v-on:keyup.f1="showHelpText" />
36+
```
37+
38+
## Current Syntax
39+
40+
Since [`KeyboardEvent.keyCode` has been deprecated](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode), it no longer makes sense for Vue 3 to continue supporting this as well. As a result, it is now recommended to use the kebab-case name for any key you want to use as a modifier.
41+
42+
```html
43+
<!-- Vue 3 Key Modifier on v-on -->
44+
<input v-on:keyup.delete="confirmDelete" />
45+
```
46+
47+
As a result, this means that `config.keyCodes` is now also deprecated and will no longer be supported.
48+
49+
## How to Migrate
50+
51+
For those using `keyCode` in their codbase, we recommend converting them to their kebab-cased named equivalents.

0 commit comments

Comments
 (0)