[Vue.js] Vue 메서드 핸들러 활용하기

<template>
  <div>
    <!-- 예제 1: 버튼을 클릭하면 count가 증가하는 예제 -->
    <button @click="increaseCount">1 추가</button>
    <p>현재 count: {{ count }}</p>

    <!-- 예제 2: 버튼을 클릭하면 메시지가 변경되는 예제 -->
    <button @click="changeMessage">메시지 변경</button>
    <p>{{ message }}</p>

    <!-- 예제 3: 입력 필드에 값을 입력하면 결과가 반영되는 예제 -->
    <input type="text" v-model="inputText" />
    <p>입력한 텍스트: {{ inputText }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      message: "기본 메시지",
      inputText: "",
    };
  },
  methods: {
    increaseCount() {
      this.count++;
    },
    changeMessage() {
      this.message = "새로운 메시지";
    },
  },
};
</script>

Vue에서 메서드 핸들러는 v-on 디렉티브를 사용하여 이벤트를 처리하는 방식입니다. 이를 통해 복잡한 이벤트 논리를 메서드에 구현하고, 인라인 핸들러로는 처리하기 어려운 경우에 활용할 수 있습니다.

1. 예제 1: increaseCount 메서드는 버튼을 클릭할 때마다 count 데이터를 증가시킵니다. 메서드를 통해 이벤트 핸들러의 로직을 간결하게 구현할 수 있습니다.

2. 예제 2: changeMessage 메서드는 버튼을 클릭하면 message 데이터를 변경합니다. 이를 통해 버튼을 클릭할 때마다 다양한 동작을 수행할 수 있습니다.

3. 예제 3: 입력 필드에 값을 입력하면 inputText 데이터가 업데이트됩니다. 메서드를 사용하여 입력 값에 따라 다른 동작을 수행할 수 있습니다.

메서드 핸들러를 사용하면 코드의 재사용성과 유지보수성이 높아지며, 컴포넌트의 로직을 더욱 체계적으로 관리할 수 있습니다. Vue의 강력한 기능 중 하나로 메서드 핸들러를 적극적으로 활용할 수 있습니다.