3.利用

addhandleAdd/TodoHeaderTodoMain

:listlist

handelDelhandelDel/TodoMainTodoFooter

:listlist

clearhandleClear/TodoFooter/section

/templatescript

JSON.parse(localStorage.getItem(list))

id:

{TodoFooter,TodoHeader,TodoMain,},methods:{handleAdd(value){this.list.unshift({id

new

value})},handelDel(value){this.list

item.id

value)},handleClear(){this.list

true,handler(newValue){localStorage.setItem(list,JSON.stringify(newValue))}}}

/scriptstyle

--h1小黑记事本/h1inputkeyup.enteradd()placeholder请输入任务classnew-todov-model.trimTodoName/button

clickadd()

{alert(输入内容不能为空);return}this.$emit(add,

},},

clickdel(item.id)/button/div/li/ul/section

/templatescript

{props:{list:Array},methods:{del(id){this.$emit(handelDel,id)}}

/scriptstyle

Array},methods:{clear(){this.$emit(clear)}}

/scriptstyle

./styles/index.cssVue.config.productionTip

falsenew

antialiased;-moz-osx-font-smoothing:

grayscale;

antialiased;-moz-osx-font-smoothing:

300;

input::-webkit-input-placeholder

{font-style:

optimizeLegibility;-moz-text-rendering:

optimizeLegibility;text-rendering:

optimizeLegibility;

border-box;-webkit-font-smoothing:

antialiased;-moz-osx-font-smoothing:

grayscale;

https://bugzilla.mozilla.org/show_bug.cgi?id922433IE

and

https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/*/background-image:

url(data:image/svgxml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E);background-repeat:

center

url(data:image/svgxml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E);

}.todo-list

(-webkit-min-device-pixel-ratio:

.toggle