02 Vue.jsの基本的な仕組みを理解

Vue.js のコアは、単純なテンプレート構文を使って宣言的にデータを DOM に描画することを可能にするシステムです。

Vue.js の基本ですが、双方向データバインディングができるというのが大きな特徴になります。

データバインディングというのは data と UI を結び付けるという意味で、双方向というのは data を更新すれば UI が更新されて、 UI を更新すれば data が更新されるという意味になります。

Vue.js は DOM ベースのテンプレートの実装を使用しています。これは、全ての Vue.js テンプレートは本質的に有効になり、特別な属性で拡張された HTML を解析可能になるということを意味します。また、Vue のテンプレートは本質的に文字列ベースのテンプレートとは異なるということを忘れないでください。

まずは Vue.js で扱う UI の領域を定義したいので div を作って行きます。
id を app としてあげます。

<div id="app">
<p>Hi{{ name }}</p> 
</div>

nameこの値を UI に反映させて、 二重波括弧で表現してあげれば OK です。 

 
次に data を作っていきます、 Vue.js で UI に結びつくモデルを作ってあげれば 大丈夫です。

ファイルのパス：/VueApp/js/main.js

内容追加：

(function() {
 'use strict';
var vm = new Vue({

   el: '#app',
   data: {
     name: '名前1'
   }
 });
})();

説明：
UI に結びつくモデルはよく View Model と呼ばれるので vm という変数名にしてあげます。

そのあと new Vue としてあげて、どの領域の Vue と結びつけるかを elements の略である el というキーで指定してあげます。

CSS のセレクターのように表現すればいいので #app と書いてあげれば 大丈夫です。

あとはこのモデルに data を保持していきます。

data というキーにしてあげて、キーと値で指定すればいいので、今回 name というキーで ”名前1” くんという値を保持しておきます。

以上の内容は data から UI への反映はできたので、

次は UI から data へ反映させてみます。

input タグを使って name を更新していきます。
この input タグに v-model="name" としてあげると、このフォームに入力された値が name と結びつくようになります。

  <div id="app">
   <p>Hi {{ name }}</p>
   <p><input type="text" v-model="name"></p>
 </div>

双方向データバインディング
v-model

このように変更するとリアルタイムでちゃんと UI に反映されているのがわかるかと思います。