Vue.js データバインディングの使い方

データバインディングは、開発者がデータモデルをビューレイヤーに接続できるようにする Vue.js のコア機能の 1 つです。これにより、最小限の労力でデータと DOM 要素を同期させることができます。Vue.js は、一方向および双方向のデータバインディングを含むさまざまな種類のデータバインディング手法を提供し、開発をより効率的かつリアクティブにします。

この記事では、一方向データバインディング、双方向データバインディング、およびそれぞれの実用的な例を取り上げながら、Vue.js でデータバインディングを操作する方法について説明します。

Vue.js におけるデータバインディングの種類

Vue.js は、主に 2 種類のデータバインディングを提供します。

一方向データバインディング: データは、コンポーネントのデータモデルからビューへと一方向に流れます。
双方向データバインディング: データは、データモデルからビューへ、またビューからデータモデルへ双方向に流れます。

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 ディレクティブは、データをビューに 1 回だけバインドするために使用されます。最初のレンダリング後、データモデルへの変更はビューに反映されません。これは、リアクティブである必要のない静的コンテンツに便利です。

<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 による 1 回限りのバインディングなど、さまざまな種類のデータバインディング手法を理解して活用することで、より効率的で応答性の高いアプリケーションを構築できます。

vue データバインディング v-bind v-model vuex リアクティブ一方向双方向ディレクティブコンポーネント props メソッドフォーム入力