# vue_demo1.1學習筆記 文檔主Github歡迎關注??：[https://github.com/zhuayu/combat-todo](https://github.com/zhuayu/combat-todo) ## RUN ``` Vue Create vue_demo1.1 ``` ``` npm run serve ``` ## NO.1配置文件  引入base.css / index.css / index.html /并在App.vue中引入  成功引入后會顯示  接下來任務開始我們先把數據渲染上去使用到 1. 在 Vue.data 中定義 todos，todo 包含 title、completed 2. 在 templete 中使用 for 綁定 todos 數據進行渲染 ######   完成后我們成功把數據渲染到了Todolist中 ## 列表修改 任務要求： 1. 雙擊 todo 內容，其下面的 input 聚焦 2. 對 todo 的 input 修改后失去焦點或者按回車鍵，返回原來 todo 狀態并展示修改后的內容 任務提示： 1. 為 todo 中 label 元素綁定 dbclick 事件，當點擊 todo 時候把 todo 存儲到 Vue.data.editTodo 屬性中，同時把當前的 title 存儲到 Vue.data.beforeEditCache 作為緩存，方便撤銷操作。 2. 在 todos 渲染中判斷，如果 editTodo 等于該 todo 則顯示編輯狀態并且其 input 聚焦 3. 為 input 元素于 todo.title 進行雙向綁定，當修改 input 時同時修改 title 屬性 4. 為 input 綁定鍵盤事件與失去焦點事件，當時機出發時設置 editTodo 為 Null 返回原來狀態。 5. 為 input 綁定 ese 取消事件，取 beforeEditCache 的值重設。 ## 列表修改綁定事件  ## 列表綁定對應的方法   ## 狀態切換 任務要求： 1. 點擊完成的 todo 左側狀態按鈕，切換為未完成 2. 點擊未完成的 todo 左側狀態按鈕，切換未完成 3. 單擊頂部全選按鈕，如果未全選切換所有 todo 為全選 4. 點擊頂部全選按鈕，如果全選切換所有 todo 為未全選 任務提示： 1. 為 checkbox 雙向綁定 todo.completed 屬性 2. 為 Vue.computed 添加 allDone ，其 get 讀取屬性返回當前所有 todos 的 completed 是否為 true，其 set 設置所有 todos 的 completed 值為當前 get 值的反選擇。   ## 添加項目 本任務中，我們為列表添加多一項，當用戶在頂部輸入框輸入時，當按鈕下回車鍵時候，為列表中添加當前項目，title 為輸入值，狀態為未完成。 任務要求： 1. 在輸入框中輸入完畢，按回車鍵，往列表中添加未完成的一項 任務提示： 1. 為頂部輸入框綁定監聽回車事件，事件觸發時候為 todos 數據中 push 一項，同時講當前 value 設置為空。    ## 刪除項目 本任務中，我們需要來完成刪除項目的功能。刪除場景主要有 2 個，一個為在 todo hover 之后的右側有一個關閉按鈕，當點擊關閉按鈕時候刪除當前 todo 項目。在腳步導航的右側有一個刪除所有已完成的按鈕，點擊刪除所有已完成的 todo 項目。 任務要求： 1. 完成單條 todo 刪除功能 2. 完成所有已完成的 todo 刪除功能 任務提示： 1. 為刪除按鈕綁定點擊事件，點擊在 todos 移除當前自己的項目 2. 為刪除所有按鈕綁定點擊事件，點擊 todos.filter 一下 todo 重新設置 todos    ## 項目篩選 在底部導航位置有三個狀態，分別為 all、active、completed，全部、進行中、已完成的意思，在本次任務中，我們需要篩選切換不同的狀態來動態展示對應狀態的數據。 任務要求： 1. 默認在 all 狀態，展示所有狀態 todo 。 2. 點擊 active 狀態，展示沒有完成的 todo 。 3. 點擊 completed 狀態，展示已完成的 todo 。 任務提示： 1. 定義 Vue.data.filter 狀態為 all 2. 定義展示數據 showTodo ，更具 filter 的類型返回不同的數據 3. 點擊導航切換 filter 的值  ## 組件分離 任務要求： 1. 把頁面拆分為 TheHeader、TodoList、TheFooter 三個部分 2. 分離后能正常使用