第2回では，Vue.jsの基礎文法について，駆け足で紹介します。

Vue.jsは，ビューの領域にフォーカスしたシンプルなライブラリです。そのため，他のライブラリとの連携や，既存のプロジェクトへの導入も容易です。今回の内容を通して，自身のプロジェクトにVue.jsを導入するきっかけにしてください。

記事の内容は，Vue.jsがロードされたjsfiddleにアクセスして，コードを入力することで試せます。詳しい文法について知りたい場合は，公式のガイドやAPIリファレンスを参照してください。

Vueインスタンスとデータバインディング

Vue.jsで基本になるのは，Vueコンストラクタから生成されるインスタンスです。

var vm = new Vue({
  el: '#example', // document.getElementById('example'), $('#example')[0] も可
  data: {
    name: 'みかん',
    price: 100
  }
});

// jsfiddle の環境で Console から vm を参照できるようにするため
window.vm = vm;

これは，MVVMパターンでいうViewModelに相当するもので，ViewとModelを仲立ちし状態や振る舞いを持っています。既存のプロジェクトでは，elプロパティにCSSセレクター，DOM要素のオブジェクトを指定することで手軽に始めることができます。

Vueインスタンスの持つ状態は，HTMLで{{ }}を使ったMustache記法で参照すると，Viewに反映されます。

<div id="example">
  <p>{{ name }} は {{ price }}円</p>
</div>

コードを実行したら， priceの値がViewに反映されていることがわかるでしょう。Vueインスタンスの状態の変更は，データバインディング機構によって変更が検知され，すぐにViewに反映されます。

試しにGoogle Chromeの開発者ツールのConsoleタブで以下のコードを実行してみましょう。jsfiddleでは，入力されたコードはframe内で実行されています。なおコードを実行する前に，Consoleタブでコンテキストに「result (fiddle.jshell.net)」を指定してください。コードを実行すると，反映されることが確認できるはずです。

vm.price = 200;

また，HTMLには，以下のように単一のJavaScript式を記述することもできます。

  <p>{{ name }} は {{ price * 1.08 }}円</p>

算出プロパティ

上のようにMustache構文の中に式を記述してもよいですが，同じ式が複数の箇所に記述したり，複雑な式を記述するとメンテナンスが困難になります。このようなケースでは，算出プロパティという「Vueインスタンスの状態から，派生した値を計算してゲッターとして公開する機能」で解決できます。

具体例を見てみましょう。以下のようにcomputedプロパティに，参照されるプロパティと，消費税込みの価格を公開する関数の組のオブジェクトを指定します。

var vm = new Vue({
  // ...
  computed: {
    priceWithTax: function() {
      return this.price * 1.08;
    }
  }
});

すると，Vueインスタンスからプロパティとして，次のように参照できます。

vm.priceWithTax

HTMLからも参照できます。

  <p>{{ name }} は {{ priceWithTax }}円</p>

priceの値が変われば，再計算が必要になりますが，これはVue.jsが自動的におこないます。Vue.js側で状態の依存関係を把握して，必要なときだけ再計算をおこなうので，パフォーマンスの観点で心配も必要ありません。

ここまでのサンプルコードは，このURLから確認できます。

ディレクティブ

ディレクティブは，"v-"から始まるVue.jsで利用できる特別なHTMLの属性です。属性値の変化に応じたDOM操作や，DOMイベントのハンドリングを実現します。Vue.jsが標準で提供しているディレクティブの他に，自身でディレクティブを定義することも可能です。以降では，v-for, v-ifといったよく利用されるディレクティブについて取り上げます。

リストレンダリング

Vue.jsでは，v-forというディレクティブを利用して，配列のデータをリストレンダリングすることができます。

var vm = new Vue({
  el: '#example',
  data: {
    items: [
      {
        name: 'みかん',
        price: 100
      },
      {
        name: 'もも',
        price: 300
      },
      {
        name: 'いちじく',
        price: 500
      },
      {
        name: 'メロン',
        price: 1000
      }
    ]
  }
});

<div id="example">
  <li v-for="item in items">
    <p>{{ item.name }} は {{ item.price }}円</p>
  </li>
</div>

Vue.jsに限らず，他のビューを扱うライブラリ・フレームワークで話題になるのが，リストレンダリングのパフォーマンスです。リストのデータが変更されるたびに，リスト全体のDOM操作，レンダリングがおこなわれると表示のちらつきが発生して，ユーザフレンドリーとはいえません。各ライブラリ・フレームワークでは，必要なDOM操作だけおこなうように工夫しています。

Vue.jsでは，配列を操作するメソッドをラップして変更を検知したり，配列自体の置き換えが発生した場合もいくつかのヒューリスティックの実装によって最大限DOM要素を再利用しようとします。また，ユニークキーを指定する属性，v-bind:keyでリストのアイテムを識別可能にし，効率の良いDOM操作を実現します。

以下のコードでは，商品の名前がユニークと仮定してキーとしています。実際のAPIのレスポンスにはアイテムを識別する何かしらユニークな値が含まれているので，それを利用することが多いでしょう。

  <li v-for="item in items" v-bind:key="item.name">

リストレンダリングのサンプルコードは，このURLから確認できます。