TODOリストのVueの基本的な演習

< 身体> 
   < div要素のid = "アプリ" > 
       < 入力タイプ= "テキスト" Vモデル= "inputValueで" /> 
       < ボタンVオン：クリック= "handleBtnClick" >提交</ ボタンを> 
       < UL > 
          <！ - - <LIのV-ため= "リスト内の項目"> {{アイテム}} </ LI> - > 
           < TODO項目V-バインド：コンテンツ= "項目" 
                       V-バインド：インデックス= "インデックス" 
                       V-用= "（項目、リストのインデックス）」 
                       @Delete = "handleItemDelete"> <！ - イベントをリッスンする- > 
           </ TODO-項目> 
       </ UL > 
   </ divの> 
   < スクリプト> 
       / * Vue.component（ "TodoItem"、{//グローバルコンポーネントの
           小道具：[ "コンテンツ"]、
          テンプレート： "<LI> {{コンテンツ}} </ LI>" 
       }）* / 
        VAR TodoItem = {
             // ローカルアセンブリ、例では、宣言する必要
            小道具：" コンテンツ" 、" インデックス" ]、
            テンプレート：" <李@クリック= 'handleItemClick '> {{内容}} </ LI> "、
            メソッド：{ 
                handleItemClick：機能（）{
                     この$ EMIT（。" 削除" 、この.INDEX）; // トリガイベント
                } 
            } 
        } 

        VAR のAppは= 新しい新しいヴュー（{ // インスタンスを作成して
            EL：" #app " 、/ / DOMインスタンスは、領域管理に責任がある
            コンポーネント：{
                 // サブアセンブリ文
              TodoItem：TodoItem、
            }、
            データ：{
                リスト：[]、
                inputValueで："" 
            }、
            メソッド：{ 
                handleBtnClick：関数（）{
                     この.list.push（この.inputValue）。
                    この.inputValue = "" ; 
                }、

                handleItemDelete：関数（指数）{
                     この.list.splice（インデックス1 ）。
                } 
            } 
        }）



   </ スクリプト> 

</ ボディ>