第2回では,
Vue.
記事の内容は,
Vueインスタンスとデータバインディング
Vue.
var vm = new Vue({
el: '#example', // document.getElementById('example'), $('#example')[0] も可
data: {
name: 'みかん',
price: 100
}
});
// jsfiddle の環境で Console から vm を参照できるようにするため
window.vm = vm;
これは,
Vueインスタンスの持つ状態は,
<div id="example">
<p>{{ name }} は {{ price }}円</p>
</div>
コードを実行したら, priceの値がViewに反映されていることがわかるでしょう。Vueインスタンスの状態の変更は,
試しにGoogle Chromeの開発者ツールのConsoleタブで以下のコードを実行してみましょう。jsfiddleでは,
vm.price = 200;
また,
<p>{{ name }} は {{ price * 1.08 }}円</p>
算出プロパティ
上のようにMustache構文の中に式を記述してもよいですが,
具体例を見てみましょう。以下のようにcomputedプロパティに,
var vm = new Vue({
// ...
computed: {
priceWithTax: function() {
return this.price * 1.08;
}
}
});
すると,
vm.priceWithTax
HTMLからも参照できます。
<p>{{ name }} は {{ priceWithTax }}円</p>
priceの値が変われば,
ここまでのサンプルコードは,
ディレクティブ
ディレクティブは,
リストレンダリング
Vue.
var vm = new Vue({
el: '#example',
data: {
items: [
{
name: 'みかん',
price: 100
},
{
name: 'もも',
price: 300
},
{
name: 'いちじく',
price: 500
},
{
name: 'メロン',
price: 1000
}
]
}
});
<div id="example">
<li v-for="item in items">
<p>{{ item.name }} は {{ item.price }}円</p>
</li>
</div>
Vue.
Vue.
以下のコードでは,
<li v-for="item in items" v-bind:key="item.name">
リストレンダリングのサンプルコードは,