v-on (Events) & Modifiers

v-on listens to DOM events. Modifiers handle common patterns inline so you do not have to write boilerplate in every handler.

4 min read Level 1/5 #vue#directives#events

What you'll learn

Listen with @event="handler"
Pass arguments and access $event
Use modifiers (.prevent, .stop, .once, .self)

v-on (shorthand @) registers a DOM event listener. It accepts a method name, an inline expression, or a call with arguments.

Basic Usage

<script setup lang="ts">
function save() {
  console.log('saved')
}
function remove(id: number, event: MouseEvent) {
  event.stopPropagation()
  console.log('remove', id)
}
</script>

<template>
  <button @click="save">Save</button>
  <button @click="remove(42, $event)">Remove</button>
</template>

When you pass arguments, the event object is available as $event.

Event Modifiers

Modifiers chain onto the event name with dots. They run before your handler.

<form @submit.prevent="onSubmit">
  <button @click.stop="onClick">Click</button>
  <button @click.once="onceOnly">Only once</button>
  <div @click.self="onlyIfIamClicked">…</div>
</form>

The common ones:

.prevent calls preventDefault for you.
.stop calls stopPropagation.
.once removes the listener after firing.
.self only fires when the event target is the element itself, not a child.
.capture listens in the capture phase.
.passive flags the listener as passive (for scroll perf).

Key and Mouse Modifiers

Keyboard events accept key name modifiers:

<input @keyup.enter="submit" />
<input @keyup.esc="close" />
<input @keydown.ctrl.s.prevent="save" />

Mouse events accept button modifiers too: @click.right, @click.middle, @click.left.

v-bind — Class, Style & Attributes →