이벤트 리스닝
일반적으로 v-on 디렉티브는 단축 문법으로 @ 기호를 사용합니다.
v-on:click="handler" 또는 줄여서 @click="handler"와 같이 사용합니다.
<button @click="count++">1 추가</button>
<p>숫자 값은: {{ count }}</p>이벤트 객체 접근하기
$event를 사용하여 메서드에 전달하거나 인라인 화살표 함수를 사용할 수 있습니다.
<!-- 특수한 키워드인 $event 사용 -->
<button @click="warn('아직 양식을 제출할 수 없습니다.', $event)">
제출하기
</button>
<!-- 인라인 화살표 함수 사용 -->
<button @click="(event) => warn('아직 양식을 제출할 수 없습니다.', event)">
제출하기
</button>
function warn(message, event) {
// 이제 네이티브 이벤트 객체에 접근할 수 있습니다.
if (event) {
event.preventDefault()
}
alert(message)
}이벤트 수식어
v-on은 점(.)으로 시작하는 지시적 접미사인 이벤트 수식어를 제공합니다.
<!-- 클릭 이벤트 전파가 중지됩니다. -->
<a @click.stop="doThis"></a>
<!-- submit 이벤트가 더 이상 페이지 리로드하지 않습니다. -->
<form @submit.prevent="onSubmit"></form>
<!-- 수식어를 연결할 수 있습니다. -->
<a @click.stop.prevent="doThat"></a>
<!-- 이벤트에 핸들러 없이 수식어만 사용할 수 있습니다. -->
<form @submit.prevent></form>
<!-- event.target이 엘리먼트 자신일 경우에만 핸들러가 실행됩니다. -->
<!-- 예를 들어 자식 엘리먼트에서 클릭 액션이 있으면 핸들러가 실행되지 않습니다. -->
<div @click.self="doThat">...</div>
<!-- 이벤트 리스너를 추가할 때 캡처 모드 사용 -->
<!-- 내부 엘리먼트에서 클릭 이벤트 핸들러가 실행되기 전에, -->
<!-- 여기에서 먼저 핸들러가 실행됩니다. -->
<div @click.capture="doThis">...</div>
<!-- 클릭 이벤트는 단 한 번만 실행됩니다. -->
<a @click.once="doThis"></a>
<!-- 핸들러 내 `event.preventDefault()`가 포함되었더라도 -->
<!-- 스크롤 이벤트의 기본 동작(스크롤)이 발생합니다. -->
<div @scroll.passive="onScroll">...</div>입력키 수식어
키보드 이벤트를 수신할 때, 특정 키를 확인해야 하는 경우가 많기 때문에, 키 수식어를 지원합니다:
<!-- `key`가 `Enter`일 때만 `submit`을 호출합니다 -->
<input @keyup.enter="submit" />
<!-- $event.key가 'PageDown'일 경우에만 호출됩니다 -->
<input @keyup.page-down="onPageDown" />
<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">시작하기</div>
<!-- exact -->
<!-- Ctrl과 함께 Alt 또는 Shift를 누른 상태에서도 클릭하면 실행됩니다. -->
<button @click.ctrl="onClick">A</button>
<!-- 오직 Ctrl만 누른 상태에서 클릭해야 실행됩니다. -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 시스템 입력키를 누르지 않고 클릭해야지만 실행됩니다. -->
<button @click.exact="onClick">A</button>마우스 버튼 수식어
특정 마우스 버튼에 의해 이벤트가 트리거 되도록 제한하고 싶을 때 사용합니다.
.left .right .middle
