Calling event.preventDefault() or event.stopPropagation() in the event handler is a very common requirement. While we can easily do this with Methods, it’s better to have pure data logic instead of dealing with DOM event details.

To solve this problem, vue.js provides event modifiers for V-Ons. By point (.) Represents the instruction suffix to invoke the modifier.

Event modifier

  • .stop: Prevents the click event from bubbling
  • .preventSubmission events no longer reload the page
  • .capture: Use event capture mode when adding event listeners
  • .self: Triggers a callback when the event is triggered by the element itself
  • .once: The event can only happen once

Key modifier

Vue allows you to add key modifiers for V-Ons when they listen for keyboard events, meaning that subsequent methods can only be triggered after the Enter key is pressed

Call method only if key is “Enter”.

All key aliases: Remembering all keycodes is difficult, so Vue provides aliases for the most commonly used keys:

  • .enter
  • .tab
  • .delete(Capture delete and Backspace keys)
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

Keymodifier aliases can be customized using the global config.keyCodes object

// You can use v-on:keyup.f1 vue.config.keycodes.f1 = 112Copy the code