Vue.js 이벤트 핸들링
@eventName="Do something here"
v-on 혹은 @ 디렉티브를 사용하여 DOM 이벤트를 듣고 트리거 될 때 JavaScript를 실행할 수 있습니다.
아레 예제는 전체 코드입니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
<div>
<p>클릭 이벤트 발생 횟수 : </p>
<button @click="clickCount++">클릭이벤트 발생</button>
</div>
<div>
<p>마우스 오버 이벤트 발생 횟수 : </p>
<button @mouseover="mouseOverCount++">마우스 오버 이벤트 발생</button>
</div>
<div>
<p>글자 입력 횟수 : </p>
<input type="text" @input="inputTextCount ++" />
</div>
</template>
마우스 클릭 이벤트 핸들러
1
2
3
4
<div>
<p>클릭 이벤트 발생 횟수 : </p>
<button @click="clickCount++">클릭이벤트 발생</button>
</div>
마우스 오버 이벤트 핸들러
1
2
3
4
<div>
<p>마우스 오버 이벤트 발생 횟수 : </p>
<button @mouseover="mouseOverCount++">마우스 오버 이벤트 발생</button>
</div>
키보드 입력 이벤트 핸들러
1
2
3
4
<div>
<p>글자 입력 횟수 : </p>
<input type="text" @input="inputTextCount ++" />
</div>
요약
위에서 소개한 3가지 예제 이외에도 Vue.js에서는 다양한 이벤트 핸들러를 사용할 수 있습니다.
Vue.js에서는 DOM에서 변경된 요소가 있으면 자동으로 다시 랜더링되기 때문에 이를 활용하여 간결하고 쉽게 동적 이벤트를 컨트롤할 수 있습니다.