그림 3-21 실행결과

한 번 클릭이 아니라 더블 클릭했을 때 이벤트가 발생하게 하고 싶으면 어떻게 해야 할까요? 이때는 이벤트 타입을 더블 클릭(dblclick)으로 지정하면 됩니다. 간단하죠?

<template>
  <button type="button" v-on:dblclick="clickHandler">클릭</button>
</template>

v-on 디렉티브는 자주 사용하는 디렉티브여서 축약형을 지원합니다. v-on: 대신에 @로 간단하게 작성하면 됩니다.

<template>

  <button type="button" @dblclick="clickHandler">클릭</button>

</template>