티스토리 뷰
✔️ 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