vue-component-生命周期

 head部分：

<script type="text/javascript" src="bower_components/vue/dist/vue.min.js"></script>

body部分的html代码：

 <!--组件的生命周期有八个，点乘式为[create,mount,update,destroy] x [before,ed]-->
    <div id="app">
        <newcomponent1 v-if="show"></newcomponent1>
        <!--button用来销毁和创建组件-->
        <button @click="ifShow">创建/销毁</button>
    </div>

script部分的代码：

<script>
        new Vue({
            el:"#app",
            data:{
                show:true
            },
            components:{
                "newcomponent1":{
                    //vue2.0中只允许template只存在一个元素，多种元素组合就得包裹在一个盒子里面
                    template:'<div><p>{{message}}</p><br/><button @click="message++">+1</button></div>',
                   data:function(){
                        return {message:0};
                   },
                    beforeCreate:function(){
                        //别想着在这里调用methods的方法了，不可能的，盘古还没开天地，你咋抬头都看不见天。
                        //其实我们可以把整个vue实例看做一个组件，以便于我们理解vue的生命周期
                        console.log("called before create!")
                    },
                    created:function(){
                        this.createdFun();
                    },
                    beforeMount:function(){
                        this.beforeMounteFun();
                    },
                    mounted:function(){
                        this.muntedFun();
                    },
                    beforeUpdate:function(){
                        this.beforeUpdateFun();
                    },
                    updated:function(){
                        this.updatedFun();
                    },
                    beforeDestroy:function(){
                        this.beforeDestroyFun();
                    },
                    destroyed:function(){
                        this.destroyedFun();
                    },methods:{
                        //beforeCreateFun:function(){
                        //   console.log("called before create!")
                        //},为什么注释掉，因为beforeCreate取不到内部的任何数据
                        createdFun:function(){
                            console.log("called created!")
                        },beforeMounteFun:function(){
                            console.log("called before mounte!")
                        },muntedFun:function(){
                            console.log("called mounted!")
                        },beforeUpdateFun:function(){
                            console.log("called before update!")
                        },updatedFun:function(){
                            console.log("called updated!")
                        },beforeDestroyFun:function(){
                            console.log("called before destroy!")
                        },destroyedFun:function(){
                            console.log("called distroy!");
                        }
                    }
                }
            },
            methods:{
                ifShow:function(){
                    this.show = !this.show;
                }
            }
        });
    </script>