本文詳細介紹利用Vue.js實現todoList功能以及模組化方法的封裝。todoList結合了vue的v-for、v-bing、v-on、v-if等等的指令，方便新手玩家入門vue的小練習。參考來源於IT營的大地老師關於Vue教程，需要的可留言郵箱，我會直接發百度雲連結，無償。

todoList功能介紹： 

1. 如圖，文字框輸入計劃事件，回車之後，事件會出現在“未完成”區域中，文字框清空。
2. 點選事件前對應的複選框，事件會移至“已結束”區域中，反之取消複選框勾選，事件會返回至“未完成”區域中。
3. 點選刪除按鈕，對應事件將會被刪除。
4. 重新整理頁面，資料不會清空（本地儲存）。
5. 點選“清除本地儲存”按鈕，重新整理頁面，資料將會清空 

 下面是目錄以及程式碼：

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;
 

有幾個點： 

1. data裡面的doWhat需要與文字框進行雙向資料繫結。
2. 通過監聽鍵盤的回車鍵，出發add方法，將輸入的事件push進todoList中。其中，監聽回車鍵是通過獲取到keyCode判斷是否為13來實現；push到todoList中的是一個物件，有things和isOver兩個key值，其中things是事件內容，isOver是布林型別，判斷事件是否完成。
3. 事件前面的checkbox需要與判斷狀態的變數（即data裡面todoList的isOver）進行雙向資料繫結，點選或取消勾選將會改變isOver的布林值，通過此布林值可以令事件有依據的出現在相應的區域中（未完成還是已結束）。未完成和已結束下的區域是兩個不同的ui>li，利用v-for判斷isOver的布林值，從而對todoList中的資料進行渲染。
4. 關於資料本地儲存，通過localStorage.setItem()和localStorage.getItem()將todoList進行儲存和獲取。其中，當用戶進行增加事件、刪除事件、改變事件狀態這三種操作時，均需要執行localStorage.setItem()。而獲取本地儲存的localStorage.getItem()則需要在mounted()生命週期函式中執行，實現開啟網頁時進行資料請求。
5. 封裝方法。在App.vue同級目錄下新建model資料夾，在此資料夾中新建js，對本地儲存中資料的設定、獲取、刪除三個方法進行封裝，最後一行別忘記export default XXX;
6. 注意資料儲存時的型別，存時需要將資料轉化成JSON字串，獲取時需要將資料轉回JSON物件。
7. 在取到localStorage中的list時，需要先判斷是否存在，存在才能進行下一步的賦值給list[]陣列，否則當list不存在的時候賦值會出錯誤。

以上。