Vue.js 데이터 바인딩

데이터 바인딩

Vue.js에서 데이터 바인딩은 컴포넌트의 데이터와 템플릿을 연결하는 핵심 기능입니다.

이를 통해 동적으로 데이터를 화면에 표시하고 사용자의 입력과 상호작용을 관리할 수 있습니다.

1. 문자열 데이터 바인딩

• 용도: 텍스트 데이터를 HTML 요소에 바인딩하여 화면에 표시합니다.
• 구현 방법: {{ }} (Mustache 태그)를 사용하여 데이터를 텍스트 형태로 렌더링합니다.
  

  <template>
    <p>{{ message }}</p>
  </template>
  
  <script>
  export default {
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }
  </script>
  
  

2. 원시 HTML 데이터 바인딩

• 용도: HTML 코드를 포함한 문자열을 화면에 렌더링할 때 사용합니다.
• 구현 방법: v-html 지시자를 사용하여 HTML을 원시 HTML로 렌더링합니다.

  <template>
    <div v-html="htmlContent"></div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        htmlContent: '<strong>Bold text</strong>'
      }
    }
  }
  </script>
  
  

3. form 입력 데이터 바인딩

• 용도: 폼 입력과 같은 인터랙티브 요소의 데이터를 동적으로 관리합니다.
• 구현 방법: v-model 지시자를 사용하여 양방향 데이터 바인딩을 설정합니다.

  <template>
    <input v-model="username" placeholder="Enter your name">
  </template>
  
  <script>
  export default {
    data() {
      return {
        username: ''
      }
    }
  }
  </script>
  
  

• 예시:

4. 속성 바인딩

• 용도: HTML 속성을 동적으로 바인딩합니다.
• 구현 방법: v-bind 지시자 또는 : 축약형을 사용하여 속성에 데이터를 바인딩합니다.

  <template>
    <img :src="imageUrl" alt="Vue logo">
  </template>
  
  <script>
  export default {
    data() {
      return {
        imageUrl: 'path/to/vue-logo.png'
      }
    }
  }
  </script>
  
  

• 예시:

5. 클래스 바인딩

• 용도: 요소의 클래스를 조건에 따라 동적으로 추가하거나 제거합니다.
• 구현 방법: 객체 또는 배열 구문을 사용하여 클래스를 바인딩합니다.

  <template>
    <div :class="{ active: isActive }">Active Box</div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        isActive: true
      }
    }
  }
  </script>
  
  

6. 인라인 스타일 바인딩

• 용도: 요소의 인라인 스타일을 동적으로 관리합니다.
• 구현 방법: 객체 또는 배열 구문을 사용하여 스타일을 바인딩합니다.
• 예시:
  

  <template>
    <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">
      Styled text
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        activeColor: 'red',
        fontSize: 30
      }
    }
  }
  </script>​