Vue.js学习笔记（组件）

今天在学习vue.js的时候，看到关于组件的定义，官网文档写了一个组件定义和使用的demo，但是我一开始看着感觉是懵的，第一次见这种定义和使用的方法，反复修改调试后才成功理解他的使用原理（纯属个人认为）；

demo:

<div id="app-7">
  <ol>
    <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: '随便其它什么人吃的东西' }
    ]
  }
})

个人理解：todo-item是组件的变量名，用来调用的；props:['todo']是定义一个用于转化的键值，在v-bind:todo='item'的作用就是把item和todo绑定在一起，然后组件中的template中的todo.text就可以调用item中的text，有点类似借刀杀人的感觉，至于key的作用暂时还不知道，后面的文档还没看，等第二天看了后再来补充