深入浅出vue1.0：Vue 实例

构造器

用vue必须先 通过构造函数Vue 创建一个 Vue 的根实例（喂！我要用vm啦！）

//vm是 MVVM 模式中所描述的 ViewModel 缩写
var vm = new Vue({
  // 选项（必选，可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。）
})

组件构造器（所有的 Vue.js 组件其实都是被扩展的 Vue 实例）

var MyComponent = Vue.extend({
  // 扩展选项
})
// 所有的 `MyComponent` 实例都将以预定义的扩展选项被创建
var myComponentInstance = new MyComponent()

属性与方法

每个 Vue 实例都会代理其 data 对象里所有的属性（意思是：data内的属性就是vm的属性）

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没有，Vue 实例自有的实例属性与方法都有前缀 $，以便与代理的数据属性区分。

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true

// $watch 是一个实例方法
vm.$watch('a', function (newVal, oldVal) {
  // 这个回调将在 `vm.a`  改变后调用
})

实例生命周期

Vue 实例在创建后会自己执行一些程序（调用一些生命周期钩子）
你可以在被这些钩子里 自定义逻辑
例如 created 钩子在实例创建后调用：

var vm = new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// -> "a is: 1"

还有一些其它的钩子，在实例生命周期的不同阶段调用，如 compiled、 ready 、destroyed。钩子的 this 指向调用它的 Vue 实例。
因为Vue.js没有“控制器”，所以 组件的自定义逻辑可以分割在这些钩子中。

生命周期图示

吐槽

$属性用的少，data都是后台传来的，除特殊的需要前端处理下，剩下都是有啥用啥~
created钩子是用来运行，不用操作，页面刷新就会同步加载的逻辑。（如刷新页面，就会获取数据）