v-on으로 이벤트를 처리하고 의도가 분명한 수식어를 사용합니다.
@click은 v-on:click의 축약이며 핸들러에 이벤트나 인수를 전달할 수 있습니다. .prevent, .stop, 키 수식어는 브라우저 동작을 템플릿에서 명시합니다.
업무 로직은 템플릿의 긴 인라인 식보다 이름 있는 함수로 이동합니다.
.stop을 습관적으로 쓰면 상위 이벤트 위임을 막으므로 실제 요구가 있을 때만 사용합니다.
@click="save()" 자체는 가능하지만 렌더 시 호출되는 :onClick="save()" 같은 다른 문법과 혼동하지 마세요.
로컬 프로젝트에서 확인해보세요Enter 키로도 저장되도록 @keyup.enter를 추가하세요.
<script setup>
import { ref } from "vue";
const message = ref("저장 전");
function save() {
message.value = "저장했습니다";
}
</script>
<template>
<main>
<button @click="save">저장</button>
<p aria-live="polite">{{ message }}</p>
</main>
</template>