基於Vue的todolist———最簡單的代辦事件列表

基於Vue的toDoList———最簡單的代辦事件列表

github網址: toDoList-Vue

Vue-toDolist分析：

1. 做到刷新頁面不會丟失數據，因此我們的數據需要保存至本地localstorage裏。

2. 每次加載頁面都要先從本地獲取一次數據保存至data數據中，通過vue數據綁定自動更新頁面數據。

3. 修改數據後再把最新的數據保存至localstorage，這樣保證本地存儲的是最新的數據。

4. 存儲的數據格式：var todolist = [{id: 0, title: ‘晚上看電影。’, done:false}]。 其中title爲事件內容，done表示事件是否完成。爲了不操作dom元素，我們在刪除和更改事件狀態時，需要通過id找到被操作的事件在數據中的位置。

5. 通過v-for循環將數據顯示到頁面中。但是因爲有已完成和未完成兩種數據，我們需要聲明兩個函數對數組進行濾出。

6. 注意一：本地存儲localStorage裏面只能存儲字符串格式，因此需要把對象轉換爲字符串JSON。stringfy(data)。

7. 注意二：獲取本地存儲數據，需要把裏面的字符串轉換爲對象格式JSON.parse()我們才能使用裏面的數據。

主要函數：

1. getData():從本地獲取數據，保存到data中的todolist數組

    getData(){ //獲取本地localStorage數據
        var data = localStorage.getItem('todolistVue');
        if(data !== null){
          this.todolist =  JSON.parse(data);
        }else{
          this.todolist = [];
        }
      },

2. saveData(data)：保存數據至本地中的todolistVue

    function saveData(data) { //保存數據至本地中的todolistVue
        localStorage.setItem('todolist',JSON.stringify(data));
    }

3. count():獲取數據，並統計事件總數函數(這個函數需要在頁面加載完成後最先調用一次，把最新的數據加載出來)

      count(){  //獲取數據，並統計事件總數函數
        this.getData();
        this.num1 = 0; //初始化未完成事件
        this.num2 = 0; //初始化已完成時間
        this.todolist.forEach(ele => { //通過forEach循環遍歷數據
          if(!ele.done){
            this.num1++;
          }else{
            this.num2++;
          }
        });
      },

4. add():添加事件函數（自動生成id）

      add(){ //添加事件函數（自動生成id）
        if(this.todolist != ""){ //如果本地數據不爲空，保存當前最大的id號
          var id = this.todolist[0].id;
        }else{ //如果本地數據爲空，初始化id爲0；
          var id = 0; 
        }
        this.todolist.unshift({id:++id,title:this.newEvent,done:false}); //使用unshift永遠將id最大的新數據放置數組首位
        this.saveData(this.todolist);
        this.newEvent = "";
        this.count();
      },

5. del(id):刪除功能點擊事件函數

      del(id){ //刪除事件函數
        var index = this.todolist.findIndex(item => { //通過id查找該事件數據在todolist數組中的索引
          if(id == item.id)
            return true;
        })
        this.todolist.splice(index,1); //通過索引刪除
        this.saveData(this.todolist);
        this.count();
      },

6. checkbox切換是否完成點擊事件

    $('ol,ul').on('click','input',function () { //給checkbox（切換是否完成）綁定一個點擊事件
        var data=getData(); //獲取數據
        var index=$(this).siblings('a').attr('id'); //獲取id
        data[index].done=$(this).prop('checked'); //讓data數據中的checked值改爲當前已修改的值
        saveData(data); //保存數據
        load(); //重新加載數據
    })

7. listDone()和listDont():對todolist數組進行過濾，分別過濾出已完成事件和未完成事件數據

    searchDone(list){ //過濾已完成的事件
        var doneList = [];
        this.todolist.forEach(ele =>{ //通過forEach循環將已完成的事件儲存到doneList中
          if(ele.done){
            doneList.push(ele);
          }
        })
        return doneList;
      },
    searchDont(list){ //過濾出未完成的事件
        var dontList = [];
        this.todolist.forEach(ele =>{ //通過forEach循環將未完成的事件儲存到dontList中
          if(!ele.done){
            dontList.push(ele);
          }
        })
        return dontList;
    }