VUE學習七，元件component
阿新 • • 發佈：2021-07-07
在 Vue 裡，一個元件本質上是一個擁有預定義選項的一個 Vue 例項。
一、示範程式碼
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: '隨便其它什麼人吃的東西' }
]
}
})
<todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id" ></todo-item>
二、效果如下圖
三、控制檯，輸入app7.groceryList.push({ id: 4, text: '新專案' })
四、整體程式碼
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"View Code/> <title>VUE簡單示範</title> <script type="text/javascript" src="../js/vue.min.js" charset="utf-8"></script> </head> <body> <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> <script> 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: '隨便其它什麼人吃的東西' } ] } }) </script> </body> </html>
本文參考：
https://cn.vuejs.org/v2/guide/