[Vue.js] Vue 이벤트 수식어만 사용하기

<template>
  <div>
    <!-- 예제 1: 폼 제출 시 페이지 리로드 방지 -->
    <form @submit.prevent></form>

    <!-- 예제 2: 클릭 시 이벤트 전파 중지 -->
    <button @click.stop>클릭</button>

    <!-- 예제 3: 스크롤 시 기본 스크롤 동작 방지 -->
    <div @scroll.passive>내용</div>
  </div>
</template>

<script>
export default {
};
</script>

Vue에서는 이벤트 핸들러 없이도 이벤트 수식어만을 사용하여 특정 동작을 수행할 수 있습니다. 이를 통해 간단한 동작에 대해서도 코드를 간결하게 유지할 수 있습니다.

1. 예제 1: 폼 제출 이벤트인 submit에 .prevent 수식어만 사용하여 페이지의 리로드를 방지합니다. 이를 통해 SPA에서 폼을 제출할 때 페이지를 새로고침하지 않습니다.

2. 예제 2: 클릭 이벤트에 .stop 수식어를 사용하여 이벤트의 전파를 중지합니다. 이를 통해 해당 요소에서의 클릭 동작만을 처리하고 부모 요소로의 이벤트 전파를 막습니다.

3. 예제 3: 스크롤 이벤트에 .passive 수식어를 사용하여 기본 스크롤 동작을 방지합니다. 이를 통해 스크롤 이벤트를 처리할 때 스크롤 동작이 더 부드럽고 효율적으로 처리됩니다.

Vue의 이벤트 수식어를 사용하면 간단한 동작에 대해서도 코드를 간결하게 작성할 수 있으며, 필요한 기능을 간편하게 제어할 수 있습니다.