[Vue] - Vue model

Vue.js의 모델 (Model)은 Vue 애플리케이션의 데이터와 그 데이터가 표시되는 방식 간의 상호작용을 관리하는 개념입니다. Vue에서는 데이터 모델과 뷰 간의 연결을 통해 반응형 웹 애플리케이션을 쉽게 구축할 수 있습니다. 데이터 모델은 일반적으로 Vue 인스턴스의 data 속성에 정의됩니다.

Vue 모델의 구성 요소

1. 데이터 (Data):

   • Vue 인스턴스에서 애플리케이션의 상태를 나타내는 속성입니다.
   • data 객체 내에 정의되며, 뷰에서 이 데이터에 접근하고 수정할 수 있습니다.

   const app = Vue.createApp({
     data() {
       return {
         message: 'Hello, Vue!',
         count: 0
       }
     }
   });
   

2. 반응성 (Reactivity):

   • Vue는 데이터의 변화를 감지하고, 변화가 있을 때 자동으로 뷰를 업데이트합니다. 이 기능을 통해 사용자는 상태를 쉽게 관리할 수 있습니다.
   • Vue의 반응성 시스템은 getter와 setter를 사용하여 데이터 속성이 변경될 때마다 뷰를 업데이트합니다.

3. computed 속성:

   • computed 속성은 데이터 기반의 계산된 값을 정의합니다. 이 값들은 종속된 데이터가 변경될 때만 다시 계산됩니다.
   • computed 속성은 종종 복잡한 계산이나 데이터의 변형을 처리하는 데 사용됩니다.

   const app = Vue.createApp({
     data() {
       return {
         count: 0
       }
     },
     computed: {
       doubleCount() {
         return this.count * 2;
       }
     }
   });
   

4. methods:

   • Vue 인스턴스의 methods 속성에 정의된 메서드는 특정 동작을 수행하는 함수들입니다. 이러한 메서드는 이벤트 핸들러로 사용되거나 다른 메서드에서 호출될 수 있습니다.

   const app = Vue.createApp({
     data() {
       return {
         count: 0
       }
     },
     methods: {
       increment() {
         this.count++;
       }
     }
   });
   

v-model

• v-model 디렉티브는 폼 요소와 데이터 모델 간의 양방향 바인딩을 제공합니다. 즉, 사용자 입력이 데이터에 자동으로 반영되고, 데이터의 변경이 뷰에 즉시 반영됩니다.

예시: 텍스트 입력

<template>
  <div>
    <input v-model="message" placeholder="Type something..." />
    <p>You typed: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

예시: 체크박스

<template>
  <div>
    <input type="checkbox" v-model="isChecked" />
    <label>Check me</label>
    <p>{{ isChecked ? 'Checked' : 'Not Checked' }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false
    }
  }
}
</script>

요약

• Vue 모델은 애플리케이션의 데이터 상태를 관리하는 중심 개념입니다.
• Vue의 반응성 시스템을 통해 데이터의 변화가 자동으로 뷰에 반영됩니다.
• computed 속성과 methods를 활용하여 데이터 변형 및 동작을 정의할 수 있습니다.
• v-model 디렉티브는 폼 요소와 데이터 간의 양방향 바인딩을 지원하여 사용자 입력을 쉽게 관리합니다.

이러한 기능들은 Vue.js를 사용하여 효율적이고 반응적인 웹 애플리케이션을 구축하는 데 큰 도움이 됩니다.