Vue回顾学习一（组件通信、数据方法，实例生命周期钩子）

组件建立以及组件通信：

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
});

var app = new Vue({
  el: 'app',
  data: {
    groceryList: [{
        id: 0, text: '蔬菜'
    }, {
        id: 1, text: '奶酪'
    }, {
        id: 2, text: '随便其它什么人吃的东西'
    }]
  }
});

<div id="app">
  <ol>
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>  
</div>

创建一个实例：每个Vue应用都是通过用Vue函数创建一个新的Vue实例开始的。

var vm = new Vue({
 // 选项
});

所有的Vue组件都是Vue实例

数据与方法

当一个Vue实例被创建时，它将data对象中的所有的属性加入到Vue的响应式系统中。
这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

将数据对象加入到一个Vue实例中。

var data = { a : 1}
var vm = new Vue({
  data: data
});

// 获得这个实例上的属性
// 返回源数据中对应的字段

vm.a == data.a // true

//设置属性也会影响到原始数据
vm.a = 2;
data.a // 2


// 反之亦然
data.a = 3;
vm.a // 3

当数据改变时，视图会重新进行渲染。

只有当实例被创建时data中存在的属性才是响应式的。 比如：vm.b = 'hi'; 对b的改动将不会出发任何视图的更新。代替方案，一开始设置一些初始值。

唯一的例外是使用Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。

var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new vue({
  el: '#app',
  data: obj
})


//除了数据属性，Vue实例还暴露了一些有用的实例属性与方法。它们都有前缀$，以便与用户定义属性区分开来。
var data = {a : 1}
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // true
vm.$el === document.getElementById('example') // true
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在`vm.a`改变后调用。
})

实例生命周期钩子

每个Vue实例在被创建时都要经过一系列的初始化过程–例如，需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。
同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

created钩子可以用来在一个实例被创建之后执行代码