VUE-例

：コンポーネントケースコメント

次のようにHTMLコードは次のとおりです。

<身体>
    <DIV ID = " アプリ" >
        <COM1 @ FUNC = " loadComments " > </ COM1>
        <UL クラス = 「リスト・グループ」 >
            <LIのクラス = 「リストグループ項目」 V- 用 = 「リスト内の項目」：キー= 「item.id 」 >
                <スパンクラス = " バッジ" >评论人：{{item.user}} </スパン>
                {{}} item.content
            </ LI>
        </ UL>
    </ div>
    <テンプレートID = " 箱" >
        <div>
            <divのクラス = 「フォームグループ」 >
                <ラベル>评论人：の<input type = " テキスト"  クラス = " フォームコントロール" V-モデル= " ユーザ" > </ラベル>
            </ div>
            <divのクラス = 「フォームグループ」 >
                <ラベル>评论内容：<TEXTAREAのクラス = " フォームコントロール" Vモデル= " コンテンツ" > </ TEXTAREA> </ label>は
            </ div>
            <divのクラス = 「フォームグループ」 >
                <input type = " ボタン"値= " 评论"  クラス = " BTN BTN-主" @クリック= " postComment " > </入力>
            </ div>
        </ div>
    </テンプレート>
</ BODY>

次のようにVUEのコードは次のとおりです。

<スクリプト>
     のvar commentBox = {
        テンプレート：' #box ' 、
        データ（）{
            リターン{
                ユーザー：'' 、
                内容：'' 、
            }
        }、
        方法：{
            Postcomment（）{ // コメントボタン
                 // コメントが取得されたデータ
                のvarコメント= {ID：Date.now（）、ユーザー：この .user、内容：この.content}
                 // のlocalStorageからのコメントを取得
                するvar一覧= JSONを.parse（localStorage.getItem（' CMTS '）|| ' [] ' ）。
                list.unshift（コメント）。
                // 再セーブ最新のデータレビュー、 
                localStorage.setItem（「CMTS 」、JSON.stringify（リスト））;
                 // レビューをクリックした後、データを消去し
                、この .userを= この .contentは= 「」;
                 //は、ときにコメントをクリックしてくださいリフレッシュするために親コンポーネントサブアセンブリのメソッドを呼び出して、上の
                この $ EMIT（。「FUNCを」）;
            }
        }、
    }
    新しいビュー（{
        上：' #app ' 、
        データ：{
            リスト：[
                ID {：Date.now（）ユーザ：「ジョン・ドウ1 'コンテンツ：' 1有用であるために' }、
                ID {：Date.now（）ユーザ：「ジョン・ドウ2 'コンテンツ：' 2有用であるために' }、
                ID {：Date.now（）ユーザ：「ジョン・ドウ3 'コンテンツ：' 3有用であるために' }、
            ]
        }、
        作成した（） {
            この.loadComments（）;
        }、
        方法：{
            loadComments（）{
                 // コメントからのlocalStorageを取得するページリフレッシュ
                 するvar一覧を= JSON.parse（localStorage.getItem（' CMTS '）|| ' [] ' ）;
                  この .LIST = リスト。
            }
        }、
        成分：{
            COM1：commentBox
        }
    }）;