Detaillierte Erklärung der Vue-Komponenten

<Text>
    <div id="Wurzel">
        <h2>{{name}}</h2>
        <hr>
        <Schule></Schule>
        <hr>
        <Schüler></Schüler>
        <hr>
        <!-- <h2>Name des Studenten: {{name}}</h2>
        <h2>Alter des Schülers: {{age}}</h2> -->
    </div>
    <div id="root2">
        <hallo></hallo>
    </div>
    <Skript>
        Vue.config.productionTip = falsch;
        //Schulkomponente erstellen//el:'#root'
        //Achten Sie beim Definieren einer Komponente darauf, das Konfigurationselement „el“ nicht zu schreiben, da letztendlich alle Komponenten von einer VM verwaltet werden, die entscheidet, welcher Container bedient wird const school = Vue.extend({
            Vorlage: `
            <div>
                <h2>Name der Schule: {{schoolName}}</h2>
                <h2>Schuladresse: {{address}}</h2>
               <button @click="showName">Klicken Sie hier, um den Namen der Schule anzuzeigen</button>
                </div>
           `,
            Daten() {
                zurückkehren {
                    Schulname: 'Zweite Mittelschule',
                    Adresse: 'Peking',
                }
            },
            Methoden: {
                zeigeName() {
                    Alarm (dieser.Schulname)
                }
            }
        })
        //Der erste Schritt: Komponenten erstellen //Studentenkomponenten erstellen const student = Vue.extend({
            Vorlage: `
         <div>  
        <h2>Name des Studenten: {{name}}</h2>
        <h2>Alter des Schülers: {{age}}</h2>
        </div>
           `,
            Daten() {
                zurückkehren {
                    Name: 'Xiao Wang',
                    Alter: 20,
                }
            }
        })
        //VM erstellen
        neuer Vue({
            el: "#Wurzel",
            Daten: {
                Name: ,Hallo Welt!‘ '
            },
            //Schritt 2: Komponenten registrieren (lokale Registrierung)
            Komponenten:
                Schule,
                Student
            }
        })

        const hallo = Vue.extend({
            Vorlage: `
            <div><h2>Hallo! Student Wang</h2></div>
            `
        })
        Vue.component('hallo', hallo)
        neuer Vue({
            el: "#root2"
        })
    </Skript>
</body>