Edited at

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

More than 1 year has passed since last update.


はじめに

話題の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>