Vue.js 学习2 实例

一、构造器

每个Vue.js应用都是通过构造函数Vue创建一个Vue的根实例启动的：

var vm = new Vue({

});

实例化需要传入一个选项对象，可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。
参考 ：​​​https://cn.vuejs.org/v2/api/​​

1.全局配置

Vue.config包含Vue的全局配置，可以在启动应用之前修改下列属性：

silent

取消Vue所有的日志与警告。

optionMergeStrategies

自定义合并策略的选项。

devtools

配置是否允许vue-devtools。开发版本默认为true，生产版本默认为false。

errorHandler

指定组件的渲染和观察期间未捕获错误的处理函数。这个处理函数被调用时，可获取错误信息和Vue实例。

ignoredElements

使Vue忽略Vue之外的自定义元素。

keyCodes

给v-on自定义键位别名。

2.扩展Vue构造器

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

3.属性与方法

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实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀$，以便与代理的data属性区分。

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`  改变后调用
});

API参考：
​​​https://cn.vuejs.org/v2/api/​​

4.实例生命周期

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

生命周期图示：