@ 단축 문법 기호를 이용하여 v-on 디렉티브를 사용할 수 있음.
DOM 이벤트를 수신하고 트리거될 때 JavaScript를 실행함.
사용법은 v-on:click="handler" 를 사용하거나 단축으로 @click="handler" 를 사용함.
핸들러의 값은 다음 중 하나일 수 있음.
1. Inline handlers: 인라인 javaScript는 이벤트가 트리거될 때 실행함.
(네이티브 onclick 속성과 비슷함)
2. Method handlers: 컴포넌트에 정의된 메서드 이름 또는 메서드 경로
인라인 핸들러
인라인 핸들러는 일반적으로 다음과 같이 간단한 경우에 사용됨.
const count = ref(0)<button @click ="count++">1 추가</button>
<p>숫자 값은: {{ count }}</p>메서드 핸들러
대부분의 이벤트 핸들러 논리는 복잡하고, 인라인 핸들러에서는 실현 가능하지 않을 수 있음.
그러므로 v-on은 컴포넌트의 메서드 이름이나 메서드를 가리키는 경로를 실행 할 수 있게 구현되어 있음.
const name = ref('Vue.js')
function greet(event) {
alert(`안녕 ${name.value}!`)
// 'event`는 네이티브 DOM 이벤트 객체
if (event) {
alert(event.target.tagName)
}
}<button @click="greet">환영하기</button>메서드 핸들러는 트리거하는 네이티브 DOM 이벤트 객체를 자동으로 수신함.
위의 예에서 event.target.tagName을 통해 이벤트를 전달하는 엘리먼트에 접근할 수 있음.
메서드 vs 인라인 구분
템플릿 컴파일러는 v-on값인 문자열이 유요한 JavaScript 식별자 또는 속성에 접근 가능한 경로인지를 확인해 메서드 핸들러를 감지함.
인라인 핸들러에서 메서드 호출하기
메서드 이름을 직접 바인딩하는 대신, 인라인 핸들러에게 메서드를 호출할 수도 있음.
이를 통해 네이티브 이벤트 객체 대신 사용자 지정 인자를 메서드에 전달할 수 있음.
function say(message) {
alert(message)
}<button @click="say('안녕')>안녕이라고 말하기</button>
<bitton @click="say('잘가')>잘가라고 말하기</button>인라인 핸들러에서 이벤트 객체 접근하기
인라인 핸들러에서 네이티브 DOM 이벤트 객체에 접근해야 하는 경우도 있음. 특수 키워드인 $event를 사용하여 메서드에 전달하거나 인라인 화살표 함수를 사용할 수 있음
// 특수한 키워드인 $event 사용
<button @click="warn('아직 양식을 제출할 수 없습니다.', $event)">
제출하기
</button>
// 인라인 화살표 함수 사용
<button @click="(event) => warn('아직 양식을 제출할 수 없습니다', event)">
제출하기
</button>function warn(message, event) {
if (evnet) {
event.preventDefault()
}
alert(message)
}이벤트 수식어
이벤트 핸들러 내에서 event.preventDefault() 또는 event.stopPropagation()을 호출하는 것은 매우 흔한 일임.
메서드 내에서 이작을 쉽게 수행할 수 있지만, 메서드가 DOM 이벤트에 대한 세부적인 처리 로직 없이 오로지 데이터 처리 로직만 있다면 코드 유지보수에 더 좋을 것임.
v-on은 점( . )으로 시작하는 이벤트 수식어를 제공함
.stop
.prevent
.self
.capture
.once
.passive
<!-- 클릭 이벤트 전파가 중지됩니다. -->
<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>.capture, once, passive 수식어는 네이티브 addEventListener 메서드의 옵션을 반영함.
<!-- 이벤트 리스너를 추가할 때 캡처 모드 사용 -->
<!-- 내부 엘리먼트에서 클릭 이벤트 핸들러가 실행되기 전에, 여기에서 먼저 핸들러가 실행됩니다. -->
<div @click.capture="doThis">...</div>
<!-- 클릭 이벤트는 단 한 번만 실행됩니다. -->
<a @click.once="doThis"></a>
<!-- 핸들러 내 `event.preventDefault()`가 포함되었더라도 -->
<!-- 스크롤 이벤트의 기본 동작(스크롤)이 발생합니다. -->
<div @scroll.passive="onScroll">...</div>입력키 수식어
키보드 이벤트를 수신할 때, 특정 키를 확인해야 하는 경우가 많기 때문에, 키 수식어를 지원함.
<!-- 'key'가 'Enter'일 때만 'submit'을 호출함 -->
<input @keyup.enter="submit" />입력키 별칭
Vue는 가장 일반적으로 사용되는 키에 대한 별칭을 제공함.
.enter
.tab
.delete(Delte 및 Backspace 키 모두 캡처)
.esc
.space
.up
.down
.left
.right
시스템 입력키 수식어
마우스 또는 키보드 이벤트 리스너는 아래 수식어를 사용하여, 해당 입력키를 누를 때만 트리거 되도록 할 수 있음.
.ctrl
.alt
.shift
.meta
<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">시작하기</div>
.exact 수식어
.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
특정 마우스 버튼에 의해 이벤트가 트리거 되도록 제한하고 싶을 때 사용함
