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>
这只是一个假设的例子，但是我们已经设法将应用分割成了两个更小的单元，子单元通过 props 接口实现了与父单元很好的解耦。我们现在可以进一步为我们的 todo-item 组件实现更复杂的模板和逻辑的改进，而不会影响到父单元。
Instance
除了 data 属性， Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的 data 属性区分。
<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>
