Lebenszyklus und Hook-Funktionen in Vue

  <script src="./js/vue.js"></script>
    <Skript>
        lass vm = neues Vue({
            el:'#app',
            Daten:{
                Name:"Hahaha",
                Zahl:1111
            },
            Methoden: {
                
            },
 
            // Bevor die Vue-Instanz erstellt wird beforeCreate(){
                console.log('vorErstellen');
                konsole.log(dieser.name);
            }
    </Skript>

erstellt --- Nachdem die Vue-Instanz erstellt wurde, beachten Sie: In dieser Funktion können die Daten im Rechenzentrum von Vue identifiziert werden <script src="./js/vue.js"></script>
    <Skript>
        lass vm = neues Vue({
            el:'#app',
            Daten:{
                Name:"Hahaha",
                Zahl:1111
            },
            // Nachdem die Vue-Instanz erstellt wurde created(){
                console.log("erstellt");
                konsole.log(dieser.name);
            }
        })
    </Skript>

  <div id="app">
        <p>{{name}}</p>
        <p>{{Anzahl}}</p>
    </div>
<script src="./js/vue.js"></script>
    <Skript>
        lass vm = neues Vue({
            el:'#app',
            Daten:{
                Name:"Hahaha",
                Zahl:1111
            },
            //Bevor DOM gemountet wird beforeMount(){
                console.log("vorMount");
                   //DOM-Elemente anzeigen console.log(document.body.querySelector("#app").innerHTML);
            }
        })
    </Skript>

 gemountet --- nachdem DOM gemountet wurde, this.$el --- zu diesem Zeitpunkt ist $el der „echte“ DOM-Knoten <script src="./js/vue.js"></script>
    <Skript>
        lass vm = neues Vue({
            el:'#app',
            Daten:{
                Name:"Hahaha",
                Zahl:1111
            },
            // Nachdem DOM gemountet wurde mounted(){
                console.log("gemountet");
                Konsole.log(Dokument.Body.QuerySelector("#app").innerHTML);
            }
        })
    </Skript>

  
    <div id="app">
        <p id="Anzahl">{{Anzahl}}</p>
        <button @click="num++">Klickdatenaktualisierung (num+1)</button>
    </div>
  //Vor der Datenaktualisierung beforeUpdate(){
                console.log("beforeUpdate – vor der Datenaktualisierung");
                // DOM-Elemente anzeigen console.log(document.body.querySelector("#num").innerHTML);
            },
            //Nachdem die Daten aktualisiert wurden updated(){
                console.log("aktualisiert – Nachdem Daten aktualisiert wurden");
                // DOM-Elemente anzeigen console.log(document.body.querySelector("#num").innerHTML);
            }