[Vue.js] @ 사용과 생략에 관하여 / @click과 v-on:click의 차이 / 이벤트 핸들링

Vue는 기본문법과 그 문법을 단축하여 표현할 수 있다.
아래는 공식 사이트에 존재하는 예제이다.

◽ 표현법

// 기본문법
<a v-on:click=“method()”></a>

// 단축표현
<a @click=“method()”></a>

// 동적 argument의 단축표현
<a @[event]=“method()”></a>

 

 

◽ 이벤트 여러개 할당하기

// @click=[method1(), method2()] 이렇게 써준다.
<div @click=[method1(), method2()]></div>

 

 

◽ 이벤트 핸들링
.stop: 클릭 이벤트 전파를 멈춤 (버블링 제어)
.prevent: 기본 이벤트가 자동실행되는 것을 중지
.capture
.self: 발생 단계에서만 이벤트를 발생시킴
.once: 이벤트를 한번만 실행
.passive

 

 

◽  체이닝(chaining) : 이벤트 핸들링의 메소드를 조합할 수 있다.
@click.prevent.self: 클릭 이벤트 발생 시 모든 엘리먼트의 기본동작을 막는다.
@click.self.prevent: 해당 엘리먼트 자체의 기본 동작만 막는다.
@click.stop.prevent

 

 

 

출처 및 참조

이벤트 핸들링 — Vue.js

 

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.