[Vuejs] Vue Event

 

✔️ Vue event.

▪️ DOM Event를 청취하기 위해 v-on directive 사용.

▪️ inline event handling.

▪️ method를 이용한 event handling.

 

✔️ Vue event 청취 : v-on

▪️ v-on directive를 사용하여 DOM 이벤트를 듣고 트리거 될 때 JavaScript를 실행할 수 있다.

 

 

✔️ Method Event Handler.

▪️ 이벤트 발생시 처리 로직을 v-on에 넣기 힘들다. 이때문에 v-on에서는 이벤트 발생시 처리해야 하는 method의 이름을 받아 처리한다.

이벤트 메서드에 함수만 작성하게 된다면, 내부적으로 event 객체를 넘겨준다.

 

 

✔️ 이벤트 수식어 (Event Modifier).

수식어는 점으로 표시된 접미사이다.

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

<!-- 클릭 이벤트는 최대 한번만 트리거 됩니다. -->
<a v-on:click.once="doThis"></a>

<!-- 스크롤의 기본 이벤트를 취소할 수 없습니다. -->
<div v-on:scroll.passive="onScroll">...</div>

네이티브 DOM 이벤트에 독점적인 다른 수식어와 달리,.once 수식어는 컴포넌트 이벤트에서도 사용할 수 있다.

 

Vue는 addEventListener의 passive option에 해당하는 .passive 수식어 또한 제공한다.

추가로, Vue는 .passive 수식어를 제공한다. 특히 모바일 환경에서 성능향상에 도움이 된다. 예를 들어, 브라우저는 핸들러가 event.preventDefault()를 호출할지 알지 못하므로 프로세스가 완료된 후 스크롤한다. .passive 수식어는 이 이벤트가 기본 동작을 멈추지 않는다는 것을 브라우저에 알릴 수 있다.

 

 

✔️ 키 수식어 (Key Modifier).

Vue는 키 이벤트를 수신할 때 v-on에 대한 키 수식어를 추가할 수 있다.

• .enter
• .tab
• .delete (“Delete” 와 “Backspace” 키 모두를 캡처합니다)
• .esc
• .space
• .up
• .down
• .left
• .right

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

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

 

 

 

✔️ CSS Class Binding.

▪️ element의 class와 style을 변경한다.

▪️ v-bind:class는 조건에 따라 class를 적용할 수 있다.