Home >Web Front-end >JS Tutorial >How to use the vue component life cycle

How to use the vue component life cycle

php中世界最好的语言Original: 2018-04-14 17:41:022506browse

This time I will bring you the vue componentlife cycleHow to use it, what are the notes when using the vue component life cycle, the following is a practical case, let's take a look.

Divided into 4 stages:

create/mount/update/destroy

Each stage corresponds to its own processingfunction

create: beforeCreate created

Initialization

mount: beforeMount mounted

Processing related to mounting

update: beforeUpdate updated

Make logical judgments based on the data to be updated

destroy:beforeDestroy destroyed

Cleanup work

Code:

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>生命周期</title>
 <script src="js/vue.js"></script>
 </head>
 <body>
 <p id="container">
  <p>{{msg}}</p>
<!--点击的时候isShow进行取反 -->
  <button @click="isShow = !isShow">切换是否显示组件</button>
  <my-component v-if="isShow"></my-component>
 </p>
 <script>
  Vue.component("my-component",{
   template:`
     <p>
      <button @click="handleClick">Click Me</button>
      <h1>component:{{count}}</h1>
      </p>
   `,
   data:function(){
     return {
      count:0
     }
    },
   methods:{
    handleClick:function(){
     this.count++;
    }
   },
   beforeCreate: function () {
   console.log('准备创建组件');
  },
  created: function () {
   console.log('组件创建完毕');
  },
  beforeMount: function () {
   console.log('组件的模板准备挂载到DOM');
  },
  mounted: function () {
   console.log('挂载完毕');
  },
  beforeUpdate: function () {
   console.log('准备更新了');
  },
  updated:function(){
   console.log('更新完成');
  },
  beforeDestroy: function () {
   console.log('准备destroy');
  },
  destroyed: function () {
   console.log('destroy完成');
  }
  })
  new Vue({
   el:"#container",
   data:{
    msg:"Hello VueJs",
    isShow:true
   }
  })
 </script>
 </body>
</html>

Life cycle exercises, which stage needs to be written

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>生命周期练习</title>
 <script src="js/vue.js"></script>
 </head>
 <body>
 <p id="container">
  <p>{{msg}}</p>
  <my-component></my-component>
 </p>
 <script>
  Vue.component("my-component",{
   data:function(){
    return {
     myOpacity:0
    }
   },
   template:` <h1 v-bind:style="{opacity:myOpacity}">透明度将改变
   </h1>`,
   mounted:function(){
    setInterval(function(){
     this.myOpacity += 0.1;
     if(this.myOpacity>1){
      this.myOpacity = 0;
     }
    }.bind(this),1000)
   }
  })
  new Vue({
   el:"#container",
   data:{
    msg:"Hello VueJs"
   }
  })
 </script>
 </body>
</html>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

How to use the vue component life cycle

Related articles