このページで学べる内容

• データバインディング

難易度

☆☆

動作環境

• OS : Mac
• yarn : 1.22.18
• @vue/cli : 5.0.4

はじめに

今回から少しずつコーディングをしていこうと思います。 まずはVueの基本となるデータバインディングについて学んでいきましょう。

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

データバインディングとはデータと対象要素を結びつけることをいい、Vueの場合ではデータと描写を同期させている仕組みのことを主に指します。 実際にプログラムを作って動き見てみましょう。

初期準備

前回Vue Cliを利用してプロジェクトを作成しましたが、余計な処理が書かれているので一旦不要な箇所を削除して、初期状態を作りましょう。

HelloWorld.vueの削除

今回HelloWorld.vueは利用しないので、思い切って削除しましょう。

rm src/components/HelloWorld.vue

App.vueファイルの修正

早速、下記のようにApp.vueファイルを書き換えてみましょう。

<template>
<p>マスタッシュ構文(単方向):{{message}}</p>
<p>v-bind(単方向):<input v-bind:value="message"></p>
<p>v-model(双方向):<input v-model="message"></p>
</template>

<script>
export default {
  // data() { のように:とfunctionを省略することも可能
  data: function() {
    return {
      'message': 'Hello world'
    }
  }
}
</script>

<style>
</style>

まず<script>タグの中でリアクティブにするデータを指定します。 リアクティブとは日本語で反応するというような意味となり、Vueではデータが変わった際に行動を起こす対象となるデータのことを言います。 リアクティブなデータとしてVueに認識させるには、data内に関数としてオブジェクトを返却するように記述します。 サンプルでは下記が該当箇所です。

  data: function() {
    return {
      'message': 'Hello world'
    }
  }

これはmessageというプロパティの初期値に’Hello world’を設定しています。

次に<template>タグですが、HTMLとして描写されるDOM情報を記述します。 <template>自体はHTMLとして出力される際には<div>要素として出力されます。 今回のサンプルではマスタッシュと呼ばれる{{}}とv-bindを利用した単方向データバインディング、 v-modelを利用した双方向データバインディングについて説明します。

単方向データバインディングは、リアクティブなデータの値が変更された場合に描写側つまりビュー側も同期的に変更します。 ビュー側が変更されてもdata側にはその内容が反映されません。単方向、つまり一方通行での同期が行われます。 それに対して双方向データバインディングは、ビュー側の変更内容がデータ側にも反映されます。

Chromeの拡張機能のVue Devtoolsのを利用してデータを書き換えてビュー側に反映されるか試していましょう。

messageの中身を変更するとマスタッシュ、v-bind、v-modelの内容が全て変更されていることがわかります。 今度はv-bindの中身を変更して、データが変更されないこと（単方向）を確認しましょう。

v-bindの中身を変更しましたが、Vue Devtoolsで見えているデータのmessageが変更されていないことと、マスタッシュ、v-modelで描写している要素に影響がないことがわかると思います。

次は双方向データバインディングを見ていきましょう。双方向データバインディングは単方向データバインディングとことなり、ビュー側が変更された場合にデータ側にも影響を及ぼします。

v-modelの中身を変更することでデータも変更され、データが変更されることにより、単方向データバインディングであるマスタッシュ、v-bindのビューも変更されています。 ツール側の仕様でフォーカスを当てないと表示が更新されませんが、Vue Devtools側のmessageの中身が変わっていることがわかると思います。

最後に

今回の講座で覚えておいてもらいたいことは下記です。

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

今まで生のJavascriptやJQueryを利用していた人は描写の同期が簡単に出来てしまうことに驚くのではないのでしょうか。