Simple Vue But Powerful JS Part 2

nanchen2251 發布于2019-08-21 10:35 / 3361人閱讀

摘要：繼上一篇搭建了這個的框架之后，我們輕松實現了為添加一個，這次需要實現的是對的編輯，刪除，完成等功能。接受到之后，然后刪除，。這是在前面一直都沒有提及到的，現在終于要派上用場了。所以，為了實現這一功能，我們進而引入的部分。

繼上一篇搭建了這個Todo App的框架之后，我們輕松實現了為App添加一個task，這次需要實現的是對task的編輯，刪除，完成等功能。如果你認真看完，你會發現：在Vue中，一切原來那么簡單！

編輯一個task

我們之前通過下面的代碼將每個task循環出來：


    {{ task.body }}

有了每個task之后，我們準備實現的是在用戶雙擊task時候，就是雙擊{{ task.body }}的時候，用戶可以對該task進行編輯。實現的思路我大概是這樣想的：

用戶雙擊 --> 拿到task的body部分 --> 刪除展示出來的task --> 將task的body部分賦給newTask  --> 回到添加task的流程

考慮到這里，我們就遇到了一個問題，怎么刪除task跑出來了，不是在編輯task么？好吧，順便在這個時候將刪除task實現了吧，反正正常的App都會有刪除功能，所以現在我們來先實現刪除task。

刪除task

為了更好地看到刪除task，我為每個task后面加了一個刪除task的小按鈕：

{{ task.body }}

上面這一行就是加了一個x刪除小按鈕，我們在這里使用Vue的事件監聽，當用戶點擊這個x按鈕的時候，我們執行removeTask方法，這個方法接受一個參數，就是task本身。所以在todo.js里面的methods部分加上removeTask：

removeTask: function(task) {
    this.tasks.$remove(task);
}

有沒有感覺非常簡單，就是兩行代碼而已！這里的$remove方法是Vue官方提供的一個刪除方法，其實就是使用了js的slice。接受到task之后，然后刪除，easy enough。

在回到前面的編輯task，我們在實現了刪除task之后，這個也變得非常容易了。

完善編輯task

按照前面的思路，我們首先需要為task的body綁定一個方法：


    {{ task.body }}

類似的，我們監聽用戶的雙擊事件，如果用戶雙擊了該span，我們執行editTask方法。所以，我們來寫一下editTask方法：

editTask: function(task) {
    this.newTask = task.body;
    this.removeTask(task);
    this.$$.newTask.focus();
},

依然是將editTask放在todo.js的methods部分，該方法接受一個參數，就是需要編輯的task自身，然后將task的body部分賦給newTask，刪除原來的task，最后就是為newTask輸入框獲取一下焦點。這里的newTask因為和input輸入框進行了數據雙向綁定，那么這個時候input輸入框就會自動填充task的body數據。像這樣：

完成一個task

對于一個Todo App，用戶新增一個task之后，主要的目的是為了完成這個task。這時候我們就需要用到task的另一個屬性了：completed。這是在前面一直都沒有提及到的，現在終于要派上用場了。完成一個task，其實就是將completed屬性的值設為true，所以我們來實現一下：

{{ task.body }}

像刪除一個task一樣，我在task后面又加了一個打勾的小按鈕。用戶點擊這個按鈕的時候，執行toggleTaskCompletion方法，為什么叫toggleTaskCompletion而不叫completeTask呢，因為考慮到用戶在點完成之后，有可能反悔了，當他再次點擊的時候，task又回到了未完成的狀態。所以上代碼吧：


toggleTaskCompletion: function(task) {
    task.completed = ! task.completed;
},

這個方法中，我們只是將task中的completed屬性設置為它的相反值，用戶點擊一次，這個值就改變一次。剛寫完這個方法，你可能會迫不及待去點擊完成按鈕，但是這個時候貌似沒有什么效果，但是chrome的console又沒有報錯，這是怎么回事？

其實答案就是：這段代碼確實正確的執行了，只是我們在展示task的時候沒有根據task的completed狀態來篩選認為而已。

所以，為了實現這一功能，我們進而引入Vuejs的filters部分。

實現完成task與未完成的task分離

在實現之前，我們不妨用一個區域來展示完成的task，一個區域來展示未完成的task，所以跟展示task時候很相似：





    Tasks ({{ tasks.length }})

    
        
            {{ task.body }}

            
            
        
    







    Completed 

    
        
            {{ task.body }}

我們在上面用兩種方式來實現了Vuejs的filter，一個是filterBy true in completed，這是說只要completed屬性為true的task，另一個就是inProcess，這個就需要我們自己來實現一下：


data: {
    tasks: [],

    newTask: ""
},

filters: {
        inProcess: function(tasks) {
            return  tasks.filter(function(task){
                    return ! task.completed;
            });
        }
    },

上面的代碼就是一個簡單的filter實現，return ! task.completed;的意思是返回task.completed的值為false的task。

這里我們就簡單的實現了完成任務了：

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

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

Simple Vue But Powerful JS

摘要：如果用戶確實有輸入，則將用戶輸入的部分作為的部分，通過新增一個，最后我們將再次設為空字符串，因為這樣用戶在提交或者按下回車之后，里的輸入框才會重新變為空的。在現在 Angular和React大行其道的JS世界，其實我更鐘愛的是Vue.js。本文并不是意在比較三者的好壞，而是用Vue來寫一個Todo Web應用，沒錯，重復來造一下經典的輪子。還是先來預覽圖 showImg(h...

wujl596 2019-08-21 10:35 評論0 收藏0
Awesome JavaScript

摘要： Awesome JavaScript A collection of awesome browser-side JavaScript libraries, resources and shiny things. Awesome JavaScript Package Managers Loaders Testing Frameworks QA Tools MVC Framew...

endless_road 2019-08-22 10:56 評論0 收藏0
Awesome Python

摘要：漢字拼音 Awesome Python A curated list of awesome Python frameworks, libraries and software. Inspired by awesome-php. Awesome Python Environment Management Package Management Package Repositorie...

fizz 2019-07-31 11:36 評論0 收藏0
Android干貨框架集錦，搭建項目必不可少

摘要：最佳解析最佳解析最佳解析是一個依賴注入框架，由谷歌開發，最早的版本由公司開發。在對的介紹中指出，即，這里的即數據結構中的有向無環圖。也就是說，是一個基于有向無環圖結構的依賴注入庫，因此的使用過程中不能出現循環依賴。在開發過程中使用過很多優秀框架，比如網絡的okhttp，圖片的Fresco，注入的Gagger2等，都是非常優秀的框架。所以今天在此介紹下至今本人知道的一些比較流行主流且...

zhisheng 2019-08-06 13:17 評論0 收藏0