Introduction & Instance

Introduction

<div id="app">
  <ul>
    <todo-item
    v-for="item in groceryList"
    v-bind:todo="item"
    v-bind:key="item.id"
  >
    </todo-item>
  </ul>
</div>
<script>
  Vue.component('todo-item', {
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
  });  

  var app = new Vue({
    el: '#app',
    data: {
      groceryList: [
        {id:0, text:'one'},
        {id:1, text:'two'},
        {id:2, text:'three'}
      ]
    }
  });
</script>

这只是一个假设的例子，但是我们已经设法将应用分割成了两个更小的单元，子单元通过 props 接口实现了与父单元很好的解耦。我们现在可以进一步为我们的 todo-item 组件实现更复杂的模板和逻辑的改进，而不会影响到父单元。

Instance

除了 data 属性， Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的 data 属性区分。

<div id="app">
</div>

<script>
var data = {a: 1};
var vm = new Vue({
  el: '#app',
  data: data
});

vm.$data === data;
vm.$el === document.getElementById("app");
</script>