Introduction
<div id="app">
<ul>
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
>
</todo-item>
</ul>
</div>
<script>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
});
var app = new Vue({
el: '#app',
data: {
groceryList: [
{id:0, text:'one'},
{id:1, text:'two'},
{id:2, text:'three'}
]
}
});
</script>
這只是一個(gè)假設(shè)的例子，但是我們已經(jīng)設(shè)法將應(yīng)用分割成了兩個(gè)更小的單元调缨，子單元通過 props 接口實(shí)現(xiàn)了與父單元很好的解耦疮鲫。我們現(xiàn)在可以進(jìn)一步為我們的 todo-item 組件實(shí)現(xiàn)更復(fù)雜的模板和邏輯的改進(jìn)，而不會影響到父單元弦叶。
Instance
除了 data 屬性俊犯， Vue 實(shí)例暴露了一些有用的實(shí)例屬性與方法。這些屬性與方法都有前綴 $伤哺，以便與代理的 data 屬性區(qū)分燕侠。
<div id="app">
</div>
<script>
var data = {a: 1};
var vm = new Vue({
el: '#app',
data: data
});
vm.$data === data;
vm.$el === document.getElementById("app");
</script>
