Vue.js を使ってみた

# はじめに

JavaScript プログラムで、テンプレートによるレンダリングするのに Underscore.js 、Handlebars.js 、JsRender を使ってみたり、データバインディングするのに Backbone.js および backbone.stickit を使ってみたりしました。記述量を減らしたくて使っているのに、意外と記述量が多くなります。特に、データ（モデル）に単純な JavaScript のオブジェクトや配列でいいってときに、Backbone は面倒だったりします。もっと簡単に使えるものはないか探したところ、Vue.js がよさそうでした。

# Vue.js とは

Vue.js は、MVVM と呼ばれる設計パターンを採用しているフレームワークです。Model 、View 、ViewModel の３つでアプリケーションを構築します。双方向データバインディングを行うのが主な役割です。

公式 [vue.js](https://jp.vuejs.org/)

# Vue.js を使ってみた

・Vue.js 2.0

## インストールする

以下のページからダウンロードします。
[インストール - vue.js](https://v2.ja.vuejs.org/v2/guide/installation)

以下のファイルをワークスペースにコピーします。

```
lib
    vue.js
```

使用します。

```html:
    <script src="lib/vue.js" type="text/javascript"></script>  
```

## テンプレートによるレンダリング

データオブジェクトの内容を ```<div>``` で指定した場所に表示します。 

まず、表示するデータを準備します。

```js:
<script>
    var name = "Vue.js";
```

次に、テンプレートを含む HTML コードを準備します。データを表示する場所は ```{{ ◇◇ }}``` です。

```html:
    <div id='root'>
      <p>Hello, {{ name }}.</p>
    </div>
```

```v-text``` ディレクティブで指定する書き方もできます。

```html:
    <div id='root'>
      <p>Hello, <span v-text='name' />.</p>
    </div>
```

Vue クラスのインスタンスを生成します。このとき、表示するデータを ```data``` 、表示する領域を ```el``` に指定します。

```js:
<script>
    new Vue({
      el: '#root',
      data: {
        name: name
      }
    });
```

```{{ ◇◇ }}``` に ```data``` に指定されたオブジェクトのフィールド ```◆◆``` の値がセットされます。
これは単純なレンダリングでなくデータバインディングされています。
```◆◆``` の値を変更すると ```{{ ◇◇ }}``` の位置に表示されている内容も変わります。

## ユーザ入力に対するデータバインディング

```<input>``` に入力してデータオブジェクトの内容を変更できるようにします。

まず、```<input>``` を含む HTML コードを準備します。表示するときに使った ```v-text``` の代わりに ```v-model``` ディレクティブを使ってバインドするフィールドを指定します。

```html:
    <div id='root'>
      <p>Hello, <span v-text='name' />.<p>
      <input v-model='name'>
    </div>
```

データオブジェクトを準備して、Vue のインスタンスを生成します。

```js:
<script>
    var name = "Vue.js";
```
```js:
    new Vue({
      el: '#root',
      data: {
        name: name
      }
    });
```

## リストをレンダリングする

配列の内容を ```<ul>``` で指定した場所に表示します。 

まず、表示するデータを準備します。配列を含むオブジェクトです。

```js:    
<script>
    var items = [
      { name: "jQuery" },
      { name: "Backbone.js" },
      { name: "Vuejs" },
    ];
```

次に、テンプレートを含む HTML コードを準備します。
繰返して表示したい ```<li>``` を ```<template>``` で囲み、そこに表示したいデータを ```v-for``` ディレクティブで指定します。```v-for='△△ in ○○'``` のように配列 ```○○``` から要素を取出し ```△△``` で受取り、```{{ △△.◇◇ }}``` のようにフィールド ```◇◇``` の値を表示します。

```html:
    <ul id='root'>
      <template v-for='item in list'>
        <li>{{ item.name }}</li>
      </template>
    </ul>
```

```<template>``` を使わず ```<li>``` に直接 ```v-for``` を指定しても構いません。

```html:
    <ul id='root'>
      <li v-for='item in list'>
        {{ item.name }}
      </li>
    </ul>
```

Vue のインスタンスを生成します。

```js:
<script>
    new Vue({
      el: '#root',
      data: {
        list: items
      }
    });
```

## ユーザ入力をハンドリングする

ユーザ入力に対して指定したメソッドを実行できるようにします。
```v-on``` ディレクティブで、取得したいユーザ入力と、実行したいメソッドを指定します。

```html:
    <div id='root'>
      <button v-on:click='addCount'>＋</button>
      <p>count: {{ count }}</p>
    </div>
```

取得できるユーザ入力は、```click``` などの DOM イベントです。

実行するメソッドは、Vue インスタンスを生成するときに ```methods``` プロパティで指定できます。

```js:    
<script>
    var count = 0;

    new Vue({
      el: '#root',
      data: {
        count: count
      },
      methods: {
        addCount: function(){
          this.count += 1;
        }
      }
    });
```

## チュートリアル

ここまで基本が分かると、以下のチュートリアルは容易に理解できると思います。
[はじめに - vue.js](https://v2.ja.vuejs.org/v2/guide/index.html)

以下のページも参考になります。
[とりあえず試してみたいって方のための Vue.js 入門 | phiary](http://phiary.me/vue-js-tutorial-try/)
[Vue.jsから手軽に始めるJavaScriptフレームワーク - Qiita](http://qiita.com/icoxfog417/items/49f7301be502bc2ad897)