v-on @ 표현식 truthy 기반 이벤트 관리 속성

v-on

타입

Function | Inline Statement | Object (without argument) : truthy를 판단해줄 수 있는 값

설명

🔖 표현식의 truthy 값을 기반으로 엘리먼트의 가시성을 전환 DOM 이벤트를 듣고, 트리거 될때 Javascript를 실행

이벤트

이벤트	설명
@click="event"	클릭했을 때 실행
@dbclick="event"	더블 클릭했을 때 실행
@change="event"	요소가 변경될 때 실행
@mouseover="event"	마우스의 포인트가 요소 위로 올라왔을 때 실행
@submit="event"	form이 제출될 때 실행
@reset="event"	form이 재설정될 때 실행
@select="event"	select 값이 선택되었을 때 실행
@focus="event"	태그에 포커스가 있을 때 실행
@keyup="event"	키보드의 키를 놓았을 때 실행
@keydown="event"	키보드의 키를 눌렀을 때 실행
@keypress="event"	키보드의 키를 눌렀다가 놓았을 때 실행

수식어 (접미사)

체이닝이 가능하고, 단순히 수식어만 사용 가능

수식어	설명
.stop	클릭 이벤트 전파 중단
.prevent	submit 이벤트가 페이지를 다시 로드 X
.capture	이벤트 리스너를 추가할 때, 캡쳐모드를 사용
.self	event.target이 엘리먼트 자체인 경우에만 트리거를 처리
.{keyAlias}	이벤트가 특정 키에 대해서만 트리거 됨.
.once	이벤트가 한 번만 트리거 됨(일회용처럼).
.passive	{ passive: true } 옵션으로 DOM 이벤트를 등록.

마우스 수식어

• @click과 같이 사용

수식어	설명
.left	마우스 왼쪽 버튼으로만 이벤트가 트리거 됨.
.right	마우스 오른쪽 버튼으로만 이벤트가 트리거 됨.
.middle	마우스 중앙(힐 클릭) 버튼으로만 이벤트가 트리거 됨.

키보드 수식어

수식어	설명
.enter	엔터키
.tab	탭키
.delete	delete키
.esc	esc키
.space	space키
.up	위쪽 방향키
.down	아래쪽 방항키

시스템 수식어

해당 수식어 키가 눌러진 경우에만 마우스 또는 키보드 이벤트 리스너를 트리거 가능

수식어	설명
.ctrl	ctrl키
.alt	alt키
.shift	shift키
.exact	다른 시스템 수식어와 조합해 그 핸들러가 실행되기 위해 정확한 조합을 눌러야 하는 것을 표시

<!-- Alt + C -->
<input @keyup.alt.67="clear"><!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

세부사항

• v-show는 인라인 스타일을 통해 display CSS 속성을 설정
• 엘리먼트가 표시될 때 초기 display 값을 설정하려고 시도
• 또한 조건이 변경될 때 전환을 트리거

사용법

<!-- 메서드 핸들러 -->
<button v-on:click="doThis"></button>

<!-- 동적 이벤트 -->
<button v-on:[event]="doThis"></button>

<!-- 인라인 표현식 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 단축 문법 -->
<button @click="doThis"></button>

<!-- 단축 문법 동적 이벤트 -->
<button @[event]="doThis"></button>

<!-- 전파 중지 -->
<button @click.stop="doThis"></button>

<!-- event.preventDefault() 작동 -->
<button @click.prevent="doThis"></button>

<!-- 표현식 없이 event.preventDefault()만 사용 -->
<form @submit.prevent></form>

<!-- 수식어 이어서 사용 -->
<button @click.stop.prevent="doThis"></button>

<!-- 키 별칭을 수식어로 사용 -->
<input @keyup.enter="onEnter" />

<!-- 클릭 이벤트 단 한 번만 트리거 -->
<button v-on:click.once="doThis"></button>

<!-- 객체 문법 -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

<MyComponent @my-event="handleThis" />

<!-- 인라인 표현식 -->
<MyComponent @my-event="handleThis(123, $event)" />