1. v-on
디렉티브를 사용하여 DOM 이벤트를 실행할 때 사용 한다.
<v-btn v-on:click="counter += 1">Add 1<v-btn>v-on 을 대체해서 @을 사용할 수 있다.
<v-btn @click="counter += 1">Add 1<v-btn>
2. 이벤트 전파 이벤트 전파로 원하는 이벤트 외에 다른 이벤트까지 발생하는 상황 발생할 경우
이벤트 핸들러 내부에서 event.preventDefault() 또는 event.stopPropagation()를 호출하는 것은 매우 보편적인 일이고,
event.preventDefault() : 기본 이벤트의 자동 실행을 중지시킴
event.stopPropagation() : 이벤트의 전파를 막음
Vue 에서는 다음과 같이 이용되고 있다.
<v-btn @click.prevent="counter += 1">Add 1<v-btn>
prevent 외에 다른 수식어는 다음과 같다.
@click.stop : 이벤트 전파 중단시킴@click.capture : 이벤트 버블링 우선 순위 변경 (즉, 내부 엘리먼트를 대상으로 하는 이벤트가 해당 엘리먼트에서 처리되기 전에 여기서 처리)@click.self : 자신으로 부터 출발하는 이벤트일때만 호출하고 싶을 때@click.once : 이벤트가 한번만 실행 (2.1.4 부터 사용 가능)@scroll.passive : 스크롤의 기본 이벤트를 취소 (2.3.0 부터 시용 가능)@keyup.13: 와 같은 키이벤트도 있음 (13은 키코드의 수식어 이다)
또한 수식어는 다음과 같이 체이닝하여 사용 가능하다.
<v-btn @click.prevent.stop="counter += 1">Add 1<v-btn>@click.prevent.self 를 사용하면 클릭 이벤트가 발생 했을 때 모든 엘리먼트의 기본 동작을 막을 수 있지만,
@click.self.prevent 는 엘리먼트 자체의 기본 동작만 막을 수 있다.
참고
