`v-on`

Listens to DOM events or component emits and runs a handler.

Since Vue 3.0 Spec ↗

Syntax

@event="handler" | v-on="object" | @event.modifier

Parameters

Name	Type	Required	Description
`handler`	`function \| statement`	No	Method or inline statement run when the event fires.

Returns

directive — Attaches the event listener.

Examples

<script setup lang="ts">
import { ref } from 'vue';
const count = ref(0);
function add(n: number) {
  count.value += n;
}
</script>

<template>
  <button @click="add(1)">+1</button>
  <form @submit.prevent="add(10)">
    <input @keyup.enter="add(5)" />
  </form>
</template>

Notes

The shorthand is `@`. Modifiers streamline common needs: `.prevent`, `.stop`, `.once`, `.self`, key modifiers like `.enter`/`.esc`, and `.passive`. Inline handlers can call methods with arguments; access the native event via `$event`. `v-on="obj"` binds multiple listeners at once.