이벤트 리스너

v-on지시문을 사용하여 DOM 이벤트를 구독할 수 있습니다.

<button v-on:click="increment">{{ count }}</button>

자주 사용되기 때문에 v-on에는 약어가 있습니다.

<button @click="increment">{{ count }}</button>

여기서는 에서 increment선언 script setup 된 함수를 참조합니다.

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

함수 내에서 ref를 변경하여 구성 요소의 상태를 업데이트할 수 있습니다.

이벤트 핸들러는 인라인 표현식을 사용할 수도 있으며 공통 작업을 장식자로 단순화할 수 있습니다. 이러한 세부 사항은 가이드 - 이벤트 핸들링 에서 다룹니다.

그럼, 스스로 함수를 구현해, 를 사용해 버튼에 바인드 해 봅시다.increment v-on

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">count is: {{ count }}</button>
</template>