Vue.js初心者による初心者のための完全入門講座「第四回」

こんにちは、金子拓矢(@taku_twitt0622)です。

今回は、「双方向データバインディング」について解説していきます。

これも、この講座の終着点である「Todoアプリ」を作成するにあたって重要な内容になります！

双方向データバインディングというと難しそうに思うかも知れませんが、簡単にいうと「htmlファイルからVueのデータをいじれる！」ことです。（か〜なり簡単に言ってます笑）

双方向データバインディングを使うには、v-modelディレクティブを使います。以前の講座でv-onディレクティブについては学習しましたが、その仲間の１つです。

実際にコードを書いてみたほうがわかりやすいと思うので、始めていきましょう！

双方向データバインディングとは！

    <!-- index.html -->
   <div id="app">
       <input type="text" v-model="x">
       <p>{{ x }}</p>
   </div>

// index.js
new Vue({
   el: '#app',
   data: {
       x:'こんにちは'
   }
});

この様に記述できたら、ブラウザを開いてみてください。

フォームには、「こんにちは」という文字が表示されていると思いますが、それを消して自由に文字を打ってみてください。

すると、フォームの下のpタグに今入力した文字が即座に反映されていると思います。

こんな感じですね。

これがまさに「双方向データバインディング」です！

これまでは、Vueインスタンス内でdataプロパティの中で定義したデータを、マスタッシュ構文（中括弧のやつ）でhtmlファイルと連動し、表示させていました。

v-modelディレクティブを使うと、Vueインスタンスで定義したdataの内容を、htmlのフォームからいじることができるんです！

v-modelを使わないとどうなる？

まだイマイチ掴めていない人もいると思うので、v-modelを使わなかったパターンも用意してみましょうか。

    <!-- index.html -->
   <div id="app">
       <span>v-modelあり</span><input type="text" v-model="x">
       <p>{{ x }}</p>
       <hr>
       <span>v-modelなし</span><input type="text">
       <p>{{ y }}</p>
   </div>

v-modelを付けていないフォームを追加して、わかりやすい様にspanタグなどを追加してみました。

続いてindex.jsでは、dataプロパティに

 data: {
       x:'こんにちは',
       y:'おはよう'
   }

を追記します。

では、これでブラウザを開いてみましょう！

この様になったと思います。

では、２つのフォームがありますが、この２つのフォームに「Hello!!」と入力してみましょう。

これは分かりやすいんじゃないでしょうか？！笑

上のv-modelがついたフォームでは、入力内容が即座に反映されて、下のpタグの表示が変わっています。

一方のv-modelがついていないフォームでは、pタグの表示内容が、Vueインスタンスのdataプロパティで定義した「おはよう」のままになっているのが分かります。

二度目になりますが、これが「双方向データバインディング」です！笑

かなりクドクドとした説明になってしまいましたが、いかがだったでしょうか？

さて次回の講座では、「繰り返し文」について解説していきます。

実際にTodoアプリを作るにあたって、Todoをいくつも画面に表示させる必要があるので、配列から順番に取り出して表示する、という繰り返しの処理は必須になります。

繰り返し処理については、Javascriptでプログラミングの基礎がわかっていない方には難しく感じるところがあると思うので、そこだけご了承ください。

それでは、最後まで読んでいただきありがとうございました！