はじめに
JavaScript プログラムで、テンプレートによるレンダリングするのに Underscore.js 、Handlebars.js 、JsRender を使ってみたり、データバインディングするのに Backbone.js および backbone.stickit を使ってみたりしました。記述量を減らしたくて使っているのに、意外と記述量が多くなります。特に、データ（モデル）に単純な JavaScript のオブジェクトや配列でいいってときに、Backbone は面倒だったりします。もっと簡単に使えるものはないか探したところ、Vue.js がよさそうでした。
Vue.js とは
Vue.js は、MVVM と呼ばれる設計パターンを採用しているフレームワークです。Model 、View 、ViewModel の３つでアプリケーションを構築します。双方向データバインディングを行うのが主な役割です。
公式 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