Vue官網(wǎng)todoMVC示例

mgckid 發(fā)布于2019-08-26 11:30 / 2487人閱讀

這個示例是模仿官網(wǎng)示例樣式和功能用我自己的方式寫的，基本上沒有看官網(wǎng)的源碼，只參考自定義指令。讓我們一步步來探討一下。官網(wǎng)demo

要實現(xiàn)的功能

單條添加todo

單條刪除todo

雙擊編輯todo

單條todo已完成相應樣式狀態(tài)改變

全部todo是已完成相應樣式狀態(tài)改變

清除全部已完成todos

待辦todos數(shù)量顯示

所有todos，已完成todos，未完成todos篩選

單條添加todo

//操作input元素使enter一下之后清空輸入框內(nèi)容

data() {//一些初始化數(shù)據(jù)
    return {
        todolists: [],
        dataStatus: ["All", "Active", "Completed"],
        dataStatusIndex: 0,
        whichShow: true,
        defaultShow: true
    }
},

addTodo(e) { //添加todo
    var val = e.value
    if (val === "") {return} //如果輸入內(nèi)容為空則立即返回
    this.todoLists = this.todoLists.concat({//使用concat這個api添加todo
        value: val, //輸入內(nèi)容
        isEditing: false, //是否在編輯狀態(tài)
        isActive: false, //刪除X圖標是否激活
        isChecked: false //是否已完成
    })
    this.$refs.currentInput.value = "" //按下enter添加todo之后把輸入框value清零
    window.localStorage.setItem("content",JSON.stringify(this.todoLists))//使用localStorage以JSON格式存儲數(shù)據(jù)
},

把每條todo的對應狀態(tài)都存在同一個對象當中，在操作改變todo狀態(tài)的時候不會被統(tǒng)一處理，使得每條todo都有多帶帶的狀態(tài)。

單條刪除todo

  //綁定刪除單條todo事件

deleteTodo(index) { //刪除單條todo
        this.todoLists.splice(index, 1)//使用splice的api
        window.localStorage.setItem("content",JSON.stringify(todoLists)) //以JSON格式存儲數(shù)據(jù)//localStorage存儲數(shù)據(jù)
},

在每個li元素上綁定了鼠標移入和移除的事件來動態(tài)的改變每個todo的isActive，然后再使用isActive動態(tài)顯示class。

雙擊編輯todo&&單條todo已完成

//雙向綁定isChecked

 //動態(tài)綁定class該表已完成todo樣式
{{list.value}}


 //綁定blur失去焦點事件

methods: {
    toEdit(obj) { //使添加的todothing可編輯
        obj.isEditing = true
    },
    
    unEdit(obj) { //使添加的todothing不可編輯
        obj.isEditing = false
    },
}

directives: { //自定義focus指令,需要一個binding參數(shù)做判斷
    "todo-focus": function (el, binding) {
        if (binding.value) {
            el.focus()
        }
    }
}

通過每個todo里的isEditing屬性控制show和是否可編輯兩個狀態(tài)，雙擊div之后改變當前todo的isEditing為true，從而顯示為input，input失去焦點之后再通過blur事件改為false。
通過todo的idChecked來控制是否已完成，從而動態(tài)改變樣式。

全部todos已完成

 //全部已完成事件

selectAllTodos() { //設置所有todo為已完成,使用map的api通過todo的isChecked屬性操作
    this.todoLists.map(todo => todo.isChecked = todo.isChecked ? false : true)
}

待辦todos數(shù)量顯示

 //times為0顯示item，大于0顯示items，細節(jié)注定成敗
    {{times}}  item left


{{times}}  items left

computed: {
    times() { //使用計算屬性計算待辦todos的次數(shù) 
        let todoArr = this.todoLists
        let times = 0
        for (let i = 0; i < todoArr.length; i++) {
            if (todoArr[i].isChecked === false) {
                times++
            }
        }
        return times
    }
},

使用了計算屬性對todoLists計算，用for循環(huán)刷選出idChecked為true的累加，最后返回times。

清除全部已完成todos

 //如果待辦事件次數(shù)小于總todoLists長度就顯示“clear completed”
    clear completed


 //如果待辦事件次數(shù)等于總todoLists長度就顯示“clear completed”

clearTodos() { //清空已完成的todoLists，使用filter的api進行篩選
    this.todoLists = this.todoLists.filter(todo => todo.isChecked === false)
    window.localStorage.setItem("content",JSON.stringify(this.todoLists)) //以json格式存儲數(shù)據(jù)
},

如果待辦todos的times小于todoLists長度，就證明有已完成的todo，就可以顯示“clear completed”，如果相等就說明沒有已完成的todo。

三種狀態(tài)篩選

所有todos，已完成todos，未完成todos篩選




    
        {{item}}

switchStatus(index) { //通過if條件判斷操作
    this.dataStatusIndex = index
    if (this.dataStatus[index] === "Active") {
        this.defaultShow = false
        this.whichShow = false
    } else if (this.dataStatus[index] === "Completed") {
        this.defaultShow = false
        this.whichShow = true
    } else if (this.dataStatus[index] === "All") {
        this.defaultShow = true
    }
},

我這里是同時if條件句判斷操作，有點麻煩，目前還沒有想出來其他方案。在li元素使用三元運算符和或運算符進行操作顯示不同狀態(tài)的todos。

完整代碼


    
        todos
        
            
            
            
            
                
                    
                    
                        {{list.value}}
                    
                    
                    
                
            
            
                
                    {{times}} item left
                
                
                    {{times}} items left
                
                
                    
                        {{item}}
                    
                
                
                    clear completed

GPU云服務器云服務器 vue官網(wǎng) todoMvc 配置示例使用示例

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107029.html

Vue.js 的一些資源索引

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

yacheng 2019-08-21 12:10 評論0 收藏0
Vue[email protected]更新內(nèi)置錯誤處機制，F(xiàn)undebug同步支持相應錯誤監(jiān)控

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

DC_er 2019-08-26 13:45 評論0 收藏0
React+webpack+Antd從0到1開發(fā)一個todoMvc

摘要：在裝載組件之前調(diào)用會組件的構(gòu)造函數(shù)。當實現(xiàn)子類的構(gòu)造函數(shù)時，應該在任何其他語句之前調(diào)用設置初始狀態(tài)綁定鍵盤回車事件，添加新任務修改狀態(tài)值，每次修改以后，自動調(diào)用方法，再次渲染組件?？梢酝ㄟ^直接安裝到項目中，使用或進行引用。首先我們看一下我們完成后的最終形態(tài)：TodoMvc： showImg(https://segmentfault.com/img/remote/14600000085...

sanyang 2019-08-20 14:47 評論0 收藏0
vue的TodoMVC事例總結(jié)

摘要：縮寫為數(shù)據(jù)鍵盤事件添加事項指令指令監(jiān)聽事件。這塊內(nèi)容只會在指令的表達式返回值的時候被渲染。清空已辦事項全選取消全選方法用于調(diào)用數(shù)組的每個元素，并將元素傳遞給回調(diào)函數(shù)。 gitHub地址：https://github.com/gaozhixiao... 功能拆分：渲染數(shù)據(jù) 鍵盤事件：添加事項鼠標點擊事件：移除事項顯示未辦事項數(shù)據(jù) 全部事項、未辦事項、已辦事項狀態(tài)切換清除全部完成...

CKJOKER 2019-08-26 10:10 評論0 收藏0
vue初探-簡易留言板

摘要：學完的基礎語法之后，練手一下，從最基本的留言板開刀吧。功能不多，主要為了熟悉的基礎語法使用。學完vue的基礎語法之后，練手一下，從最基本的留言板開刀吧。功能不多，主要為了熟悉vue的基礎語法使用。詳細vue教程請移步vue.js 2.0 技術框架 1.vue.js 2.0 2.bootstrap 語法概述這里只寫一點此例子用到的一些語法知識，詳細API請移步：vue 2.0 a...

GHOST_349178 2019-08-20 12:04 評論0 收藏0