使用vue製作簡單的todolist

• 點選在GitHub上檢視demo
• 在data內建立資料合集

    data() {
        return {
        title: "this is a todo list",//標題
        items: [//tuod 事項資料合集
            {
            label: "coding",//事項
            isFinished: false//完成標誌
            },
            {
            label: "walking",
            isFinished: true
 

            }
        ]
        };
    }

• 使用v-for 來渲染 事項
  
  • 根據 isFinished 來標記是否完成
• 通過 v-bind:class=”{finishend:item.isFinished}” 判斷是否完成，為true時增加finishend類名效果完成的效果

    <ul>
      <li v-for="item in items" v-bind:class="{finishend:item.isFinished}">
        {{item.label}}
      </li>
 

    </ul>

• 使用v-on 繫結事件 實現點選完成/取消
• 在methods內註冊方法，才能使用v-on繫結
  
  • 獲取當前的isFinished，取反值

methods:{
       toggleFinish(item){
         console.log(item.isFinished=!item.isFinished);
       },
  }

• v-model 隨表單控制元件型別不同而不同 在表單控制元件或者元件上建立雙向繫結
  
  • 實現表單內資料的雙向繫結

• v-on 修飾符

  • .{keyCode | keyAlias} - 只當事件是從特定鍵觸發時才觸發回撥

• 設定input觸發回撥事件 addNew 新增新的列表內

    addNew() {
      this.items.push({ 
          label: this.newItem, 
          isFinished: false 
          });
      this.newItem = "";//新增過新的事項之後，清空input內的資料
    }

• 利用localstorage來儲存todolist資料
  
  • 封裝函式，反覆呼叫

const STORAGE_KEY = 'todos-vuejs'; //ES6定義常量，儲存用來本地儲存的 key 值
export default { //設定函數出口
  fetch() { //獲取本地儲存的資料，並轉換json物件
    return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]');
  },
  save(items) { //設定到本地儲存，並將物件轉換為json字串
    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(items));
  }
}

• 在App.vue內引入封裝好的函式

import store from "./store"; //呼叫封裝好的函式

• 使用watch 檢測items內的資料變化

    watch: {
        items: {//檢測items資料發生變化
        handler(items) {//發生變化則會執行handler函式
            store.save(items);//呼叫本地儲存，將更新後的資料儲存到本地
        },
        deep: true//深度檢測，當鍵值發生改變時都會執行
        }
    },

• 點選在GitHub上檢視demo