Vue.jsその1 – まずは公式サイトのサンプルをさわってみよう。

JavaScript

Vue.js（ビュージェーエス）をさわってみようと思います。
タイトルにその1とある通り、何回か連載する予定です。

Vue.jsとは

Vue.jsはJavaScriptのフレームワークです。
Vue.js以外のフレームワークだと、Angular.jsやReact.jsなどが有名でしょうか。
Vue.jsとはなんぞやということで、以下Vue.js公式サイトの概要です。

Vue.js (発音は / v j u ː /、view と同様) はインタラクティブな Web インタフェースを構築するためのライブラリです。Vue.js のゴールは、リアクティブデータバインディングの利点とできる限りシンプルな API で構成可能な View コンポーネントを提供することです。 Vue.js 自身、本格的なフレームワークではなく、View レイヤーだけに焦点を当てています。したがって、ピックアップしたり、他のライブラリまたは既存のプロジェクトに統合することはとても容易です。一方、適切なツールとサポートするライブラリによる組み合わせで使用されるとき、Vue.js は完全に洗練されたシングルページアプリケーションを提供できます。

・・・ちょっと難しいですね。ひとまず、
インタラクティブなページを簡単に実装することができるフレームワークです
という程度の理解でよいかと思います。

Vue.jsの公式サイトはこちらです。
http://vuejs.org/
嬉しいことに日本語訳されたサイトもありました。
http://jp.vuejs.org/

ちなみに、2015年10月26日に1.0.0がリリースされています。この記事では1.x系を触っていきます。

触ってみます

実際にソースに触れる方がわかりやすいと思いますので、触れていきます。

公式サイトにも載っている簡単な例で、
ユーザーが入力した値が即座に反映される、というページです。インタラクティブです。
JavaScript（jQuery）でも実装できますが結構面倒臭いですよね。Vue.jsは瞬殺します。

動くデモをこちら（http://tipsnote.github.io/vue-test/）にも用意しました。

ソースは以下です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vue.jsの簡単なデモ</title>
</head>
<body>

<div id="demo">
    <p>{{message}}</p>
    <input v-model="message">
</div>

<script src="vue.min.js"></script><!--パスは適宜変更してください。-->
<script>
var demo = new Vue({
    el: '#demo',
    data: {
        message: 'Hello Vue.js!'
    }
})
</script>
</body>
</html>

まず、Vueコンストラクタ関数の

el: '#demo',

が

<div id="demo">

に対応していることがわかると思います。
ここへ、データのバインディングなどの処理をしていきます。

データバインディング

データのバインディングには、以下のように、二重の中カッコを使用します。（「Mustache構文」というらしいです。）

{{message}}

例ではこれにより

data: {
    message: 'Hello Vue.js!'
}

の文字列を表示しています。

この構文はhtml属性でも使えたり、カッコ内で式を書けたり、フィルタを使えたりといろいろできます。
今回は割愛させていただきますので、興味のある方はぜひ公式サイトをチェックしてみてください。

そして

<input v-model="message">

によってmessageの文字列を変更でき、リアルタイムで

{{message}}

へと反映されていることがわかると思います。

このv-modelなどの、「v-」で始まるものが、ディレクティブと呼ばれる特別な属性です。

ディレクティブ

v-modelは上記の例のように、双方向データバインディングを作成してくれます。
そのほか、一部のですが以下のようなディレクティブがあります。

v-if

<p v-if="morning">おはようございます</p>
<p v-else>こんにちは</p>

flgの値の真偽値によって、要素をレンダリングします。
trueのときは1行目のp要素が、falseのときは2行目のp要素がレンダリングされます。

v-on

<button v-on:click="doSomething"></button>

要素にイベントリスナをアタッチします。イベント種別は引数で示されます。
見たままですが、上記ではクリックしたらdoSomethingが呼ばれます。

v-for

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

<script>
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
</script>

itemsの要素数だけ繰り返してレンダリングします。