0Pricing
Vue Academy · Lesson

v-on Event Modifiers

.stop, .prevent, .self, .once, .capture, .passive — when and why to use each modifier.

Cleaner Event Handling

The v-on directive (shorthand @) attaches event listeners. Event modifiers are suffixes that handle common DOM chores like stopping propagation or preventing defaults, so your handlers stay focused on logic.

The Problem Modifiers Solve

Without modifiers you sprinkle DOM boilerplate inside handlers: calling event.preventDefault() or event.stopPropagation(). Modifiers move that into the template declaratively.

All lessons in this course

  1. v-model: Two-Way Binding Internals
  2. v-on Event Modifiers
  3. v-bind Dynamic and Multiple Bindings
  4. Writing Custom Directives
← Back to Vue Academy