常用js框架之vue.js(深入一:Vue实例）

选一个框架深入最怕选错，然而犹豫更让人蛋疼，终于看到一篇文章决定让我深入vue.js的学习。http://blog.csdn.net/maray/article/details/50986200今年3月份写的，应该不至于太落伍，虽然我也不明白作者为什么说它是梦想中的框架，先学了再说
官网(2.0rc了)：http://vuejs.org/guide/
中文版(1.0)：http://cn.vuejs.org/guide/

一、Vue实例是个什么概念？如果你了解面向对象编程比如java，这个概念就很容易懂了，没有基础的童鞋得先了解下类和对象（实例），百度一下就行了。后面均用这种概念来描述。

我们把vue当做一个基类，那么前面我们入门时用的案例new vue()就是创建了vue类的一个实例(对象)。当一个类的实例（对象）被新建，新建之后数据就开始被绑定，也就是m-v-vm的vm层会做数据绑定处理。
实例创建的方式有多种：
1.new vue()
2.var vm = new Vue({
// 选项
})
ps:这里创建实例后赋值给变量vm
3.var MyComponent = Vue.extend({
// 扩展选项
})
// 所有的 MyComponent 实例都将以预定义的扩展选项被创建
var myComponentInstance = new MyComponent()
ps:extend字段在java里是很眼熟的，就是继承。同样的，不懂得去查。此时，MyComponent相当于vue的子类，其拥有了vue中的一切，同时他还可以自定义一些内容进行扩展。
同样的new MyComponent会创建这个类的实例（对象）。

二、vue中的属性和方法
前面也用过

var vm = new Vue({
        el:'#app',
        data:{message:'我去！！'},
        methods:{
            reverseMessage:function(){
                this.message = this.message.split("").reverse().join("");
            }
        }
    })

这个vm实例，el，data，methods都是他的属性。当然了还有一些来自基类vue的属性和方法，比如watch，on等。
每个 Vue 实例都会代理其 data 对象里所有的属性：所以vm可以访问message，vm.message。同样的可以vue基类的属性和方法，为了有所区分，使用vue的属性时得添加$ ,比如vm.$el vm.$on vm.$watch
所以我们前面猜测代码中的this指的是data可能不对，是vm实例会比较像，这样猜测会比较正常。

三、vue的生命周期
说道生命周期，开发过移动app的肯定特别熟悉。生命周期在这里暂时这样描述，一个实例从创建到销毁，它会经历的所有方法。
vue基类中有许多方法，其中一些便是这种生命周期方法，比如创建的时候会触发create，销毁的时候会触发destroy。所以再去看看官网的流程图，可能就会明白它有哪些生命周期方法，上面出现的方法都是。
create：
beforeCompile：
compiled：
ready：
beforeDestroy：
destoryed：
执行时机上面也有说明，后面会慢慢理解。