阿倫的學習天地

這個就單一放一個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>