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