Vue實現todoList（任務計劃列表）
阿新 • • 發佈：2019-02-11
大致功能：
1、在輸入框中輸入內容後按enter鍵，即可把內容新增到下面的列表中（如果內容為空則不新增）
2、動態計算有幾個未完成的任務
3、點選複選框，實現選中或不選中效果（即完成或未完成）
4、滑鼠移入列表，會出現一個刪除按鈕，點選刪除按鈕即可刪除該列表
5、雙擊列表中的內容，可對列表內容進行編輯
- 編輯完成後，按enter鍵完成編輯，或者當輸入框失去焦點的時候也是完成編輯
- 如果想要取消修改，按esc鍵即可取消編輯
6、單擊上面的所有任務、未完成任務、已完成任務，三個按鈕可以切換任務列表
7、已經新增的列表任務，即便關閉瀏覽器或者電腦，下次開啟任務還在列表中（用到了本地儲存）
實現的過程也是把上面的功能一個一個實現即可
看一個大致的圖：
沒有任務新增的效果圖：
添加了任務的效果圖：
嗯，看下面的程式碼
HTML程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="index.css"> <script src="./vue.js"></script> </head> <body> <div class="page-top"> <div class="page-content"> <h2>任務計劃列表</h2> </div> </div> <div class="main"> <h3 class="big-title">新增任務：</h3> <input placeholder="例如：吃飯睡覺打豆豆； 提示：+回車即可新增任務" class="task-input" type="text" v-on:keyup.enter="enterFn" v-model="todo" /> <ul class="task-count"> <li>{{unComplete}}個任務未完成</li> <li class="action"> <a :class="{active:visibility!=='unCompleted'&&visibility!=='completed'}" href="#all">所有任務</a> <a :class="{active:visibility==='unCompleted'}" href="#unCompleted">未完成的任務</a> <a :class="{active:visibility==='completed'}" href="#completed">完成的任務</a> </li> </ul> <h3 class="big-title">任務列表：</h3> <div class="tasks"> <span class="no-task-tip" v-show="!list.length">還沒有新增任何任務</span> <ul class="todo-list" v-show="list.length"> <li class="todo" v-for="item in filterData" v-bind:class="{completed:item.isComplete,editing:item===edtorTodos}" > <div class="view"> <input class="toggle" type="checkbox" v-model="item.isComplete" /> <label @dblclick="edtorTodo(item)">{{item.title}}</label> <button class="destroy" @click="delFn(item)" ></button> </div> <input class="edit" type="text" v-focus="edtorTodos===item" v-model="item.title" @blur="edtoEnd(item)" @keyup.enter="edtoEnd(item)" @keyup.esc="cancelEdit(item)" /> </li> </ul> </div> </div> <script src="./todo.js"></script> </body> </html>
JS程式碼：
CSS程式碼：其實之前是不提供css程式碼的，但有朋友可能說沒有css程式碼效果出不來，所以為了避免佔地方，就壓縮程式碼也放上來了，如果您只是看思路就可以繞過下面的css程式碼了哈//存取localStorage中的資料 var store = { save(key,value){ window.localStorage.setItem(key,JSON.stringify(value)); }, fetch(key){ return JSON.parse(window.localStorage.getItem(key))||[]; } } //list取出所有的值 var list = store.fetch("storeData"); var vm = new Vue({ el:".main", data:{ list, todo:'', edtorTodos:'',//記錄正在編輯的資料, beforeTitle:"",//記錄正在編輯的資料的title visibility:"all"//通過這個屬性值的變化對資料進行篩選 }, watch:{ //下面的這種方法是淺監控 /*list:function(){//監控list這個屬性，當這個屬性對應的值發生變化就會執行函式 store.save("storeData",this.list); }*/ //下面的是深度監控 list:{ handler:function(){ store.save("storeData",this.list); }, deep:true } }, methods:{ enterFn(ev){//新增任務 //向list中新增一項任務 //事件處理函式中的this指向的是當前這個根例項 if(this.todo==""){return;} this.list.push({ title:this.todo, isComplete:false }); this.todo = ""; }, delFn(item){//刪除任務 var index = this.list.indexOf(item); this.list.splice(index,1) }, edtorTodo(item){//編輯任務 //編輯任務的時候記錄編輯之前的值 this.beforeTitle = item.title; this.edtorTodos = item; }, edtoEnd(item){//編輯完成 this.edtorTodos=""; // this.cancelEdit = this.edtorTodos; }, cancelEdit(item){//取消編輯 item.title = this.beforeTitle; this.beforeTitle = ''; this.edtorTodos=''; } }, directives:{ "focus":{ update(el,binding){ if(binding.value){ el.focus(); } } } }, computed:{ unComplete(){ return this.list.filter(item=>{ return !item.isComplete }).length }, filterData(){ //過濾的時候有三種情況 all completed unCompleted var filter = { all:function(list){ return list; }, completed:function(list){ return list.filter(item=>{ return item.isComplete; }) }, unCompleted:function(list){ return list.filter(item=>{ return !item.isComplete; }) } } //如果找到了過濾函式，就返回過濾後的資料，如果沒有找到就返回所有的資料 return filter[this.visibility]?filter[this.visibility](list):list; } } }); function hashFn(){ var hash = window.location.hash.slice(1); vm.visibility = hash; } hashFn(); window.addEventListener('hashchange',hashFn);
body{margin:0;background-color:#fafafa;font:14px 'Helvetica Neue',Helvetica,Arial,sans-serif}h2{margin:0;font-size:12px}a{color:#000;text-decoration:none}input{outline:0}button{margin:0;padding:0;border:0;background:0;font-size:100%;vertical-align:baseline;font-family:inherit;font-weight:inherit;color:inherit;outline:0}ul{padding:0;margin:0;list-style:none}.page-top{width:100%;height:40px;background-color:#db4c3f}.page-content{width:50%;margin:0 auto}.page-content h2{line-height:40px;font-size:18px;color:#fff}.main{width:50%;margin:0 auto;box-sizing:border-box}.task-input{width:99%;height:30px;outline:0;border:1px solid #ccc}.task-count{display:flex;margin:10px 0}.task-count li{padding-left:10px;flex:1;color:#dd4b39}.task-count li:nth-child(1){padding:5px 0 0 10px}.action{text-align:center;display:flex}.action a{margin:0 10px;flex:1;padding:5px 0;color:#777}.action a:nth-child(3){margin-right:0}.active{border:1px solid rgba(175,47,47,0.2)}.tasks{background-color:#fff}.no-task-tip{padding:10px 0 10px 10px;display:block;border-bottom:1px solid #ededed;color:#777}.big-title{color:#222}.todo-list{margin:0;padding:0;list-style:none}.todo-list li{position:relative;font-size:16px;border-bottom:1px solid #ededed}.todo-list li:hover{background-color:#fafafa}.todo-list li.editing{border-bottom:0;padding:0}.todo-list li.editing .edit{display:block;width:506px;padding:13px 17px 12px 17px;margin:0 0 0 43px}.todo-list li.editing .view{display:none}.todo-list li .toggle{text-align:center;width:40px;height:auto;position:absolute;top:5px;bottom:0;margin:auto 0;border:0;-webkit-appearance:none;appearance:none}.toggle{text-align:center;width:40px;height:auto;position:absolute;top:5px;bottom:0;margin:auto 0;border:0;-webkit-appearance:none;appearance:none}.toggle:after{content:url('data:image/svg+xml;utf8,<svgxmlns="http://www.w3.org/2000/svg"width="40"height="40"viewBox="-10-18100135"><circlecx="50"cy="50"r="40"fill="none"stroke="#ededed"stroke-width="3"/></svg>')}.toggle:checked:after{content:url('data:image/svg+xml;utf8,<svgxmlns="http://www.w3.org/2000/svg"width="40"height="40"viewBox="-10-18100135"><circlecx="50"cy="50"r="40"fill="none"stroke="#bddad5"stroke-width="3"/><pathfill="#5dc2af"d="M7225L42712756l-44202034-52z"/></svg>')}.todo-list li label{white-space:pre-line;word-break:break-all;padding:15px 60px 15px 15px;margin-left:45px;display:block;line-height:1.2;transition:color .4s}.todo-list li.completed label{color:#d9d9d9;text-decoration:line-through}.todo-list li .destroy{display:none;position:absolute;top:0;right:10px;bottom:0;width:40px;height:40px;margin:auto 0;font-size:30px;color:#cc9a9a;margin-bottom:11px;transition:color .2s ease-out}.todo-list li .destroy:hover{color:#af5b5e}.todo-list li .destroy:after{content:'×'}.todo-list li:hover .destroy{display:block}.todo-list li .edit{display:none}.todo-list li.editing:last-child{margin-bottom:-1px}在這個例子中，我學到了：
之前沒有學過本地儲存，經過這個案例，把本地儲存storage詳細的學習了一遍，這個昨天寫過部落格了本地儲存
利用hash值過濾資料，這個知識以前接觸的也不多，學了之後發現很好用哈
- 獲取hash值：window.location.hash.slice(1)（因為帶"#"號，所以需要將"#"去掉，用到了slice方法）
- 和hash相關的事件:hashchange
當然最終要的是學到了很多關於vue方面的知識，之前實現各種功能都是使用的原生js，一般都是操作dom的，但vue的思想就是通過改變資料，進而改變頁面效果（這個總想操作DOM的思維需要改變）
其實只要把不會的幾個知識點搞懂，利用vue很快就可以搞定這個案例了