Vue基礎文法四 （元件）

Vue基礎

元件

1. 元件的template必須隻有一個根元素
2. data必須是個函數。為了保持複用情況下資料的唯一性。

一個簡單的元件

//html
   <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>
   //js
   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: '随便其它什麼人吃的東西' }
       ]
     }
   })