VUE制御コンポーネント

<HTML> 
    <HEAD> 
        <TITLE> </ TITLE> 
        <META NAME = "ビューポート"コンテンツ= "幅=幅デバイス、初期スケール= 1.0"> 
        <SCRIPT SRC =「https://cdn.jsdelivr.net /npm/vue/dist/vue.js「> </ SCRIPT> 
       <SCRIPT> 
       window.onload =関数（）{ 
           //アセンブリ
           VAR = MYCOMP Vue.extend（{ 
               //テンプレート：ルートノードが存在しなければならない、
               テンプレート。 'COMPONENTハロー<の/ H1> <H1の>' 
           }）
           //名前仕様ハイフン- 
           Vue.component（ 'こんにちは'、MYCOMP）; 
           //第二の方法：
           Vue.component（ 'マイ・コンポーネント'、{ 
               テンプレート： ' <H2>张... </ H2>」 
           }） 
           新しい新規のVue（{
            エル： "#app"、     
                    データ：関数（）{
            データ：{ 
                
            }、
            コンポーネント：{ 
                '私のアドレス'：{ 
                    テンプレート： '<H2>张... </ H2>' 
                }、
                '私の-アドレス2'：{ 
                    テンプレート： "＃1 myAddress2"、
                    データ：機能（ ）{ 
                        リターン{ 
                            タイトル： "タイトル"、
                            リスト：[1,2,3,4] 
                        } 
                    } 
                }、
                '私のタブ'：{ 
                    テンプレート： "＃1 myAddress3"、
                        リターン{
                            tabtitil：[ 'タイトルA'、 'タイトルII'、 'タイトル3']、
                            tabContent：[ 'A'、 'B'、 'C']、
                            CUR2 :. 1、
                        } 
                    } 
                } 
            } 
         }）
       } 
       </ SCRIPT > 
       <スタイル> 
            UL、李{ 
                パディング：0;マージン：0 
            } 
            .TABリチウムTIT { 
                パディング：10pxの15ピクセル、
                テキスト整列=左：センター; 
                リストスタイル：なし; 
                カーソル：ポインタ;
                表示：インラインブロック。
            }
            .TAB-CONの李{ 
                パディング：10pxの15ピクセル。
                テキスト整列：センター; 
                リストスタイル：なし。
                カーソル：ポインタ; 
                表示：インラインブロック。
            } 
        </スタイル> 
        <テンプレートID = "myaddress2"> 
            の<div> 
                <P> {{タイトル}} </ P> 
                <UL> 
                    <LIのV-ため= "（V、I）リストで"> {{V }} </ LI> 
                </ UL> 
            </ div> 
        </テンプレート> 
        <テンプレートID = "myAddress3"> 
                    < "tabtitilに（V、I）"のLi V-ため= @クリック= "CUR2 = I"> {{V}} </李>
                    <LIのV-ため= "（V、I）tabContentで" V-ショー= "CUR2 === I"> {{V}} </ LI> 
                </ UL> 
            </ div> 
        </テンプレート> 
    </ヘッド> 

    <身体> 
        の<divのid = "アプリ"> 
           <こんにちは> </こんにちは> 
           <私の成分> </私の成分> 
           <私のアドレス> </私のアドレス> 
           <私の-アドレス2> </私-address2> 
           <私のタブ> </私のタブ> 
        </ div> 
    </ BODY> 
</ HTML>
おすすめ
