[Vue] Event

DOM 이벤트를 듣기 위해 v-on directive를 사용한다. 이벤트가 트리거될 때 javascript를 실행한다. 

 

1. method 이름

v-on에 이벤트 발생 시 처리해야하는 method의 이름을 받아서 처리한다.

<button v-on:click='메소드이름'>클릭</button>

 

2. inline javascript

메소드 이름을 직접 바인딩하는 대신 인라인 javascript 구문에 메소드를 사용할 수 있다. 

<button v-on:click='counter+=1'>클릭</button>

 

3. $event

원본 DOM 이벤트에 엑세스해야하는 경우 특별한 $event 변수를 사용해 메소드에 전달한다. 

<button v-on:click="greet($event, '홍길동')">Greet</button>

<!--중략-->
<!--vue instance 내부 method-->
 greet: function (e, msg) {
   if (e) e.preventDefault();
   alert('Hello ' + msg + '!');
}

 

4. 이벤트 수식어

$event로 DOM이벤트에 접근할 수 있지만, method는 DOM의 이벤트를 처리하는 것보다 data 처리를 위한 로직만 구현하는 것을 권장한다. 따라서 v-on 이벤트에 이벤트 수식어를 사용할 수 있다.

이벤트 수식어는 여러개 체이닝이 가능하다. 단순히 수식어만으로 사용할 수 있다.

<button v-on:click.stop="메소드이름">클릭</button>
<form v-on:submit.prevent></form>

이벤트 수식어 종류

.stop	이벤트 전파를 중단한다.
.prevent	submit 등 기본이벤트의 자동 실행을 중단한다.
.capture	내부 엘리먼트를 대상으로 하는 이벤트가 해당 엘리먼트에서 처리되기 전에 먼저 처리한다.
.self	event.target이 엘리먼트 자체인 경우만 트리거를 처리한다. 자식 엘리먼트에는 불가능하다.
.once	한번만 호출된다.
.passive	true일 경우, 절대 preventDefault()를 호출하지 않을 것임을 나타낸다.

 

5. 키 수식어

v-on에 대한 키 수식어를 추가할 수 있다.

<button v-on:keyup.enter="메소드이름">클릭</button>

키 수식어 종류

.enter (.13과 동일)

.tab

.delete (delete 키와 backspace 키 모두에서 호출된다.)

.esc

.space

.up

.down

.left

.right

사용자 지정 키 수식어 별칭

전역 config.keyCodes 객체를 통해 사용자 지정 키 수식어 별칭을 지정할 수 있다.

// `v-on:keyup.f1`을 사용할 수 있다.
Vue.config.keyCodes.f1 = 112

시스템 수식어

2.1.x버전부터 추가되었다. 다음 수식어를 사용해 해당 수식어 키가 눌러진 경우에만 마우스 또는 키보드 이벤트 리스너를 트리거 할 수 있다.

.ctrl

.alt

.shift

.meta

 

6. ref, $refs

뷰에서는 $refs 속성을 이용해 DOM에 접근할 수 있다. 그러나 뷰의 가장 중요한 목적 중 하나는 개발자가 DOM을 다루지 않게 하는 것이므로, 되도록 ref를 사용하는 것을 피하는 것이 좋다.

<input type="text" v-model="변수명" ref="ref변수명"/>
 
<!-- 중략 -->
 
<!-- 뷰 인스턴스 내부 -->
console.log(this.$refs.ref변수명.value);