vue的TodoMVC事例總結

    

            
            {{ item.title }}
            
        

數據：

    {
        id: 1,
        title: "todo1",
        selected: false
    }

指令： v-on v-on指令監(jiān)聽 DOM 事件?？s寫為@
按鍵修飾符: .enter: enter按鍵按下時觸發(fā)
指令： v-model 雙向數據綁定，它會根據控件類型自動選取正確的方法來更新元素

    
    
    add: function () {
        let todoLength = this.todoList.length;
        this.todoList.push({
            "id": todoLength + 1,
            "title": this.todoValue,
            "selected": false
        })
        this.todoValue = ""
    },

    
    
    remove: function (index) {
        this.todoList.splice(index, 1);
    },

    // 未辦事項
    unSeleted: function () {
        return this.todoList.filter((item, index, array) => {
            return !item.selected;
        })
    },
    
    
        {{ unSeleted.length }} item left
    

Hash：hash是url的一部分，從#開始
Array.filter： array.filter(function(currentValue,index,arr), thisValue) filter() 方法創(chuàng)建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素。
_.filter: _.filter(collection, [predicate=_.identity])。引自： lodash.js 參考地址：https://www.lodashjs.com/

    // 將狀態(tài)欄設置成hash屬性
    All
    
    // 默認狀態(tài)為全部事項
    hashActive: "all"
    
    // 已辦事項
    selelted: function () {
        return _.filter(this.todoList, function (item) {
            return item.selected;
        })
    },
    // 未辦事項
    unSeleted: function () {
        return this.todoList.filter((item, index, array) => {
            return !item.selected;
        })
    },
    // 事項狀態(tài)切換
    hashFilter: function () {
        if (this.hashActive === "all") {
            return this.todoList;
        } else if (this.hashActive === "active") {
            return this.unSeleted;
        } else if (this.hashActive === "completed"){
            return this.selelted;
        } else {
            return this.todoList;
        }
    }
    
    // 已辦事項，未辦事項返回值都是一個數組，故更新渲染數據
    

指令：v-if: v-if 指令用于條件性地渲染一塊內容。這塊內容只會在指令的表達式返回 truthy 值的時候被渲染。

    
        Clear completed
    
    
    // 清空已辦事項
    clearCompleted: function () {
        this.todoList = this.unSeleted;
    },

Array.foreach: array.forEach(function(currentValue, index, arr), thisValue) forEach() 方法用于調用數組的每個元素，并將元素傳遞給回調函數。

    // 當事項未全部選擇時-> 全選，反之，反選
    
    
    toggleAll: function () {
        let selectedAll = this.todoList.every(function (item, index, array) {
            return item.selected;
        })
    
        if (selectedAll) {
            this.todoList.forEach(item => {
                item.selected = false;
            });
        } else {
            this.todoList.forEach(item => {
                item.selected = true;
            });
        }
    },

localStorage.getItem: var aValue = localStorage.getItem(keyName); 從localStorage中讀取數據
localStorage.setItem: localStorage.setItem(keyName, keyValue); 寫入到localStorage中

    // LocalStorage讀取事項
    let todoList = localStorage.getItem("todoList");
    if (todoList) {
        todoList = JSON.parse(todoList)
    } else {
        todoList = [];
    }
    
    // 渲染數據修改為從localStorage中獲取
    data: {
        todoList: todoList
    },
    
    // 保存事項到localStorage, 采用監(jiān)聽屬性對象內部的改變
    watch: {
        todoList: {
            deep: true,
            handler: function () {
                localStorage.setItem("todoList", JSON.stringify(this.todoList));
            }
        }
    },

    // 雙擊事件
     {{ item.title }}

    // 雙擊后，修改框顯示雙擊前的數據
    // 此處注意的是：綁定的是item數據，這樣做可以任意修改該條數據
    

    
    edit: function (item, el) {
        this.editValue = item;
        this.cancelValue = item.title;
    },
    
    

    
    
    // 當編輯的數據為空時，刪除該條數據, 同時重置該屬性
    editDone: function (item, index) {
        if (!item.title) {
            this.todoList.splice(index, 1)
        }
        this.editValue = ""
    },

按鍵修飾符: .Esc: Esc按鍵按下時觸發(fā)

    
    
    cancelDone: function (item, index) {
        item.title = this.cancelValue;
        this.editValue = "";
        this.cancelValue = "";
    }

自定義指令: directives

    // 當雙擊修改事項時，獲取焦點
    
    
    todoFocus: function (el) {
        el.focus();
    }

window.onload： 文檔加載完成后執(zhí)行

    // 程序加載，獲取焦點
    function getFocus () {
        let newTodo = document.getElementsByClassName("new-todo")[0];
        newTodo.focus();
    }
    window.onload = getFocus;
    
    // 切換狀態(tài)，獲取焦點
    hashFilter: function () {
        getFocus();
        ...
    }