이벤트 청취
v-on 디렉티브는 @ 기호로 축약해서 사용이 가능하다.
핸들러 값은 다음 중 하나일 수 있다.
-
인라인 핸들러: 이벤트가 트리거될 때 실행되는 인라인
-
메서드 핸들러: 컴포넌트에 정의된 메서드 이름 또는 메서드를 가리키는 경로.
인라인 핸들러
인라인 핸들러는 일반적으로 간단한 경우에 사용된다.
data() {
return {
count: 0
}
}<button @click="count++">1 추가</button>
<p>숫자 값은: {{ count }}</p>메서드 핸들러
대부분의 이벤트 핸들러는 복잡할 것이며, 인라인 핸들러에서는 한계가 있다.
data() {
return {
name: 'Vue.js'
}
},
methods: {
greet(event) {
// `this`는 메서드가 활성화된 현재 인스턴스를 가리킵니다.
alert(`안녕 ${this.name}!`)
// 'event'는 네이티브 DOM 이벤트 객체입니다.
if (event) {
alert(event.target.tagName)
}
}
}<!-- `greet`는 위에서 정의한 메서드의 이름입니다. -->
<button @click="greet">환영하기</button>인라인에서 메서드 호출하기
인라인에서 메서드롤 호출할 수도 있다. 이 때 이벤트 객체 대신 사용자 지정 인자를 전달할 수 있다.
methods: {
say(message) {
alert(message)
}
}<button @click="say('hello')">안녕 버튼</button>
<button @click="say('bye')">잘가 버튼</button>이 때 event 객체도 같이 전달하고 싶으면 $event 키워드를 사용하거나 화살표 함수를 사용하면 된다.
이벤트 객체의 순서는 상관이 없다.
<!-- 특수한 키워드인 $event 사용 -->
<button @click="warn('아직 양식을 제출할 수 없습니다.', $event)">
제출하기
</button>
<!-- 인라인 화살표 함수 사용 -->
<button @click="(event) => warn('아직 양식을 제출할 수 없습니다.', event)">
제출하기
</button>methods: {
warn(message, event) {
// 이제 네이티브 이벤트 객체에 접근할 수 있습니다.
if (event) {
event.preventDefault()
}
alert(message)
}
}복합 이벤트 핸들러
인라인으로 작성하고 ; 또는 ,으로 구분한다. (,는 3 버전)
이벤트 수식어
event.preventDefault() 또는 event.stopPropagation() 등의 메소드를 좀 더 간단하게 사용할 수 있다.
수식어는 점으로 된 접미사다.
- .stop: 이벤트 전파를 중지
- .prevent: 기본 동작을 해제
- .capture: 이벤트 캡처링을 적용
- .self: e.currentTarget과 e.target이 같을 때만 실행
- .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>
<!-- 이벤트 리스너를 추가할 때 캡처 모드 사용 -->
<!-- 내부 엘리먼트에서 클릭 이벤트 핸들러가 실행되기 전에, 여기에서 먼저 핸들러가 실행됩니다. -->
<div @click.capture="doThis">...</div>
<!-- 클릭 이벤트는 단 한 번만 실행됩니다. -->
<a @click.once="doThis"></a>
<!-- 핸들러 내 `event.preventDefault()`가 포함되었더라도 -->
<!-- 스크롤 이벤트의 기본 동작(스크롤)이 발생합니다. -->
<div @scroll.passive="onScroll">...</div>입력키 수식어
키보드 이벤트를 수신할 때, 특정 키를 확인해야 하는 경우가 많기 때문에, 키 수식어를 지원한다.
- .enter
- .tab
- .delete ("Delete" 및 "Backspace" 키 모두 캡처)
- .esc
- .space
- .up
- .down
- .left
- .right
<!-- `key`가 `Enter`일 때만 `submit`을 호출합니다 -->
<input @keyup.enter="submit" />KeyboardEvent.key를 통해 유효한 입력키 이름을 kebab-case로 변환하여 수식어로 사용할 수 있다.
<input @keyup.page-down="onPageDown" />시스템 입력키 수식어
마우스 또는 키보드 이벤트 리스너는 아래 수식어를 사용하여, 해당 입력키를 누를 때만 트리거 되도록 할 수 있다.
- .ctrl
- .alt
- .shift
- .meta
<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">시작하기</div>.meta 수식어는 Keyup에서는 동작하지 않는다. Keydown은 가능
.exact 수식어
.exact 수식어를 사용하면 이벤트를 트리거하는 데 필요한 시스템 수식어의 정확한 조합을 제어할 수 있다.
수식어를 제외한 모든 조합은 이벤트가 발생하지 않는다.
<!-- alt + 아래키만 가능 -->
<input @Keydown.alt.arrow-down.exact="log" />
<!-- alt + 클릭만 가능 -->
<button @click.alt.exact="log">Click!</button>마우스 버튼 수식어
특정 마우스 버튼에 의해 이벤트가 트리거 되도록 제한하고 싶을 때 사용한다.
- .left: 마우스 왼쪽 버튼
- .right: 마우스 오른쪽 버튼
- .middle: 마우스 중간 버튼
<button @click.left="log">Click!</button>
<button @click.middle="log">Click!</button>
<button @click.right="log">Click!</button>HTML로 된 리스너를 사용하는 이유
- HTML 템플릿을 간단히 하여 JavaScript 코드 내에서 핸들러 함수 구현을 찾는 것이 더 쉽다.
- JavaScript에서 이벤트 리스너를 수동으로 연결할 필요가 없으므로 ViewModel 코드는 순수 로직과 DOM이 필요하지 않다. 따라서 테스트가 쉬워진다.
- ViewModel이 파기되면 모든 이벤트 리스너가 자동으로 제거된다. 따라서 이벤트 제거에 대한 걱정이 필요 없다.
