[Vue.js] 양방향 데이터 바인딩을 활용한 메시지 입력 예제

<template>
  <div>
    <!-- 예제 1: 메시지 표시 -->
    <p>메세지: {{ message }}</p>

    <!-- 예제 2: 입력 필드 -->
    <input v-model="message" placeholder="메세지 입력하기" />

    <!-- 예제 3: 메시지 반전 -->
    <button @click="reverseMessage">메시지 반전</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 입력된 메시지를 저장하는 데이터
      message: ''
    };
  },
  methods: {
    // 메시지 반전 메서드
    reverseMessage() {
      this.message = this.message.split('').reverse().join('');
    }
  }
};
</script>

Vue에서는 v-model 디렉티브를 사용하여 양방향 데이터 바인딩을 쉽게 구현할 수 있습니다. 이를 통해 사용자가 입력한 내용을 즉시 반영하고, 반대로 표시된 내용을 사용자가 수정할 수 있습니다.

1. 예제 1: message 데이터를 사용하여 메시지를 표시하는 부분입니다. 입력 필드에 값을 입력하면 이 값이 실시간으로 업데이트됩니다.

2. 예제 2: v-model 디렉티브를 사용하여 입력된 메시지를 바인딩하는 부분입니다. 사용자가 입력한 내용은 message 데이터에 자동으로 반영됩니다.

3. 예제 3: 입력된 메시지를 반전시키는 예제입니다. 사용자가 "메시지 반전" 버튼을 클릭하면 입력된 메시지가 거꾸로 뒤집힙니다.

Vue의 양방향 데이터 바인딩을 활용하면 사용자와의 상호작용을 효과적으로 구현할 수 있습니다.