티스토리 뷰

Front-end/Vuejs

[Vuejs] Vue Event

happii 2022. 5. 10. 18:47

 

✔️ 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를 적용할 수 있다.

 

'Front-end > Vuejs' 카테고리의 다른 글

[Vuejs] 컴포넌트 (Component)  (0) 2022.05.11
최근에 올라온 글
Total
Today
Yesterday