Vue - 데이터 바인딩이란 무엇입니까?

데이터 귀속은 무엇입니까...?

데이터와 대상을 결합하여 데이터나 대상의 변경을 다른 측의 변경에 암시적으로 반영하여 이 변경을 실현하는 구조
→ 한쪽을 변경하면 자동으로 다른 쪽이 변경됩니다.

Vue의 기본 데이터 바인딩

1/ v-bind

inde.html

 <div id="app">
    {{ message }}
  </div>

main.js

 new Vue({
  el: '#app',
  data: {
    message: "わーい"
  }
})

> わーい
> VueインスタンスのdataオブジェクトmessageがHTMLに渡って「わーい」が描画

양방향 데이터 바인딩

2/ v-model

index.html

  <div id="app">
    <div>
      <input type="text" v-model="message">
    </div>
  </div>

main.js

new Vue({
  el: '#app',
  data: {
    message: "わーい"
  }
})

=>Vue 인스턴스의 데이터 객체 메시지 HTML에 "와"그리기
저는 아까랑 다를 게 없는 것 같아요.

양방향과 단방향 데이터 귀속의 차이

동적 드로잉 데이터 객체 값

index.html

  <div id="app">
    <div>
      {{ message1 }}
      <input type="text" v-bind:value="message1"></br></br>
      {{ message2 }}
      <input type="text" v-model="message2">
    </div>
  </div>

main.js

new Vue({
  el: '#app',
  data: {
    message1: "わーい",
    message2: "わーい"
  }
})

양방향 데이터 귀속 동적 그리기 데이터 대상의 변화

[절차]
1. 뷰에서 Vue 인스턴스에서 전달되는 데이터 객체 그리기
2. View에서 변경된 데이터 객체 업데이트 Vue 인스턴스 값
3. 업데이트된 Vue 인스턴스의 데이터 객체 다시 그리기

v-model의 별법

v-bind + v-on

index.html

  <div id="app">
    <div>
      {{ message1 }}
      <input type="text" v-bind:value="message1" v-on:input="message1=$event.target.value"></br></br>
      {{ message2 }}
      <input type="text" v-model="message2">
    </div>
  </div>

main.js

new Vue({
  el: '#app',
  data: {
    message1: "わーい",
    message2: "わーい"
  }
})

->v-bind 단방향 데이터 바인딩

-> v-on Vue에 데이터 객체의 변경 내용 전달