• 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>