Vueコンポーネントの詳細な説明

<本文>
    <div id="ルート">
        <h2>{{名前}}</h2>
        <時間>
        <学校></学校>
        <時間>
        <生徒></生徒>
        <時間>
        <!-- <h2>生徒名: {{name}}</h2>
        <h2>生徒の年齢: {{age}}</h2> -->
    </div>
    <div id="root2">
        <こんにちは></こんにちは>
    </div>
    <スクリプト>
        Vue.config で productionTip を false に設定します。
        //学校コンポーネントを作成//el:'#root'
        //コンポーネントを定義するときは、el 構成項目を記述しないでください。最終的にはすべてのコンポーネントが vm によって管理され、どのコンテナーを提供するかが決定されるためです。const school = Vue.extend({
            テンプレート: `
            <div>
                <h2>学校名: {{schoolName}}</h2>
                <h2>学校の住​​所: {{address}}</h2>
               <button @click="showName">クリックすると学校名が表示されます</button>
                </div>
           `、
            データ（） {
                戻る {
                    学校名: '第二中学校',
                    住所: '北京'、
                }
            },
            メソッド: {
                表示名() {
                    アラート(this.schoolName)
                }
            }
        })
        //最初のステップ: コンポーネントを作成する //学生コンポーネントを作成する const student = Vue.extend({
            テンプレート: `
         <div>  
        <h2>生徒名: {{name}}</h2>
        <h2>生徒の年齢: {{age}}</h2>
        </div>
           `、
            データ（） {
                戻る {
                    名前: 'シャオ・ワン'、
                    年齢: 20,
                }
            }
        })
        //VM を作成
        新しいVue({
            el: '#root',
            データ： {
                名前: 'Hello, World! '
            },
            //ステップ2: コンポーネントを登録する (ローカル登録)
            コンポーネント:
                学校、
                学生
            }
        })

        const hello = Vue.extend({
            テンプレート: `
            <div><h2>こんにちは！学生王</h2></div>
            `
        })
        Vue.component('hello', hello)
        新しいVue({
            el: '#root2'
        })
    </スクリプト>
</本文>