vue-生命周期函数

生命周期函数：

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

lify组件：

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

    </div>
</template>

<script>
    export default {
     data(){
       return{
         msg:'我一个生命周期函数的组件'
       }
     },methods:{
       setMsg(){
         this.msg='我是改变后的数据'
       }
      }
      ,beforeCreate() {
       console.log('实例创建之前');
      },created() {
       console.log('实例创建完成');
      },beforeMount() {
       console.log('模板编译之前');
      },mounted() {/*请求数据，操作dom，放在这里面*/
       console.log('模板编译完成');
      },beforeUpdate() {
        console.log('数据更新之前');
      },updated() {
        console.log('数据更新之后');
      },beforeDestroy() {
        console.log('实例销毁之前');
      },destroyed() {
        console.log('实例销毁之后');
      }
    }
</script>

<style scoped>

</style>

app。.vue:

<template>
  <div id="app">

<!--    <h2>{{ msg }}</h2>-->
  <v-home></v-home>
    <hr>
    <v-news></v-news>
  </div>

</template>

<script>
  import Home from './components/Home.vue'
  import News from './components/News.vue'
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'

    }
  },components:{/*前面的组件名称不能与HTML标签一样*/
    'v-home':Home,
    'v-news':News
  },mounted() {
    console.log("我是一个生命周期函数")
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

Home:

<template>
    <div>
      <v-header></v-header>
      <hr>
      <h2>我是HOME主页--{{msg}}</h2>

      <button @click="run()">点击我</button>
      <v-life v-if="flag"></v-life>
      <br>
      <br>
      <br>
      <button @click="flag=!flag">挂载以及卸载life组件</button>
    </div>
</template>

<script>
  import Header from "./Header";
  import Lify  from "./Lify";
    export default {
        data(){
          return {
            msg:'我是一个首页组件',
            flag:true,

          }
        },methods:{
          run(){
            alert(this.msg);
          }
      },components:{
          'v-header':Header,
        'v-life':Lify
      }
    }
</script>

<style  scoped>
  h2{
    color: red;
  }

</style>