來源為Vue官方,可以直接去參考~
這個就單一放一個component的介紹
組件就很像是樂高,每一個都是獨立可以重複運用的,所以我們可以用很多東西拼拼湊湊
1.最簡單方式,但是就是已經固定寫死
我建立一個組件,也就是一個標籤叫做todo-item,然後他會轉換成<li>This is a todo</li> ,可是這一改的狀況之下,會全動變成一樣的,所以要做修改
<ul>
<!-- Create an instance of the todo-item component -->
<todo-item></todo-item>
</ul>
<script>
// Define a new component called todo-item
Vue.component('todo-item', {
template: '<li>This is a todo</li>'
})
var app6=new Vue({
el:'#app-6',
});
</script>
2.增加prop字段
app-6 和app-7我建立了兩個都一樣的
1.當中,產生標籤名可以自己取
2-1. 但是props 是對應到 v-bind: [這是props]的
2-2. v-bind:todo2="這邊是對應v-for裡面從List取出來後的名子",所以要bind他的變數名 item2
3. template則是要他所產生的資料內容, todo2是props 的命名,也可以想像成 他把他轉換成
foreach(item in groceryList)
{
<li> item.text </li>
}
只是他轉換成todo2而已
<ul id="app-6">
<!-- Create an instance of the todo-item component -->
<todo-item2 v-for="item2 in groceryList" v-bind:todo2="item2" ></todo-item2>
</ul>
<div id="app-7">
<ol>
<!-- Now we provide each todo-item with the todo object -->
<!-- it's representing, so that its content can be dynamic -->
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
</ol>
</div>
<script>
Vue.component('todo-item2', {
props: ['todo2'],
template: '<li>{{ todo2.text }}</li>'
})
var app6=new Vue({
el:'#app-6',
data:{
groceryList:[
{text:'123'},
{text:'456'}
]
}
});
//------------------------------------
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ text: 'Vegetables' },
{ text: 'Cheese' },
{ text: 'Whatever else humans are supposed to eat' }
]
}
})
</script>