1 <テンプレート> 2 の<divクラス= "TODO-ヘッダ"> 3 < INPUT 4 種類の= "テキスト" 5 プレースホルダ= "今日のタスクリストを入力してください、Enterキーを押します" 6 Vモデル= "タイトル" 7 keyup.enter = @ "のaddItem" 8 /> 9 </ div> 10 </テンプレート> 11 12である <SCRIPT> 13である エクスポートデフォルト{ 14 名： "ヘッダ" 、 15個の データ（）{ 16 リターン{ 17 タイトル： '' 18れる } 19 } 20である 方法：{ 21である のaddItem（）{ 22は // 1.空気か否かを判断 23である CONSTタイトル= この.title.trim（）; 24 IF（！タイトル）{ 25 アラート（ '入力タスクは「空にすることはできません！）、 26は 戻り; 27 } 28 // 2 TODOターゲット生成 29 LET {タイトル= TODO、終了を：falseに}; 30 // 3挿入メソッド呼び出し親要素 31 // this.addTodo（TODO）。 32 本 $（ 'addTodo'発する。、TODO）を、 33 34 // 4清空输入框 35 この .TITLE = '' ; 36 } 37 } 38 } 39 </スクリプト> 40 41 <スタイルスコープ> 42 .todo- ヘッダ入力{ 43 幅：560pxと、 44 高さ：28px; 45 font- サイズ：14px; 46 国境：1pxの固体#CCC。 47 BORDER- 半径4PX。 48 パディング：4PX 7px; 49 概要：なし。 50 } 51 52 .todo- ヘッダ入力：フォーカス{ 53 概要：なし。 54 ボーダーカラー：RGBA（255、0、0、0.8 ）。 55 ボックスシャドウ：インセット0 1ピクセル1ピクセルRGBA（255、0、0、0.075）、0 8px RGBA（255、0、0、0.6 ）。 56 } 57 </スタイル>
1 <テンプレート> 2 <DIV CLASS = "TODOコンテナ"> 3 <DIV CLASS = "TODOラップ"> 4 <ヘッダREF = "ヘッダ" /> 5 <リスト：= "ドス"ドス：delTodo = "delTodo "/> 6 <フッタ> 7 <入力スロット=" isCheck」タイプ= "チェックボックス" V-モデル= "isCheck" /> 8 <スパンスロット= "完了">已完成{{finishedCount}}件/总计{{ todos.length}}件</ span>の 9 <ボタンスロット= "削除"クラス= "BTN BTN-警告" @ = "delFinishedTodos"をクリックしてください> クリア</ button>のタスクを完了した10 </フッター> 11 </ DIV> 12 </ div> 13 </テンプレート> 14 15 <スクリプト> 16 // 引入组件 17 './components/Header'からインポートヘッダ 18 './components/List'からインポートリスト 19 「./components/からインポートフッターフッタ' 20 21 // 引入工具类 22 「./utils/localStorageUtilからインポートlocalStorageUtil' 23 のpubsub-JSからインポートPubSubの'' 24 25 エクスポートデフォルト{ 26 名： 'アプリ' 、 27個の データ（）{ 28 リターン{ 29 ドス：localStorageUtil.readTodos（） 30 } 31 } 32 計算：{ 33 finishedCount（）{ 34 リターン この .todos.reduce（（合計、TODO）=>総+（todo.finished 1：0） 0 ）。 35 }、 36 isCheck：{ 37 のget（）{ 38 リターン この .finishedCount === 本 .todos.length && この .todos.length> 0 39 }、 40 SET（値）{ 41は、 この.selectedAllTodo（値）; 42である } 43である } 44である }、 45の コンポーネント：{ 46は ヘッダー、 47 リスト、 48 フッター 49 }、 50 マウント（）{ 51である // カスタムイベントをバインディング（addTodo ）モニタ 52である 。この上の$ $のrefs.header（ 'addTodo'、.. この.addTodo）; 53である // サブスクリプション・メッセージ（delTodo） 54れる PubSub.subscribe（ 'delTodo'、（MSG、トークン）=>{ 55 // はconsole.log（トークンMSG）; 56は この.delTodo（トークン）; 57れる }）; 58 } 59の 方法：{ 60 //は、行挿入 61が addTodo（TODO）{ 62であり 、この.todos.unshift （TODO）; 63 } 64 // インデックスは、レコード削除するに従って 65 delTodo（インデックス）{ 66 この .todos.splice（インデックス1 ）; 67 } 68 // すべてのタスクを選択するかどうか 69 selectedAllTodo（isCheck）を{ 70 この .todos.forEach（すべて=> { 71 todo.finished = isCheck 72 }） 73 }、 74 delFinishedTodos（）{ 75 この .ALL = この .todos.filter（すべて=> todo.finished） 76 } 77 }、 78 時計：{ 79 // 深度监视 80 全：{ 81 ハンドラ：localStorageUtil.saveTodos、 82 ディープ：真、// 深度监视 83 // 即時：真 84 } 85 } 86 } 87 </スクリプト> 88 89 <スタイル> 90 .todo- 容器{ 91 幅：600PX。 92 マージン：0 自動; 93 } 94 95 .todo容器.todo- ラップ{ 96 パディング：10pxの。 97 国境：1pxの固体#ddd。 98 BORDER- 半径：5pxの。 99 } 100 </スタイル>