vuejs组件

vuejs组件学习

Vue.component('todo-item', {
// The todo-item component now accepts a// "prop", which is like a custom attribute.// This prop is called todo. 
props: ['todo'], 
template: '<li>{{ todo.text }}</li>'
})

现在,我们可以使用 v-bind 指令将 todo 传到每一个重复的组件中:

<div id="app-7">
<ol>
<todo-item v-for="todo in todos" v-bind:todo="todo"></todo-item>
</ol>
</div>




Vue.component('todo-item', {
 props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
  })
  var app7 = new Vue({
   el: '#app-7',
   data: {
todos: [
  { text: 'Learn JavaScript' },
  { text: 'Learn Vue' },
  { text: 'Build something awesome' }
]
 }
 })

vue-component 的 todo-item 和 ol 中的todo-item 对应
在vue-component 中 props 通过todo 将值传入 template 中

new vue todos 和 v-for

v-bind:todo = “todo”:前一个todo 是 组件component 中的 props的todo ,后面todo 是v-for 中的todo ,做一个绑定