vue组件化实现

vue允许使用小型、独立和可复用的组建构建大型的应用。

vue一个组件本质上就是一个预定义的vue实例。

 
 

如此方式，页面中使用定义的组件，将会使用组件定义的内容渲染，但是上述方式渲染内容不能够变化，

不够灵活。

我们稍作修改

 
    v-for="item in fruits" v-bind:todo='item' v-bind-key='item.id'>

此例子中在component中使用了一个能接受变量的props，模板中能使用props的属性

在html中，使用v-bind指令将代办项传到循环输出的每个组件，

v-for="item in fruits"循环遍历vue定义的fruits数组，

v-bind:todo="item" 

将遍历获取的item绑定到props的todo，如此component将会灵活显示不同的值。

如此我们可是使用该特性制作vue版本的自定义组件。