第十一课 生命周期函数/生命周期钩子

Home组件加载 Header和Lify组件

 

Header.vue

<template>

        

    <div>

            

        <h2 class="header">这是一个头部组件</h2>

    

    </div>

</template>

<script>

    export default {

        data(){

            return{

                msg:'这是一个头部组件'

            }

        }

    };

</script>

<style lang="scss">

    

.header{

    background:#000;

    color:#fff;

}

    

</style>

 

 

 

 

Lify.vue

<template>

    <!-- 所有的内容要被根节点包含起来 -->

    <div id="life">

          生命周期函数的演示    ---{{msg}}

        <br>

          <button @click="setMsg()">执行方法改变msg</button>

    </div>

</template>

<script>

/*

  生命周期函数/生命周期钩子：

    组件挂载、以及组件更新、组件销毁、的时候触发的一系列的方法  这些方法就叫做生命周期函数

    自动调用相对应的函数执行

*/

    export default{

        data(){

            return{

                msg:'msg'

            }

        },

        methods:{

            setMsg(){

                this.msg="我是改变后的数据"

            }

        },

        beforeCreate(){

            console.log('实例刚刚被创建1');

        },

        created(){

            console.log('实例已经创建完成2');

        },

        beforeMount(){

            console.log('模板编译之前3');

        },

        mounted(){     /*请求数据，操作dom , 放在这个里面  mounted*/

            console.log('模板编译完成4');

        },

        beforeUpdate(){

            console.log('数据更新之前');

        },

        updated(){

            console.log('数据更新完毕');

        },

        beforeDestroy(){   /*页面销毁的时候要保存一些数据，就可以监听这个销毁的生命周期函数*/

            console.log('实例销毁之前');

        },

        destroyed(){

            console.log('实例销毁完成');

        }

    }

</script>

 

 

 

 

Home.vue

<template>

    <!-- 所有的内容要被根节点包含起来 -->

    <div id="home">

            <v-header></v-header>

            <br>

            <hr>

            <!-- true/false是否显示 -->

            <v-life v-if="flag"></v-life>

             <br>

              <br>

               <br>

            <button @click="flag=!flag">挂载以及卸载life组件</button>

    </div>

</template>

<script>

    //引入头部组件

    import Header from './Header.vue';

    import Life from './Lify.vue';

    export default{

        data(){

            return {

                msg:'我是一个首页组件msg',

                flag:true

            }

        },

        methods:{

            run(){

                alert(this.msg);

            }

        },

        components:{

            'v-header':Header,

            'v-life':Life

        }

    }

</script>

<style lang="scss" scoped>

    /*css  局部作用域  scoped*/

    h2{

        color:red

    }

</style>