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也有自己对应的方法：

其实吧，只要把不同生命周期的 英文 翻译成中文就很好理解了：

<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>

vue的生命周期共分为8个部分，直接用代码展示下：

new Vue({
        el: '#v1',
        data: {
            message: 'vvv!'
        },
        beforeCreate: function() {
            //1、 见名知意，就是创建实例前调用

            console.log("创建前")

        },
        created: function() {
            //常用，创建完成后调用，不过此阶段只是完成数据的观测，没有进行挂载，$el不能使用，需要初始化一些数据时使用。
            console.log("创建完成后调用");

        },
        beforeMount: function() {
            //即将挂载的时候调用

            console.log("mount之前")

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

            console.log("安装完成后调用")

        },

        beforeUpdate: function() {

            console.log("更新前");

        },
        updated: function() {

            console.log("更新完成");

        },

        beforeDestroy: function() {
            //常用，实例销毁之前调用，可以解除一些绑定的事件等
            console.log("销毁之前调用");

        },

        destroyed: function() {

            console.log("已销毁");

        }
    })