vue-組件註冊

<div id="app-7">
 <ol>
 <!--
 如今咱們爲每一個 todo-item 提供 todo 對象
 todo 對象是變量，即其內容能夠是動態的。
 咱們也須要爲每一個組件提供一個「key」，稍後再
 做詳細解釋。
 -->
 <todo-item
 v-for="item in groceryList"
 v-bind:todo="item"
 v-bind:key="item.id">
 </todo-item>
 </ol>
</div>

Vue.component('todo-item', {
 props: ['todo'],
 template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
 el: '#app-7',
 data: {
 groceryList: [
 { id: 0, text: '蔬菜' },
 { id: 1, text: '奶酪' },
 { id: 2, text: '隨便其它什麼人吃的東西' }
 ]
 }
})