国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue的TodoMVC事例總結

CKJOKER / 2056人閱讀

摘要:縮寫為數據鍵盤事件添加事項指令指令監聽事件。這塊內容只會在指令的表達式返回值的時候被渲染。清空已辦事項全選取消全選方法用于調用數組的每個元素,并將元素傳遞給回調函數。

gitHub地址:https://github.com/gaozhixiao...

功能拆分:

渲染數據

鍵盤事件:添加事項

鼠標點擊事件:移除事項

顯示未辦事項數據

全部事項、未辦事項、已辦事項狀態切換

清除全部完成事項

全選、取消全選

LocalStorage讀取,保存事項數據

鼠標雙擊事件:雙擊修改數據

鍵盤事件:Enter鍵盤事件完成修改

鍵盤事件:Esc鍵盤事件取消修改

自定義事件

加載事件:獲取焦點

失去焦點事件:保存事項

1 渲染數據

指令: v-for v-for指令基于一個數組來渲染一個列表。v-for 指令需要使用 item in items 形式的特殊語法,其中 items 是源數據數組,而 item 則是被迭代的數組元素的別名
指令: v-bind v-bind:class = {} 動態綁定class。縮寫為:class

    
  • 數據:

        {
            id: 1,
            title: "todo1",
            selected: false
        }
    2 Enter鍵盤事件: 添加事項

    指令: v-on v-on指令監聽 DOM 事件。縮寫為@
    按鍵修飾符: .enter: enter按鍵按下時觸發
    指令: v-model 雙向數據綁定,它會根據控件類型自動選取正確的方法來更新元素

        
        
        add: function () {
            let todoLength = this.todoList.length;
            this.todoList.push({
                "id": todoLength + 1,
                "title": this.todoValue,
                "selected": false
            })
            this.todoValue = ""
        },
    3 鼠標點擊事件:移除事項
        
        
        remove: function (index) {
            this.todoList.splice(index, 1);
        },
    4 顯示未辦事項數目
        // 未辦事項
        unSeleted: function () {
            return this.todoList.filter((item, index, array) => {
                return !item.selected;
            })
        },
        
        
            {{ unSeleted.length }} item left
        
    5 全部事項、未辦事項、已辦事項狀態切換

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

        // 將狀態欄設置成hash屬性
        All
        
        // 默認狀態為全部事項
        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;
            })
        },
        // 事項狀態切換
        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;
            }
        }
        
        // 已辦事項,未辦事項返回值都是一個數組,故更新渲染數據
        
  • 6 清除全部完成事項

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

        
        
        // 清空已辦事項
        clearCompleted: function () {
            this.todoList = this.unSeleted;
        },
    7 全選、取消全選

    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;
                });
            }
        },
    8 LocalStorage讀取,保存事項數據

    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, 采用監聽屬性對象內部的改變
        watch: {
            todoList: {
                deep: true,
                handler: function () {
                    localStorage.setItem("todoList", JSON.stringify(this.todoList));
                }
            }
        },
    9 鼠標雙擊事件:雙擊修改數據
        // 雙擊事件
         
    
        // 雙擊后,修改框顯示雙擊前的數據
        // 此處注意的是:綁定的是item數據,這樣做可以任意修改該條數據
        
  • edit: function (item, el) { this.editValue = item; this.cancelValue = item.title; },
  • 10 鍵盤事件:Enter鍵盤事件完成修改
        
        
        // 當編輯的數據為空時,刪除該條數據, 同時重置該屬性
        editDone: function (item, index) {
            if (!item.title) {
                this.todoList.splice(index, 1)
            }
            this.editValue = ""
        },
    11 鍵盤事件:Esc鍵盤事件取消修改

    按鍵修飾符: .Esc: Esc按鍵按下時觸發

        
        
        cancelDone: function (item, index) {
            item.title = this.cancelValue;
            this.editValue = "";
            this.cancelValue = "";
        }
    12 自定義事件

    自定義指令: directives

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

    window.onload: 文檔加載完成后執行

        // 程序加載,獲取焦點
        function getFocus () {
            let newTodo = document.getElementsByClassName("new-todo")[0];
            newTodo.focus();
        }
        window.onload = getFocus;
        
        // 切換狀態,獲取焦點
        hashFilter: function () {
            getFocus();
            ...
        }
    14 失去焦點事件:保存事項
        

    文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

    轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/105708.html

    相關文章

    • Vue.js@2.6.10更新內置錯誤處機制,Fundebug同步支持相應錯誤監控

      摘要:摘要的錯誤監控插件同步支持異步錯誤監控。此次更新,我們對的監控插件做了相應的更新,來更好地支持使用框架開發的應用錯誤的監控。程序運行后,成功捕獲該錯誤總結更新到,對錯誤處理提供了更加強大的支持。 摘要: Fundebug 的 JavaScript 錯誤監控插件同步支持 Vue.js 異步錯誤監控。 Vue.js 從誕生至今已經 5 年,尤大在今年 2 月份發布了重大更新,即Vue 2....

      DC_er 評論0 收藏0
    • Vue.js 一些資源索引

      摘要:是剛出來的一個輕型的框架借鑒了現有的各種框架官網作者個人網站挺漂亮的作者微博尤小右作者是員工目前已經在一些項目嘗試按去年月已經開始了項目項目主頁是今年月上線的作者記錄了上線一周的情況文檔主要是在官網上非常清晰目前還是比較簡短的另 Vue.js 是剛出來的一個輕型的 MVVM 框架, 借鑒了現有的各種框架, 官網 http://vuejs.org/ Github https://gith...

      yacheng 評論0 收藏0
    • Vue官網todoMVC示例

      這個示例是模仿官網示例樣式和功能用我自己的方式寫的,基本上沒有看官網的源碼,只參考自定義指令。讓我們一步步來探討一下。官網demo 要實現的功能 單條添加todo 單條刪除todo 雙擊編輯todo 單條todo已完成相應樣式狀態改變 全部todo是已完成相應樣式狀態改變 清除全部已完成todos 待辦todos數量顯示 所有todos,已完成todos,未完成todos篩選 showImg(...

      mgckid 評論0 收藏0
    • React+webpack+Antd從0到1開發一個todoMvc

      摘要:在裝載組件之前調用會組件的構造函數。當實現子類的構造函數時,應該在任何其他語句之前調用設置初始狀態綁定鍵盤回車事件,添加新任務修改狀態值,每次修改以后,自動調用方法,再次渲染組件。可以通過直接安裝到項目中,使用或進行引用。 首先我們看一下我們完成后的最終形態:TodoMvc: showImg(https://segmentfault.com/img/remote/14600000085...

      sanyang 評論0 收藏0
    • Vue_簡單項目todolist

      摘要:強大的漸進式渲染引擎使得我們越來越不需要手動控制數據的變化,那么下面我們來看一看。上面所有的依賴在下面引入就可以了。 Vue強大的漸進式渲染引擎使得我們越來越不需要手動控制數據的變化,那么下面我們來看一看。如何用Vue寫一個todolist。 開始 首先,創建一個文件夾,用命令行初始化npm init -y然后安裝需要的插件npm i -S underscore vue todomvc...

      Richard_Gao 評論0 收藏0

    發表評論

    0條評論

    CKJOKER

    |高級講師

    TA的文章

    閱讀更多
    最新活動
    閱讀需要支付1元查看
    <