参考にさせて頂いたページ
お手軽データバインディングライブラリ「Vue.js」を使いこなそう(基礎編) (1/4):CodeZine(コードジン)
バージョン
Vue.js v0.11.5
ダウンロードして、読み込む
GitHubのページから、vue-master.zipをダウンロードした。
解凍して、distディレクトリの中に、
- vue.js
- vue.min.js
があるので、vue.min.jsを使用してみる。
GitHubページに書いてあるサンプルをコピペしてみる
vue_sample.html
<div id="demo">
{{message}}
<input v-model="message">
</div>
vue_sample.js
var demo = new Vue({
el: '#demo',
data: {
message: 'Hello Vue.js!'
}
})
ブラウザで見てみる
vue_sample.htmlをブラウザで開いて、フォームの文字を編集するとリアルタイムにメッセージが変化する。
このソースコードを読んでおく
まず
demo = new Vue();
する。
newするときに、連想配列で引数を渡すので
var demo = new Vue({
el: '#demo',
data: {
message: 'Hello Vue.js!'
}
})
のように書く。
elは監視対象となるブロックのセレクタ。
dataにはさらに連想配列を格納する。
htmlは
<div id="demo">
{{message}}
<input v-model="message">
</div>
のようにid=“demo"の要素の中に
{{message}}
<input v-model="message">
の二つとも入れてあげる。
<div id="demo">
{{message}}
<input v-model="message">
{{message}}
{{message}}
</div>
みたいな感じで{{message}}
を複数入れることもできる。
message
: ‘Hello Vue.js!’
v-model=“message
”
{{message
}}
みたいな感じで紐づいていることがわかる。
今回はここまで。