We need to investigate the migration of VUE 2 to VUE 3 for internal sharing.

I think there’s only one translator online so far, the first few chapters.

But I was in a hurry, so I had to turn it over myself. Translator level 4 is not passed, all depends on Youdao and Google.

Vue 3 keyCode Modifiers

An overview of

Here’s a brief summary of the changes:

  • Breaking: No longer supportedv-onModifier that can only use numbers, that is, keycodes
  • Breaking: Not supportedconfig.keyCodes

2. X syntax

In Vue 2, keyCodes are a way to modify V-on methods.

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

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

In addition, you can customize aliases through the global config.keycodes option.

Vue.config.keyCodes = {
  f1: 112
}
Copy the code
<! -- keyCode version -->
<input v-on:keyup.112="showHelpText" />

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

3. X syntax

Since KeyboardEvent. KeyCode is deprecated, it is no longer supported in Vue 3. Therefore, it is now recommended to name all keys as modifiers using kebab-case.

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

As a result, this means that config.keycodes are now also deprecated and will no longer be supported.

Migration strategy

For users who use keyCode in their code base, it is recommended to convert to the kebab-case named equivalent.

KeyboardEvent. KeyCode is deprecated, so vUE 3 is implemented as KeyboardEvent. Key, I guess. See Mdn Key Values.