はじめに
話題の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>