LoginSignup
36

Vue.js を使ってみた

Last updated at Posted at 2016-06-12

はじめに

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

Vue.js とは

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

公式 vue.js

Vue.js を使ってみた

・Vue.js 2.0

インストールする

以下のページからダウンロードします。
インストール - vue.js

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

lib
    vue.js

使用します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<script>
    var count = 0;

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

チュートリアル

ここまで基本が分かると、以下のチュートリアルは容易に理解できると思います。
はじめに - vue.js

以下のページも参考になります。
とりあえず試してみたいって方のための Vue.js 入門 | phiary
Vue.jsから手軽に始めるJavaScriptフレームワーク - Qiita

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
36