Vue.js 데이터 바인딩을 사용하는 방법

데이터 바인딩은 개발자가 데이터 모델을 뷰 계층에 연결할 수 있도록 하는 Vue.js의 핵심 기능 중 하나입니다. 최소한의 노력으로 데이터와 DOM 요소를 동기화 상태로 유지할 수 있습니다. Vue.js는 단방향 및 양방향 데이터 바인딩을 포함하여 다양한 유형의 데이터 바인딩 기술을 제공하여 개발을 보다 효율적이고 반응적으로 만듭니다.

이 글에서는 Vue.js에서 데이터 바인딩을 사용하는 방법을 알아보겠습니다. 단방향 데이터 바인딩, 양방향 데이터 바인딩과 각각의 실제 예를 살펴보겠습니다.

Vue.js의 데이터 바인딩 유형

Vue.js는 두 가지 주요 유형의 데이터 바인딩을 제공합니다.

단방향 데이터 바인딩: 데이터는 구성 요소의 데이터 모델에서 뷰로 단방향으로 흐릅니다.
양방향 데이터 바인딩: 데이터는 데이터 모델에서 뷰로, 뷰에서 데이터 모델로 다시 흐르는 양방향입니다.

v-bind를 사용한 단방향 데이터 바인딩

Vue.js에서 단방향 데이터 바인딩은 v-bind 지시문을 사용하여 달성됩니다. 이 지시문은 동적으로 속성을 데이터의 표현식에 바인딩합니다. 일반적으로 src, href, alt 등과 같은 HTML 속성을 바인딩하는 데 사용됩니다.

다음은 v-bind을 사용하여 이미지 요소의 src 속성을 바인딩하는 예입니다.

<template>
  <div>
    <img v-bind:src="imageUrl" alt="Dynamic Image" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg'
    };
  }
};
</script>

v-bind의 단축형은 콜론(:)입니다. 위의 예는 다음과 같이 다시 쓸 수 있습니다.

<img :src="imageUrl" alt="Dynamic Image" />

v-model을 사용한 양방향 데이터 바인딩

Vue.js에서 양방향 데이터 바인딩은 v-model 지시문을 사용하여 달성됩니다. 이는 폼 입력 요소와 데이터 모델 간에 바인딩을 생성하여 변경 사항이 데이터와 뷰에 자동으로 반영되도록 합니다.

다음은 입력 요소와 함께 양방향 데이터 바인딩을 위해 v-model을 사용하는 예입니다.

<template>
  <div>
    <input v-model="message" placeholder="Enter your message" />
    <p>Your message is: {{ message }}</p>
  </div>
</template>

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

이 예에서 입력 필드에 입력하면 message 데이터 속성이 자동으로 업데이트되고 <p> 요소에 업데이트된 값이 실시간으로 표시됩니다.

v-model을 사용한 바인딩 폼 요소

v-model 지시문은 체크박스, 라디오 버튼, 선택과 같은 다양한 폼 요소와 함께 사용할 수 있습니다. 다음은 몇 가지 예입니다.

체크박스 바인딩

<template>
  <div>
    <input type="checkbox" v-model="isChecked" /> Checked: {{ isChecked }}
  </div>
</template>

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

라디오 버튼 바인딩

<template>
  <div>
    <input type="radio" id="option1" value="Option 1" v-model="selectedOption" />
    <label for="option1">Option 1</label>
    <br>
    <input type="radio" id="option2" value="Option 2" v-model="selectedOption" />
    <label for="option2">Option 2</label>
    <p>Selected: {{ selectedOption }}</p>
  </div>
</template>

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

바인딩 선택

<template>
  <div>
    <select v-model="selectedValue">
      <option disabled value="">Please select one</option>
      <option>Option A</option>
      <option>Option B</option>
    </select>
    <p>Selected: {{ selectedValue }}</p>
  </div>
</template>

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

v-once를 사용한 일회성 데이터 바인딩

v-once 지시문은 데이터를 뷰에 한 번만 바인딩하는 데 사용됩니다. 초기 렌더링 후 데이터 모델에 대한 변경 사항은 뷰에 반영되지 않습니다. 이는 반응형일 필요가 없는 정적 콘텐츠에 유용합니다.

<template>
  <div v-once>
    This content is rendered only once: {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue.js!'
    };
  }
};
</script>

요약

Vue.js 데이터 바인딩은 개발자가 최소한의 노력으로 동적이고 대화형 애플리케이션을 만들 수 있는 강력한 기능입니다. v-bind을 사용한 단방향 바인딩, v-model을 사용한 양방향 바인딩, v-once을 사용한 일회성 바인딩과 같은 다양한 유형의 데이터 바인딩 기술을 이해하고 활용하면 보다 효율적이고 반응성이 뛰어난 애플리케이션을 구축할 수 있습니다.

vue 데이터 바인딩 v-bind v-model vuex 반응성 단방향 양방향 지시문 구성 요소 props 메서드 폼 입력