軽量・シンプルな思想でデータバインディングができるVue.jsの基礎まとめ

はじめに

話題のVue.jsについて研究してます。
日本語のドキュメントが少なく苦戦しているため、思考錯誤しながら記事をアップデートしていく予定です。

追記（2016年12月1日）

この記事は公式日本語ドキュメントが無い時代に書いた記事です。
公式の日本語ドキュメントができたので、今後はこちらをご覧ください。

よく使う機能

{{hoge}} : バインディングさせたい変数
v-for : ループ
v-model : 入力フォームと連動したい場合
v-on : Click時などのイベントにひもづける

Sample-1

変数をテンプレート内に表示させるだけのサンプル

HTML

<div id="item">
    <h1>{{title}}</h1>
</div>

JavaScript

var vue = new Vue({
    el: '#item',
    data: {
        title: 'タイトル'
    }
});

補足

{{ aaa + bbb }}というように四則演算も可能

出力結果

タイトルという文字が表示されます

Sample-2

オブジェクトをループさせて表示させるサンプル

オブジェクト

var obj = {
    aaa: 111,
    bbb: 222,
    ccc: 333
};

HTML

<div id="item">
    <ul v-for="val in vals">
        <li>{{ val }}</li>
    </ul>
</div>

Vue.js側

var vue = new Vue({
    el: '#item',
    data: {
        vals: obj
    }
});

Sample-3

v-onを使って、クリック時にアラートを表示。

HTML

<div id="item">
    <h1>{{title}}</h1>
    <a v-on:click="onFunc('hello!', $event)">Button</a>
</div>

v-on:clickは@clickと省略も可能。

JavaScript

var vue = new Vue({
    el: '#item',
    data: {
        title: 'test'
    },
    methods: {
        onFunc: function(msg, e) {
            console.log(e.target.tagName); //eはクリックした要素を取得できる
            alert(msg + 'クリックしました');
        }
    }
});

バインディング中は変数を非表示にするやり方

意外にハマった（分からなかった）ので書きます。
通常だと、変数{{hoge}}がチラッと見えてかっこ悪いので、以下のようにすると、バインドするまでは非表示になります。

HTML

紐付けているHTML要素にv-cloakをつける。

例

<div v-cloak>

CSS

非表示にさせるため、以下を追加。

例

<style>[v-cloak] { display:none }</style>