Vue框架整理：一、vue.js应用 与 生命周期

Vue 的创建比较简单，通过构造函数Vue就可以了，然后就是一个必选项el.

这个el可以是个html 元素，也可以是CSS 的选择器：

<script>
var first=new Vue({
        el : document.getElementById('v1')      //html
    });

    var second=new Vue({
        el : '#v1'          //CSS
    });

</script>

接下来就是data 这个对象了， 在这里可以声明需要双向绑定的数据, 这些数据可以是直接声明的，也可以是一个变量，

var third=new Vue({
            el:"#v1",
            data: {
                a:111        //声明一个对象
            }
        });

        console.log(third.a);       //111

需要注意的是，如果指向的是一个变量，那么他们已经默认的建立了双向绑定的关系，修改其中任意一个，另一个也会有变化

var test={
        a:30
    };

    var third=new Vue({
        el:"#v1",
        data: test
    });

    console.log(third.a);       //30

    third.a=20;             //修改data里面的数据，test也会随着修改

    console.log(third.a);       //20

    console.log(test.a);        //20

生命周期

Vue每次创建的时候，都会有一个初始化的过程，这时就有了相对应的生命周期，
类似于JavaScript的 onload 等事件，Vue也有自己对应的方法：
一般常用的有：

created : 见名知意，就是创建完成后调用，不过此阶段只是完成数据的观测，没有进行挂载，$el不能使用，需要初始化一些数据时使用。

mounted : 翻译过来就是安装完成后，也就是el挂在到实例上以后调用，页面最初要使用的的一些方法可以放这

beforeDestory : 实例销毁之前调用，可以解除一些绑定的事件等；

<script>
var app=new Vue({
        el:"#v1",
        data:{
            a:100
        },
        created:function () {
            console.log(this.a);  //2  这里的this指向 Vue实例 data
        },
        mounted:function () {
            console.log(this.$data);     // 指向上面的data对象
        }
    })
</script>

对于生命周期详细的内容下面这个人写的也不错，推荐一下：

https://segmentfault.com/a/1190000008010666