suchen

Heim  >  Artikel  >  Web-Frontend  >  So nutzen Sie den Vue-Komponentenlebenszyklus

So nutzen Sie den Vue-Komponentenlebenszyklus

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

Dieses Mal erkläre ich Ihnen, wie Sie den Lebenszyklus der Vue-Komponente verwenden und welche Vorsichtsmaßnahmen bei der Verwendung des Vue-Komponenten-Lebenszyklus gelten. Das Folgende ist ein praktischer Fall Schauen Sie mal rein.

Aufgeteilt in 4 Stufen:

erstellen/mounten/aktualisieren/zerstören

Jede Stufe entspricht einer eigenen Verarbeitung Funktion

erstellen: vorErstellen erstellt

Initialisierung

mount: beforeMount montiert

Verarbeitung im Zusammenhang mit der Montage

Update: beforeUpdate aktualisiert

Treffen Sie logische Urteile auf der Grundlage der zu aktualisierenden Daten

zerstören:vorZerstören zerstört

Aufräumarbeiten

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>

Lebenszyklusübungen, welche Phase in welcher Phase geschrieben werden muss 

<!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>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln die chinesische PHP-Website!

Empfohlene Lektüre:

Wie Vue Scheindaten aufruft

Ein praktisches Tutorial zur Verwendung von Vue-Routing-Hooks

So verwenden Sie die mobile Komponentenbibliothek von Vue.js

Das obige ist der detaillierte Inhalt vonSo nutzen Sie den Vue-Komponentenlebenszyklus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So verwenden Sie geschweifte Klammern in VueNächster Artikel：So verwenden Sie geschweifte Klammern in Vue

In Verbindung stehende Artikel

Mehr sehen