뷰 애플리케이션에서 버튼 요소에 클릭 이벤트를 연결하고 싶다면 다음과 같이 코드를 작성합니다.

src/App.vue

<script>
export default {

  methods: {
    clickHandler() { // ES6의 단축 메서드명으로 표기
      alert('click!');
    },
  },

}
</script>
<template>

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

</template>

예제 코드는 <button> 태그를 사용한 요소에 v-on 디렉티브로 클릭(click) 이벤트를 연결합니다. 해당 요소에서 클릭 이벤트가 발생하면 clickHandler() 메서드가 호출됩니다. 코드를 실행해 화면에 보이는 [클릭] 버튼을 누르면 다음과 같은 결과를 볼 수 있습니다.