构造器

用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 = 2data.a // -> 2// ... 反之亦然data.a = 3vm.a // -> 3

注意！只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

data没有，Vue 实例自有的实例属性与方法都有前缀 $，以便与代理的数据属性区分。

var data = { a: 1 }var vm = new Vue({  el: '#example',  data: data})vm.$data === data // -> truevm.$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钩子是用来运行，不用操作，页面刷新就会同步加载的逻辑。（如刷新页面，就会获取数据）