var data = {a: 1} var vm = new Vue({ el: ‘#example‘, data: data, created: function () { // `this` 指向 vm 实例 console.log(‘created a is: ‘ + this.a);//1 this.a = 2; }, mounted: function () { console.log(‘mounted a is: ‘ + this.a);//2 } }) vm.$data === data // -> true vm.$el === document.getElementById(‘example‘) // -> true vm.$watch(‘a‘, function (newVal, oldVal) { }); console.log(vm.a);//2 console.log(data.a);//2
创建Vue的根实例 就是
var vm = new Vue({ // 选项 })
选项有很多种 比如可以传入需要操作的DOM元素（挂载元素），传入data数据，模板，设置方法，生命周期钩子等等
http://cn.vuejs.org/v2/api/#选项-数据
实例上有$符号开头的一些变量，是vue实例提供的属性和方法，为了和data属性区分（因为data里的属性会直接暴露给vm变量），比如$data就是指传入的data对象（不过在实例化Vue后，传入的data被进行了改造），还有$el指的就是传入的el DOM元素，$watch可以侦听回调，另外还有一些生命周期相关的钩子函数，这些钩子函数（mounted、 updated 、destroyed）会在实例的不同生命周期被调用，完整的生命周期参考下图：
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构造器，写法如下：
var MyComponent = Vue.extend({ // 扩展选项 }) // 所有的 `MyComponent` 实例都将以预定义的扩展选项被创建 var myComponentInstance = new MyComponent()
这样做的话 就不是new Vue了，而是new 新构造器名字()，实际上所有的Vue组件都是被扩展的Vue实例。
原文：http://www.cnblogs.com/zhishaofei/p/6363247.html