Vue.js 的一些指令

• v-bind:title="message"

将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致

• v-bind 和 props

子单元通过 prop 接口与父单元进行解耦

html 代码
<div id="app">
  <todo-item v-for="item in groceryList"
    :todo="item">
    :key="item.id"
  </todo-item>
</div>

JavaScript 代码
<script>
new Vue({
  el: "#app",
  data: {
    groceryList: [
      {id:1, text: 'a'},
      {id:2, text: 'b'}
    ]
  },
  components: {
    'todo-item': {
      props: ["todo"],
      template: "<li>{{todo.text}}</li>"
    }
  }
})
</script>