但是这样会为每个 todo 渲染同样的文本，这看起来并不是很酷。我们应该将数据从父作用域传到子组件。让我们来修改一下组件的定义，使得它能够接受一个 prop 字段：
Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' })
现在，我们可以使用 v-bind 指令将 todo 传到每一个重复的组件中：
<div> <ol> <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item> </ol> </div>
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' } ] } })
这只是一个假设的例子，但是我们已经将应用分割成了两个更小的单元，子元素通过 props 接口实现了与父亲元素很好的解耦。我们现在可以在不影响到父应用的基础上，进一步为我们的 todo 组件改进更多复杂的模板和逻辑。
从代码上面来看，还是标准的javascript写法，只是定义了Vue这个对象，进行的所有操作都是通过Vue这个对象来实现的，这一部分的代码简单介绍了Vue的使用，相信大多数的项目中使用最多还是这些数据绑定，判断循环，用户输入，绑定事件。
不过话说回来，我们为什么要使用Vue？各位看官自行百度一下去吧，我这里不吹不黑，只是一个简单的上手系列文章，由浅入深，跟着官方指南走，加入一些我自己的理解，欢迎各位看官拍砖。