Vuejs --02 Vue实例

一、构造器

     1、vm（view model 表示Vue实例），每个Vuejs都是通过构造函数Vue创建Vue的根实例启动

var vm = new Vue({     //传入一个选项对象{}，可以包含数据data（object|function）、模板templete（会完全替代挂载元素，包含挂载元素本身）、方法methods、挂载元素el ( CSS选择器或HTMLElement实例 )、生命周期钩子等
     //选项
});

              

     2、扩展Vue构造器，从而用预定义的选项创建可复用的组件构造器     （注意：Vue.js 组件都是被扩展的Vue实例）

var MyComponent = Vue.extend({
     //扩展选项
})

var myComponentInstance = new MyComponent();     //尽管可以命令式地创建扩展实例，不过在多数情况下建议将组件构造器注册为一个自定义元素，然后声明式地用在模板中。

  

二、属性与方法

     1、每个Vue实例都代理data对象      注意只有这些被代理的属性是响应的，也就是说值的任何改变都是触发视图的重新渲染。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

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

     

     2、 除了 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` 改变后调用
})

 

三、实例生命周期