[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에서 인라인 핸들러는 이벤트 핸들러를 직접 HTML 요소의 속성으로 지정하여 사용하는 방식입니다. 위의 예제에서는 @click 디렉티브를 사용하여 클릭 이벤트에 대한 핸들러를 정의했습니다.

1. 예제 1: 버튼을 클릭하면 increaseCount 메서드가 호출되어 count 데이터가 증가합니다. 이렇게 하면 간단한 카운터 기능을 구현할 수 있습니다.

2. 예제 2: 또 다른 버튼을 클릭하면 changeMessage 메서드가 호출되어 message 데이터가 변경됩니다. 이를 통해 버튼을 클릭할 때마다 메시지가 업데이트되는 기능을 확인할 수 있습니다.

3. 예제 3: 입력 필드에 값을 입력하면 inputText 데이터가 실시간으로 업데이트됩니다. Vue의 양방향 데이터 바인딩을 활용하여 입력 필드와 데이터 사이의 동기화를 간편하게 구현할 수 있습니다.

이처럼 Vue의 인라인 핸들러를 사용하면 간편하게 이벤트를 처리하고 UI를 업데이트할 수 있습니다. 코드의 가독성이 높아지고 컴포넌트 간의 연결도 간편해지는 장점이 있습니다.