Data Binding

양방향 데이터 (Two way binding) 바인딩

 

단방향 데이터 바인딩은 일방적으로 한 쪽에서 한 쪽으로 데이터를 주는 것.

예를 들면 v-for 에서 Vue 인스턴스의 값을 component에게 주기만 했던 것을 생각하면 된다.

 

반대로 양방향 데이터 바인딩은 Vue 인스턴스와 component가 서로의 데이터에 접근하는 것을 말한다.

vue에서는 v-model 디렉티브를 이용하여 양방향 데이터 바인딩을 할 수 있다.

 

양방향 데이터 바인딩의 대표적인 예제는 form을 다루는 것이다.

v-model은 state 값을 꼭 사용해야 한다. props로 내려받은 값을 바로 v-model에서 사용할 수는 없다.

 

 

input 을 사용한 예제)

// App.vue

<template>
  <div>
    <h1>{{ title }}</h1>
    <input v-model="title">
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: ""
    };
  }
};
</script>

<style>
</style>

state에 title을 등록해놓고 input 태그에서 v-model로 title을 사용한다.

h1 태그에서는 title state로 내용을 나타낸다.

 

input 태그에 입력한 값이 그대로 h1 태그에 표시된다.

 

input 태그에 값이 입력되면

title state가 그 값으로 업데이트 되고

업데이트 된 state값이 h1 태그에 그대로 적용이 되는 것이다.

 

 

checkbox를 이용한 예제)

// App.vue
<h2>웹툰</h2>
<div>
  <input type="checkbox" id="프롬스타" value="프롬스타" v-model="checkedWebtoons">
  <label for="프롬스타">프롬스타</label>
  <input type="checkbox" id="햄스터와그녀" value="햄스터와 그녀" v-model="checkedWebtoons">
  <label for="햄스터와그녀">햄스터와 그녀</label>
  <input type="checkbox" id="위대한로맨스" value="위대한 로맨스" v-model="checkedWebtoons">
  <label for="위대한로맨스">위대한 로맨스</label>
  <input type="checkbox" id="아귀" value="아귀" v-model="checkedWebtoons">
  <label for="아귀">아귀</label>
  <br>
  <span>찜한 웹툰: {{ checkedWebtoons }}</span>
</div>
  
<script>
export default {
  data() {
    return {
      title: "",
      checkedWebtoons: [],
    };
  }
};
</script>

state에 checkedWebtoons를 등록해놓고 input 태그의 checkbox에 v-model로 checkedWebtoons를 사용했다.

 

체크를 하게 되면 역시 state에 value가 추가되고 span 태그에서 해당 값들을 나타나게 된다.

 

RadioBox 를 이용한 예제)

// App.vue 

<h2>성별</h2>
<input type="radio" id="male" value="male" v-model="gender">
<label for="male">남</label>
<br>
<input type="radio" id="female" value="female" v-model="gender">
<label for="female">여</label>
<br>
<span>당신의 성별을 알려주세요: {{ gender }}</span>

<script>
export default {
  data() {
    return {
      title: "",
      checkedWebtoons: [],
      gender: ""
    };
  }
};
</script>

성별을 선택하면 그대로 state에 적용이 되어 즉각적으로 값이 반영된다.

 

 

SelectBox 예제)

// App.vue

<h2>선호 장르</h2>
<select v-model="category">
  <option disabled value>선택해주세요</option>
  <option>로맨스</option>
  <option>호러</option>
  <option>스릴러</option>
</select>
<span>선택: {{ category }}</span>

<script>
export default {
  data() {
    return {
      title: "",
      checkedWebtoons: [],
      gender: "",
      category: ""
    };
  }
};
</script>