vue.js学习——实例分析

一个vue实例相当于MVVC里面的viewModel。

• 构造器

   

var vm =  new Vue({});

           可以扩展vue构造器，从而用预定义选项创建可复用的组件构造器。vue里面所有的组建都是扩展着vue的实例。

var component  = Vue.extend({});

var myComponentIns = new component();

•  属性和方法

实际上vue是代理的data的内容。一旦vue和data绑定之后，修改那一端的数据，都会触发该数据的修改。但是需要注意的是，代理是响应式的，一旦实例创建，再绑定新的属性，不会引起视图的修改。可以在实例的属性和方法前面加$，用于做区分。

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

data.a === vm.a; // true

•  生命周期

  下图为vue的官方生命周期图。

  可以在created，beforeCompile，compile，ready，beforeDestory，destoryed自定义操作。this指向vue实例