本期教程目標(biāo)
點擊x刪除任務(wù)
雙擊任務(wù)對任務(wù)進行編輯
-
編輯任務(wù)后按enter鍵或者讓輸入框失去焦點時會保存編輯的任務(wù)座每。而按esc鍵時,會撤銷編輯蚓胸。
Snipaste_2018-01-22_00-03-51.png
??相信通過上一期的學(xué)習(xí),我們對todomvc有一個大概的了解,當(dāng)然了大伙都知道打打豆豆并不是一個好行為,這一章節(jié),我們有三個目標(biāo),都是圍繞著修改打打豆豆展開的,最終目標(biāo)就是讓豆豆不被挨打,瞧多么重要的事情,讓我們來完成吧弃鸦。
目標(biāo)1:點擊x刪除某一項任務(wù)
??要想完成這一目標(biāo),我們還是需要從數(shù)據(jù)驅(qū)動來思考。其實上一章節(jié)中,我們已經(jīng)知道,每一個任務(wù),其實都是list數(shù)組v-for出來的,所以我們只需要將數(shù)組中的數(shù)據(jù)刪除,這樣被刪除的數(shù)據(jù)就不能再渲染到視圖上,從而實現(xiàn)刪除任務(wù)的效果斩跌。既然有了思路,剩下的就簡單很多了桩警。
??通過調(diào)試工具我們可以輕松的找到x對應(yīng)的html結(jié)構(gòu)(這里說個題外的,自己手?jǐn)]頁面的時候發(fā)現(xiàn),跟火狐相比V8引擎是真的快,奈何需要翻墻才能裝插件,確實也是真的煩),找到按鈕后我們可以通過v-on為按鈕添加一個刪除事件處理函數(shù)。
這個處理函數(shù)的偽代碼應(yīng)該是這樣的
找到當(dāng)前item在數(shù)組中的位置,然后刪除它所以真是代碼為
很好這樣我們就能完成刪除打打豆豆的任務(wù)了,非常好!但是堵不如疏,我們更希望的并不是不打豆豆而是將打豆豆的行為變?yōu)閻圩o豆豆的行為,這時候我們就需要進行任務(wù)的修改了膘滨。
目標(biāo)2:修改任務(wù)內(nèi)容
??我們需要的效果是,雙擊任務(wù),彈出一個輸入框,進行輸入甘凭。為了達到這樣的效果,我們需要先將對應(yīng)的class類名找到,大概效果就是隱藏當(dāng)前標(biāo)簽,出現(xiàn)一個輸入框,猜測下,應(yīng)該可以通過定位完成,所以我們現(xiàn)在任務(wù)標(biāo)簽附近尋找,有無輸入框,很但是這里0-06.png](http://upload-images.jianshu.io/upload_images/9947395-75111b289dfd52ff.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
當(dāng)然了這一步如果沒有文檔我們只能推測出,修改肯定是在li內(nèi)的input上,但是很難推測到底是添加或刪除那個類名才能實現(xiàn)編輯的效果,索性文檔中已經(jīng)提到了List items should get the class editing when editing and completed when marked as completed
這句話告訴我們,在需要編輯時添加editing類名在li上,而任務(wù)完成時,需要添加completed類。這里我們只用得上前半句
??嗯?看起來很美,但是真的沒毛病嗎?當(dāng)然是有問題了,這又是一個坑,當(dāng)時我在寫這段代碼的時候就自然而然的掉進坑里了,當(dāng)時花了2個小時才想通為什么錯了的原理,希望大伙看了這篇章節(jié),能夠輕松跳過這個坑火邓。
??首先我們的思路是將"bianji"這個變量私有到對應(yīng)的對象中,從而實現(xiàn)雙擊對應(yīng)的任務(wù)改變對應(yīng)的視圖丹弱。但是真的當(dāng)我們雙擊時,視圖并不會改變,item.bianji的值卻實實在在的變?yōu)榱藅rue。出現(xiàn)這個問題,我的第一反應(yīng)就是數(shù)據(jù)沒有響應(yīng)的綁定到視圖上,但是相信大伙在剛剛接觸vue的時候,總會被響應(yīng)的數(shù)據(jù)綁定這句話所震撼,自然而然的想到,在vue中無論什么地方的數(shù)據(jù)都會響應(yīng)的綁定到視圖中,但是文檔中有明確的說明铲咨。讓我們來看看文檔的這一句話
相信大伙看到這里就明白很多了,我們使用上面那種辦法,確實是改變了想要改變的數(shù)據(jù),但是,item.bianji并沒有出現(xiàn)在vue的data函數(shù)中,這樣無論item.bianji怎樣改變,只有當(dāng)因為別的原因視圖更新時,item.bianji的值才會更新到視圖上,所以并不能實現(xiàn)雙擊編輯任務(wù)的效果躲胳。很好,既然知道是哪里錯了,問題就會變得很簡單,我們只要想辦法將item.編輯加入data中即可,這次我把目標(biāo)放在了data中的list上,list更新時也會響應(yīng)到視圖中,我們只要能找到雙擊時對應(yīng)的item,然后在改變那個item里面的bianji屬性即可。具體的代碼實現(xiàn)為:
文檔中的這句話告訴我們,在vue實例創(chuàng)造后,動態(tài)添加的新屬性并不能響應(yīng)的綁定到視圖中。
目標(biāo)3:編輯任務(wù)后按enter鍵或者讓輸入框失去焦點時會保存編輯的任務(wù)踊东。而按esc鍵時,會撤銷編輯北滥。
以上唯一需要注意的點就是:
??之所以能夠這么處理,還是因為item.title是data中的東西,雙向綁定后,試圖影響內(nèi)存中的數(shù)據(jù),所以修改完成后,取消編輯類名editing就可以看到編輯完成的狀態(tài),因為data中的數(shù)據(jù)都是響應(yīng)的綁定在視圖中闸翅。
??很好,現(xiàn)在就剩最后一個點了,編輯時按esc鍵時,會撤銷編輯再芋。
??想要實現(xiàn)這樣的效果的思路是,雙擊時將被編輯的任務(wù)數(shù)據(jù)保存起來,如果監(jiān)聽到esc按下,則將保存的值重新賦值給原來的item.title。所以代碼實現(xiàn)為:
以上就完成了本章節(jié)的所有內(nèi)容坚冀。
-
下節(jié)預(yù)告:
Snipaste_2018-01-22_10-31-24.png - 實現(xiàn)上圖中顯示未完成任務(wù)個數(shù)的動態(tài)響應(yīng)
- vue的路由切換
- 以及點擊clear completed按鈕,清除所有完成任務(wù)
