이벤트 핸들링
이벤트 청취
v-on 디렉티브를 사용하여 DOM 이벤트를 듣고 트리거 될 때 JavaScript를 실행할 수 있다.
<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})메소드 이벤트 핸들러
복잡한 로직 사용 시, 이벤트 핸들러에 메소드를 사용한다.
<div id="example-2">
<!-- `greet` 는 아래 정의되어 있는 메소드명 -->
<button v-on:click="greet">Greet</button>
</div>var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// `methods` 객체 안에 메소드 정의
methods: {
greet: function (event) {
// 메소드 내부에서는 `this`가 Vue 인스턴스를 가리킴
alert('Hello ' + this.name + '!')
// `event`는 네이티브 DOM 이벤트
if (event) {
alert(event.target.tagName) // output : button
}
}
}
})
// Javascript를 이용한 메소드 호출도 가능
example2.greet() // output : 'Hello Vue.js!'인라인 메소드 핸들러
메소드 이름을 직접 바인딩 하지 않고, 인라인 JavaScript 구문에 메소드를 사용한다.
<div id="example-3">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
</div>new Vue({
el: '#example-3',
methods: {
say: function (message) {
alert(message)
}
}
})때로는 인라인 메소드 핸들러에서 원본 DOM 이벤트에 엑세스 해야할 수 도 있다.
특별한 $event 변수를 사용해 메소드에 전달한다.
<button v-on:click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>// ...
methods: {
warn: function (message, event) {
// now we have access to the native event
if (event) {
event.preventDefault()
}
alert(message)
}
}이벤트 수식어
Vue는 v-on 이벤트에 이벤트 수식어(점으로 표시된 접미사)를 제공한다.
이벤트 수식어를 사용하여 메소드 내에서 event.preventDefault() 또는 event.stopPropagation()와 같은
DOM 이벤트 세부 사항을 처리를 하지 않고, 데이터 로직에 대한 메소드만 사용할 수 있게 해준다.
.stop: 전파 중단.prevent: preventDefault.capture: 이벤트 캡처.self: 해당 엘리먼트에서만.once: 한번만.passive
<!-- 클릭 이벤트 전파 중단 -->
<a v-on:click.stop="doThis"></a>
<!-- 제출 이벤트가 페이지를 다시 로드 하지 않음 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 수식어는 체이닝 가능 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 수식어만 사용 가능 -->
<form v-on:submit.prevent></form>
<!-- 이벤트 리스너를 추가할 때 캡처 모드 사용 -->
<!-- 즉, 내부 엘리먼트를 대상으로 하는 이벤트가 해당 엘리먼드에서 처리되기 전, 여기서 처리 -->
<div v-on:click.capture="doThis">...</div>
<!-- event.target이 엘리먼트 자체인 경우에만 트리거 처리 -->
<!-- 자식 엘리먼트 안 됨 -->
<div v-on:click.self="doThat">...</div>
<!-- 클릭 이벤트는 최대 한번만 트리거 됨 -->
<a v-on:click.once="doThis"></a>
<!-- 스크롤 기본 이벤트를 취소할 수 없도록 함 -->
<div v-on:scroll.passive="onScroll">...</div>키 수식어
키보드 이벤트를 청취할 때, 종종 공통 키코드를 확인해야 한다.
Vue는 키 이벤트를 수신할 때 v-on에 대한 키 수식어를 추가할 수 있다.
.enter,.tab,.delete(captures both “Delete” and “Backspace” keys),.esc,.space,.up,.down,.left,.right
<!-- `Enter`로만 `vm.submit()`을 할 수 있음 -->
<input v-on:keyup.enter="submit">시스템 수식어 키 목록
다음 수식어를 사용해 해당 수식어 키가 눌러진 경우에만, 마우스 또는 키보드 이벤트 리스너를 트리거 할 수 있다.
.ctrl,.alt,.shift,.meta
<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>시스템 수식어 키 목록 - .exact 수식어
.exact 수식어는 다른 시스템 수식어와 조합해 그 핸들러가 실행되기 위해 정확한 조합이 눌려야 한다.
<!-- Alt 또는 Shift와 함께 눌린 경우에도 실행 -->
<button v-on:click.ctrl="onClick">A</button>
<!-- Ctrl 키만 눌려있을 때만 실행 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>
<!-- 시스템 키가 눌리지 않은 상태인 경우에만 작동 -->
<button v-on:click.exact="onClick">A</button>시스템 수식어 키 목록 - 마우스 버튼 수식어
특정 아무스 버튼에 의해 트리거 된 이벤트로 핸들러를 제한한다.
.left,.right,.middle
HTML로 된 리스너를 사용하는 이유
모든 뷰 핸들러 함수와 표현식은 현재 뷰 처리하는 ViewModel에 엄격히 바인딩 되기 때문에 유지보수가 쉽다.
1. HTML 템플릿을 간단히 하여 JavaScript 코드 내에서 핸들러 함수 구현을 찾는게 보다 쉽다.
2. JavaScript에서 이벤트 리스너를 수동으로 연결할 필요가 없어 ViewModel 코드는 순수 로직과 DOM이 필요하지 않아 테스트가 쉽다.
3. ViewModel이 파기되면 모든 이벤트 리스너가 자동으로 제거 되어 이벤트 제거를 따로 해주지 않아도 된다.
