IMWeb訓練營作業 todo list

通過這兩天對todo list例項的學習與實踐，對vue有了進一步的了解和認識。

html**：

html

>
<
html
>
<
head 
lang=
"en"
>
<
meta 
charset=
"utf-8"
>
<
link 
rel=
"stylesheet" 
href=
"index.css"
>
<
title
>todo list
title
>
<
script 
src=
"vue.js"
>
script
>
head
>
<
body
>
<
div 
id="header"
>
<
p>任務計畫列表
p>
div>
<
div 
id="main"
>
<
div 
id="addtask"
>
<
p>新增任務
p>
<
input 
id="inputinfo" 
type=
"text" 
placeholder=
""@keyup.enter=
"addtodo"
v-model=
"todo"
/>
<
ul v-show=
"list.length"
>
<
li><
a href=
"#finished"
>完成的任務
a>
li>
<
li><
a href=
"#unfinished"
>未完成的任務
a>
li>
<
li><
a href=
"#all"
>所有任務
a>
li>
<
li id=
"taskundo"
>}個任務未完成
li>
ul>
div>
<
div 
id="tasklist"
>
<
p>任務列表
p>
<
span 
v-show=
"!list.length"
>還未新增任何任務
span
>
<
ul>
<
li 
v-for=
"item in filteredlist" 
:class=
"">
<
div>
<
input 
type=
"checkbox" 
class=
"choosebox" 
v-model=
"item.ischecked" 
/>
<
label 
@dblclick=
"edtortodo(item)"
>}
label
>
<
div 
id="destroy" 
@click=
"deletetodo"
>x
div>
div>
<
input 
class=
"edit" 
type=
"text" 
v-model=
"item.title" 
v-focus=
"item===edtortodos"
@blur=
"edtortodoed"
@keyup.enter=
"edtortodoed"
@keyup.esc=
"canceltodo(item)"
/>
li>
ul>
div>
div>
<
script 
src=
>
script
>
body
>
html
>

js**：

var 

store=
,fetch
(key)};
var 
list=store
.fetch
("myplanning"
);var 
vm=new 
vue(,
watch:
,deep:
true}},
computed:
).length;
},filteredlist
:function
(),finished
:function
(list
));},
unfinished
:function
(list
));}
};return 
filter
[this
.visibility]
?filter
[this
.visibility](
list
):list;}
},methods: 
);this
.todo="";
},deletetodo
(todo
),edtortodo
(todo
),edtortodoed
(),canceltodo
(todo)},
directives:}}
}});
function 
watchhashchange
()watchhashchange
();window.
addeventlistener
("hashchange"
,watchhashchange
);

主要應用到的知識點：

1.通過v-for指令完成對一組陣列的選項列表的渲染
2.通過v-on指令來監聽dom事件的觸發（簡寫為@）
3.事件修飾符的使用（如：.enter .ese .鍵值等）
4.通過v-model完成對資料的雙向繫結
5.通過v-show指令完成條件渲染，即根據表示式的值來判斷顯示還是隱藏元素
6.通過v-bind指令動態繫結class，在條件滿足時為元素新增類名顯示不同的樣式（v-bind簡寫為「：」）
7.自定義指令，在選項物件中新增directives屬性完成對自定義指令的定義
8.通過計算屬性可以完成對資料的過濾篩選，在選項物件的computed屬性中定義
9.訪問localstorage中的資料
10.通過監控雜湊值對list陣列進行篩選

IMWeb訓練營作業 todolist

先來幾張。預設的外觀 新增幾個待辦適宜後的外觀 編輯待辦適宜後的外觀 標記為已完成後的外觀 篩選未完成的外觀 刪除1個待辦適宜後的外觀 實現思路 用乙個陣列儲存所有待辦適宜。每個待辦適宜的格式是如下 我用新建待辦適宜時的時間戳做那條待辦適宜的id。對待辦適宜的增刪改查就是對陣列的增刪改查。下面是部分...

IMWeb訓練營作業 Todolist

v for指令 根據一組陣列的選項列表進行渲染 語法 value，key in items value，key of items 變異方法 vue提供一組方法，對陣列進行操作時候，會觸發檢視更新 push pop shift unshift splice sort reverse 事件處理器 v o...

IMWeb訓練營作業 Todo

vuejs 學習 todo 時間問題，作業僅支援移動端 作業使用vue cli搭建開發環境，修改了部分webpack配置，採用模組化開發形式，部分內容加入了動畫效果，支援雙擊todo進行編輯，支援hash監聽，沒有設計師，視覺呈現請dalao多見諒 雙擊間隔最大時間 const double tou...