Vue.js 2 Design Patterns and Best Practices

Key modifiers

We're not limited to simply using the enter modifier, we also have access to a variety of shorthand modifiers, for example the use of the @ symbol and shortening v-on:event.name v-on: by replacing it with the @ symbol. Other shortening methods include:

• @ is the same as v-on:
• @keyup.13 is the same as @keyup.enter
• @key* can be queued, such as @keyup.ctrl.alt.delete

Other modifiers can be seen in the following table:

Name	Description	Code Example
.enter	Whenever the Enter key is tapped.	<input v-on:keyup.enter="myFunction" />
.tab	Whenever the Tab key is tapped.	<input v-on:keyup.tab="myFunction" />
.delete	Whenever the Delete or Backspace key is tapped.	<input v-on:keyup.delete="myFunction" />
.esc	Whenever the