vue 之 生命周期函数

主页

<template>
  <div id="app">  
    <!-- 3.在模板中使用 --> 
    <v-header> </v-header>
  
   <hr>
   <br>
   <!-- <v-news></v-news> -->
   <v-lify></v-lify>

   <hr>
   <br>
    <v-home></v-home>
  </div>
</template>
          
<script>
/*
 1、引入组件

  2、挂载组件

  3、在模板中使用

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

    组件挂载、以及组件更新、组件销毁、的时候触发的一系列的方法 
     这些方法就叫做生命周期函数
 */
//1. 引入组件
import Home from './components/Home.vue';
import Header from './components/Header.vue';
import News from './components/News.vue';
import Lify from './components/Lify.vue';
    export default {  
      //2. 挂载组件
      components:{
    'v-home':Home,
    'v-news':News,
    'v-header':Header,
    'v-lify':Lify,
  
},   
      data () {  /*业务逻辑里面定义的数据*/
        return {
         msg:'你好vue',
        }
      },
      methods:{         
      },
         
    }

组件页

<template>   
<div>
<h2 class="header">这是一个头部组件</h2>
</div>
</template> 
<script>
export default {
    data(){
        return{
            msg:'我是头部组件',
        }
    }
}
</script> 
<style scoped>
.header{
    background: #000;
    color: #fff;
}
    
</style>

组件页

<template>
<div id="lify">
生命周期函数的演示----{{msg}}
<button @click="setMsg()"> 执行方法改变msg</button>
</div>
</template>  


<script>
export default {
    data(){
        return{
            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>> 

组件页

<template>
    <div id="home">
          <!-- <v-news></v-news> -->
         <br>
         <hr>
       <v-life v-if="flag"></v-life>     


       <br>
       <br>
       <br>
       <button @click="flag=!flag">挂载以及卸载life组件</button>   
    </div>
</template>
 <script>
 //引入组件
import News from './News.vue';
import Lify from './Lify.vue';
 export default{
      components:{
     'v-news':News,
     'v-life':Lify,
  
},   
     data(){
         return{
             msg:'我是一个首页组件',
             flag:true
         }
     },
     methods:{
         run(){
             alert(this.msg)
         }
     },
 }


 </script>