[Vue.js] Vue 이벤트 핸들러에 수식어 연결하기

<template>
  <div>
    <!-- 예제 1: 클릭 이벤트를 처리하면서 이벤트 전파를 중지하고 페이지 리로드를 방지하는 메서드 호출 -->
    <a @click.stop.prevent="doThat">예제 1 실행</a>

    <!-- 예제 2: 마우스 오버 이벤트를 처리하면서 이벤트 전파를 중지하고 페이지 리로드를 방지하는 메서드 호출 -->
    <a @mouseover.stop.prevent="doThis">예제 2 실행</a>

    <!-- 예제 3: 입력 이벤트를 처리하면서 이벤트 전파를 중지하고 페이지 리로드를 방지하는 메서드 호출 -->
    <input type="text" @input.stop.prevent="doSomething" />
  </div>
</template>

<script>
export default {
  methods: {
    doThat() {
      console.log('doThat 메서드가 호출됨');
    },
    doThis() {
      console.log('doThis 메서드가 호출됨');
    },
    doSomething() {
      console.log('doSomething 메서드가 호출됨');
    },
  },
};
</script>

Vue에서는 이벤트 핸들러에 여러 수식어를 연결하여 다양한 동작을 수행할 수 있습니다. .stop, .prevent 등의 수식어를 사용하여 클릭 이벤트의 전파를 중지하고 페이지 리로드를 방지하는 등의 동작을 수행할 수 있습니다.

1. 예제 1: <a> 요소를 클릭하면 doThat 메서드가 호출되고, 클릭 이벤트의 전파가 중지되며 페이지 리로드가 방지됩니다.

2. 예제 2: <a> 요소에 마우스를 올리면 doThis 메서드가 호출되고, 마우스 오버 이벤트의 전파가 중지되며 페이지 리로드가 방지됩니다.

3. 예제 3: 입력 필드에 값을 입력하면 doSomething 메서드가 호출되고, 입력 이벤트의 전파가 중지되며 페이지 리로드가 방지됩니다.

이렇게 Vue에서 이벤트 핸들러에 수식어를 연결하여 다양한 동작을 처리할 수 있습니다. 이를 통해 특정 이벤트에 대한 처리를 더욱 정교하게 제어할 수 있습니다.