Home Vue.js 이벤트 핸들링
Post
Cancel

Vue.js 이벤트 핸들링

Vue.js 이벤트 핸들링

@eventName="Do something here"

v-on 혹은 @ 디렉티브를 사용하여 DOM 이벤트를 듣고 트리거 될 때 JavaScript를 실행할 수 있습니다.

Screen Shot 2021-08-26 at 11.47.36

아레 예제는 전체 코드입니다.

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>


마우스 클릭 이벤트 핸들러

2021-08-26 11.47.56

1
2
3
4
<div>
  <p>클릭 이벤트 발생 횟수 : </p>
  <button @click="clickCount++">클릭이벤트 발생</button>
</div>

마우스 오버 이벤트 핸들러

2021-08-26 11.48.29

1
2
3
4
<div>
  <p>마우스 오버 이벤트 발생 횟수 : </p>
  <button @mouseover="mouseOverCount++">마우스 오버 이벤트 발생</button>
</div>

키보드 입력 이벤트 핸들러

2021-08-26 11.57.59

1
2
3
4
<div>
  <p>글자 입력 횟수 : </p>
  <input type="text" @input="inputTextCount ++" />
</div>

요약

위에서 소개한 3가지 예제 이외에도 Vue.js에서는 다양한 이벤트 핸들러를 사용할 수 있습니다.
Vue.js에서는 DOM에서 변경된 요소가 있으면 자동으로 다시 랜더링되기 때문에 이를 활용하여 간결하고 쉽게 동적 이벤트를 컨트롤할 수 있습니다.

This post is licensed under CC BY 4.0 by the author.