[vue/js] Vue 의 html 속성에 이벤트 함수 연결하기

Vue의 이벤트 리스너

해당 포스팅은 Vue 의 공식문서를 참조하여 작성하였습니다.

Vue에서 특정 버튼을 눌렀을 때, 특정 함수가 발동되어야 하는 경우가 있습니다. 이때, 사용하는것이 v-on 디렉티브 입니다. 해당 속성 역시, 많이 사용되므로 축약이 가능합니다.

기본형

<button v-on:click="increment">9</button>

축약형

<button @click="increment">9</button>

여기서 보이는 ref()는 react의 useState()와 같습니다. 변수의 상태를 저장하고, 변수의 값이 변경되면, 화면을 리렌더링하여 반영합니다.

이벤트 리스너를 사용하여 이벤트를 매핑하고, 버튼을 누를때 마다 count의 값이 증가하는 예제입니다.

<script setup>
import { ref } from 'vue';
const count = ref(0);

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

<template>
    <button v-on:click="increase">9</button>
    <button @click="increase">9</button>
</template>

<style></style>