SoFunction
Updated on 2025-04-05

Detailed explanation of vue listening to keyboard input events @ || @

Vue is run as v-on and adds a special keyboard modifier when listening for keyboard events:

<input v-on:keyup.13="submit">

vue also gave alias for commonly used keys very thoughtfully, so there is no need to remember keyCode ~ ~

The above code can also be written like this:

<input v-on:="submit">

<input @="submit">

All keyboard alias:

.enter

.tab

.delete (Capture the Delete and Backspace keys)

.esc

.space

.up

.down

.left

.right

There are also some combination of keys:

.ctrl

.alt

.shift

.meta (the window key is under window system, and the command key is under Mac)

Alt + C :

<input @.67="doSth">

Ctrl + Click :

&lt;div @="doSth"&gt;Click me&lt;/div&gt;

Notice! ! ! If you use encapsulation components, such as element, then use the key modifier to add .native

for example:

&lt;el-input v-model="account" placeholder="Please enter your account" @="search()"&gt;&lt;/el-input&gt;

The above detailed explanation of the vue monitor keyboard input event @ || @ is all the content I have shared with you. I hope you can give you a reference and I hope you can support me more.