Vue event 수식어

Vue에서 이벤트를 다룰 때 v-on 디렉티브를 사용합니다.
이번 포스트는 v-on 디렉티브에 제공되는 수식어(modifier)에 대해 자세히 알아보겠습니다.

Vue에서 preventDefault()란...

위 캡처는 vue 공식문서 내 이벤트 수식어를 소개하는 문단입니다.

JS로 프론트 개발을 하다보면 event를 다룰 일이 많고
그에따라 preventDefault(), stopPropagation()과 같은 event method 도
많이 사용을 했었습니다.
그렇지만 vue로 개발을 하면 vue 가이드에서 제공하는 수식어를 활용해 볼 필요성을 느꼈고
제가 이벤트 수식어를 찾아본 이유와 정확히 일치하는 문단이어서 발췌해 봤습니다.

Modifiers

Event Modifiers

Key Modifiers

.enter
.tab
.esc
.space 등

아래와 같이 키 이벤트를 수신할 때.enter 을 붙여
keycode가 enter일 때만 sumbit()을 호출할 수 있습니다.

<input v-on:keyup.enter="submit">

Mouse Modifiers

.left
.right
.middle

Input Modifiers

.native

하위 컴포넌트에서 루트 엘리먼트의 네이티브 이벤트를 받기 위해 사용합니다.

결론

Vue에서 이벤트를 어떻게 다루는지 알아보았습니다.
Vue는 이벤트 리스너가 HTML에 있기 때문에 JS에서 수동으로 이벤트를
연결할 필요가 없음으로 테스트가 쉬워집니다.
더하여 오늘 알아본 이벤트 수식어를 잘 활용하여 이벤트 핸들링에
대한 이슈(버블링, 캡처링 등)도 훨씬 간결하게 해결할 수 있는데
이벤트 및 핸들링에 대해서는 프론트 개발자라면 필수로 이해하여야 하기 때문에
잊지않도록 체득하여 정리하도록 하겠습니다.

참고: MDN 이벤트에 대한 소개
https://developer.mozilla.org/ko/docs/Learn/JavaScript/Building_blocks/Events