v-on은 DOM 이벤트(클릭, 입력, 키 입력)를 감지하여 핸들러를 실행합니다. 단축형은 @입니다.
<script setup>
import { ref } from "vue";
const count = ref(0);
function increment() { count.value++; }
</script>
<template>
<button v-on:click="increment">전체 문법</button>
<button @click="increment">단축형 (관용적)</button>
<button @click="count++">인라인 표현식</button>
<button @click="increment($event, 'extra')">인자 + 이벤트 전달</button>
</template>
메서드 이름, 인라인 표현식을 전달하거나 인자와 함께 메서드를 호출할 수 있습니다. 네이티브 이벤트 객체는 로 사용할 수 있습니다.
$event<template>
<form @submit.prevent="onSubmit"> <!-- .prevent = event.preventDefault() -->
<div @click.stop="onClick"> <!-- .stop = event.stopPropagation() -->
<div @click.self="onlyIfClickedSelf"> <!-- 대상이 이 요소일 때만 발생 -->
<button @click.once="runOnce"> <!-- 핸들러를 최대 한 번만 실행 -->
</template>
수식어는 JS로 직접 작성해야 할 보일러플레이트를 대체합니다 — .prevent와 .stop은 끊임없이 사용됩니다(예: 폼의 기본 페이지 새로고침 방지).
<template>
<input @keyup.enter="submit" /> <!-- Enter 키에서만 -->
<input @keyup.esc="cancel" /> <!-- Escape -->
<div @keydown.ctrl.s.prevent="save" /> <!-- Ctrl+S, 브라우저 저장 방지 -->
</template>
<ChildComponent @custom-event="handleIt" />
<!-- 자식이 emit('custom-event', payload)를 실행 -->
동일한 @ 문법으로 (DOM 이벤트뿐 아니라) 자식 컴포넌트가 발생시킨 커스텀 이벤트를 수신합니다.
v-on(@)은 Vue가 모든 사용자 상호작용을 처리하는 방법입니다.
이벤트 수식어(.prevent, .stop, .self, .once)와 키 수식어(.enter, .esc)는 흔한 이벤트 처리 패턴을 선언적이고 간결하게 만듭니다 — 수동 preventDefault/stopPropagation이나 키 코드 검사가 필요 없습니다.
동일한 문법이 DOM 이벤트와 커스텀 컴포넌트 이벤트를 통합합니다.