【Vue.js】データバインディングについて

はじめに

こんにちは。
データバインディングについてアウトプットしていきます！

データバインディングとは

データバインディング（データバインド、データ結合）は、データと対象を結びつけ、データあるいは対象の変更を暗示的にもう一方の変更へ反映すること、それを実現する仕組みのことである。

参照：ウィキペディア

簡単に言うと、データと画面表示を同期する仕組みで、片方を変更するともう片方も変更される。

テキストのデータバインディング

※Vue.jsを使用する際は、公式ドキュメントのCDNなどであらかじめ読み込んでおく。

HTML

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

Vue.js

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello!'
  }
})

Vue.js側で、画面に表示させるデータを定義。
マスタッシュ構文{ }で、データを格納した変数名messageをHTMLのdivタグ内に記述する。
出力結果はHello!となる。

属性のデータバインディング

HTML

<div id="app">
  <input type="text" v-bind:value="message">
</div>

Vue.js

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello!'
  }
})

属性に対してデータバインディングを行いたい場合は、v-bindディレクティブを使用する。
入力欄にHello!が出力される。

双方向データバインディング

HTML

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

Vue.js

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello!'
  }
})

双方向データバインディングを行いたい場合は、v-modelディレウティブを使用して、データの値とテンプレートの値を双方向に変更する。片方のテキストボックスの値を変更すると、動的にもう片方の値も変更される。

最後に

ここまでデータバインディングについてまとめました。
今回初めてディレクティブについて触れたので、他のものについてもまとめていきたいと思います！