初心者向け：Vue.js 2のデータバインディング入門

Vue.js 2のデータバインディングは、テンプレートにデータを表示したり、ユーザーの入力を受け取ったりするための基本的な仕組みです。Vue.jsは双方向データバインディングをサポートしており、データとUIが常に同期するように設計されています。以下に、Vue.js 2のデータバインディングの基本的な使い方を説明します。

単方向バインディング

1. テンプレートにデータを表示する

テンプレート内でデータを表示するためには、ダブルマスタッシュ（{{ }}）を使用します。

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

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

2. 属性にデータをバインドする

属性にデータをバインドするためには、v-bindディレクティブを使用します。

<div id="app">
  <img v-bind:src="imageSrc">
</div>

var app = new Vue({
  el: '#app',
  data: {
    imageSrc: 'https://vuejs.org/images/logo.png'
  }
});

v-bindは省略形として:も使えます。

<img :src="imageSrc">

双方向バインディング

1. ユーザーの入力とデータを同期する

フォーム要素に対してデータバインディングを行う場合、v-modelディレクティブを使用します。これにより、ユーザーの入力とデータが自動的に同期されます。

<div id="app">
  <input v-model="message">
  <p>{{ message }}</p>
</div>

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

ディレクティブの利用

Vue.jsでは、データバインディングに関連する様々なディレクティブが用意されています。以下はその一部です。

• v-if：条件付きで要素を表示
• v-show：条件付きで要素を表示（非表示の場合でも要素は残る）
• v-for：リストをループして表示
• v-bind：属性にデータをバインド
• v-model：フォーム要素とデータの双方向バインディング

例: v-forを使用したリスト表示

<div id="app">
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.text }}</li>
  </ul>
</div>

var app = new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1, text: 'Item 1' },
      { id: 2, text: 'Item 2' },
      { id: 3, text: 'Item 3' }
    ]
  }
});

まとめ

Vue.js 2のデータバインディングはシンプルで強力です。{{ }}やv-bind、v-modelなどのディレクティブを使うことで、テンプレートとデータの同期が簡単に実現できます。これにより、リアクティブでインタラクティブなユーザーインターフェースを構築することができます。