Vue.js之todoList案例詳解
阿新 • • 發佈:2019-02-07
本文詳細介紹利用Vue.js實現todoList功能以及模組化方法的封裝。todoList結合了vue的v-for、v-bing、v-on、v-if等等的指令,方便新手玩家入門vue的小練習。參考來源於IT營的大地老師關於Vue教程,需要的可留言郵箱,我會直接發百度雲連結,無償。
todoList功能介紹:
- 如圖,文字框輸入計劃事件,回車之後,事件會出現在“未完成”區域中,文字框清空。
- 點選事件前對應的複選框,事件會移至“已結束”區域中,反之取消複選框勾選,事件會返回至“未完成”區域中。
- 點選刪除按鈕,對應事件將會被刪除。
- 重新整理頁面,資料不會清空(本地儲存)。
- 點選“清除本地儲存”按鈕,重新整理頁面,資料將會清空
下面是目錄以及程式碼:
App.vue
<template> <div id="app"> <h1>{{ msg }}</h1> <label for="">輸入計劃</label> <input type="text" v-model="doWhat" v-on:keydown="add($event)"> <h3>未完成</h3> <ul> <li v-for="(item,key) in todoList " v-if="!item.isOver"> <input type="checkbox" v-model="item.isOver" v-on:change="saveChange()"> {{ item.things }} <button @click="del(key)">刪除</button> </li> </ul> <h3>已結束</h3> <ul> <li v-for="(item,key) in todoList " v-if="item.isOver" :class="{'overPlease':item.isOver}"> <input type="checkbox" v-model="item.isOver" @change="saveChange()"> {{ item.things }} <button @click="del(key)">刪除</button> </li> </ul> <hr> <button @click="delLocalStorage()">清除本地儲存</button> </div> </template> <script> //匯入模組 import storage from './model/storage' // console.log(storage); export default { data () { return { msg:'This is your own todoList', //輸入框內容 doWhat:'', //事件陣列 todoList:[ /* { things:'語文作業', isOver:false }, { things:'數學作業', isOver:true },*/ ], } }, methods:{ add:function (e) { //監聽是否按下回車鍵盤(keyCode為13) if(e.keyCode==13){ //將輸入事件push到todoList裡面,給一個預設為false的isOver,代表未完成 this.todoList.push({ things:this.doWhat, isOver:false }); //輸入框置為空 this.doWhat = ''; //本地儲存 // localStorage.setItem('list',JSON.stringify(this.todoList)); storage.set('list',this.todoList); } }, del:function (key) { //刪除todoList中對應項 this.todoList.splice(key,1); //本地儲存 // localStorage.setItem('list',JSON.stringify(this.todoList)); storage.set('list',this.todoList); }, saveChange:function () { //checkbox改變時也要本地儲存一下 //以JSON字串形式儲存 // localStorage.setItem('list',JSON.stringify(this.todoList)); storage.set('list',this.todoList); }, delLocalStorage:function () { //清除本地儲存 storage.remove('list'); if(!storage.get('list')){ alert('已清除,請重新整理頁面'); }else{ alert('清除本地儲存失敗,請重試'); } } }, mounted(){ //生命週期函式 //JSON字串 => JSON物件 // var list = JSON.parse(localStorage.getItem('list')); var list = storage.get('list'); if(list){ this.todoList = list; } } } </script> <style> .overPlease{ text-decoration: line-through; } </style>
封裝的storage.js
/** * 封裝本地儲存的方法 模組化檔案 */ var storage={ set:function (key,val) { localStorage.setItem(key,JSON.stringify(val)); }, get:function (key) { return JSON.parse(localStorage.getItem(key)); }, remove:function (key) { localStorage.removeItem(key); } } //注意需要暴露出去 export default storage;
有幾個點:
- data裡面的doWhat需要與文字框進行雙向資料繫結。
- 通過監聽鍵盤的回車鍵,出發add方法,將輸入的事件push進todoList中。其中,監聽回車鍵是通過獲取到keyCode判斷是否為13來實現;push到todoList中的是一個物件,有things和isOver兩個key值,其中things是事件內容,isOver是布林型別,判斷事件是否完成。
- 事件前面的checkbox需要與判斷狀態的變數(即data裡面todoList的isOver)進行雙向資料繫結,點選或取消勾選將會改變isOver的布林值,通過此布林值可以令事件有依據的出現在相應的區域中(未完成還是已結束)。未完成和已結束下的區域是兩個不同的ui>li,利用v-for判斷isOver的布林值,從而對todoList中的資料進行渲染。
- 關於資料本地儲存,通過localStorage.setItem()和localStorage.getItem()將todoList進行儲存和獲取。其中,當用戶進行增加事件、刪除事件、改變事件狀態這三種操作時,均需要執行localStorage.setItem()。而獲取本地儲存的localStorage.getItem()則需要在mounted()生命週期函式中執行,實現開啟網頁時進行資料請求。
- 封裝方法。在App.vue同級目錄下新建model資料夾,在此資料夾中新建js,對本地儲存中資料的設定、獲取、刪除三個方法進行封裝,最後一行別忘記export default XXX;
- 注意資料儲存時的型別,存時需要將資料轉化成JSON字串,獲取時需要將資料轉回JSON物件。
- 在取到localStorage中的list時,需要先判斷是否存在,存在才能進行下一步的賦值給list[]陣列,否則當list不存在的時候賦值會出錯誤。
以上。