幾天的內容不是很多，因為我們腳手架的學習告一段落了，也是為了跟明天開始的內容有一個區分。
明天將會有一個非常重要的內容來了，各位，vue中的ajax他來了，這個絕對是重量級，有點興奮！
十一.TODOList編輯
新增一個編輯功能，要完成的邏輯就是，當我們一點選編輯按鈕，物件會新增一個屬性edit為true，然後頁面上兩個標籤一個span一個input通過edit的值去條件渲染是否展示
很明顯我們確實能給一個物件新增一個屬性，但是這樣新增的屬性並沒有setter所以也無法被vue檢測到而重新解析模板，應該用vue.set的方法，這裡還只能用我們的第二種$set的方法因為這裡拿不到Vue
最好用v-show畢竟這裡會頻繁切換
這裡應該完善一下，不是每一次點選編輯都會去建立一個屬性，有這個屬性了直接改值就可以了
我們失去焦點後要把值改到資料裡面去的邏輯，注意還記得得到這裡嗎，事件處理函式不傳引數預設為e，傳多個引數的時候要使用e，需要傳參$event
利用全域性事件匯流排把我們的id和要改的資料傳過去，這裡是發射資料應該是 emit
1.nextTick
bug
-
可以輸入空值並儲存為新的值
-
有一個很重要的點，我們需要一點編輯，就讓input框獲取焦點吧，這樣才符合常理，我們可以通過打標識，來獲取這個input框，然後在我們點選編輯的事件中，最後一步通過$refs來讓他獲取焦點
想法是好的，但是很遺憾這樣做並不行，分析一下，我們vue的工作原理是當一個函式的內容執行完了才會去重新解析模板，如果完成一行資料就去，那一直都在來回就很耗費資源了，所以這裡當我們點選編輯的時候剛好把edit改為了true，頁面接收到true後文字消失，input出現，但是關鍵就是這個時候就處於這個節點，拿到了true還沒給到頁面上，這個時候繼續往下執行focus這一行程式碼，我們的input都沒出現在頁面上怎麼來獲取焦點？
又是因為獲取焦點的問題，前面因為為這個栽過一次，但是現在不用怕了，vue針對於這個情況專門出了一個api，而且這個api還挺常用，.$nextTick，他後面跟的是一個回撥函式，他的意思就是當我們完成下一次DOM更新操作後才會去執行裡面的回撥函式，也就是這一次編輯改為true更新到DOM上面後才會回來執行這裡面的回撥
十二.過渡與動畫
1.動畫
先完成一個點選顯示隱藏的案例
定義好我們的動畫效果，在vue裡面雖然可以簡便一點，但是效果還是要自己寫寫的
我們要的效果就是點選顯示就給我顯示同時新增一個來的效果，點選隱藏同理，如果原生js寫就需要去判斷邏輯等等
vue能做的就是可以讓我們輕鬆實現顯示隱藏的動畫，就目前來看jq好像是直接呼叫哈，jQuery的動畫直接呼叫就能做到，回到正題，需要新增一個標籤 transition這個標籤裡面放我們的要顯示隱藏的元素
同時我們的動畫的類名有特定的類名，顯示是 v-enter-active，隱藏是 v-leave-active，配置好這些後，vue就能在合適的時機給你新增合適的動畫
注意:
-
每一個 transition標籤可以自己取名字，但是取了之後，對應的動畫類名的 v也要跟著改才會有動畫效果
-
要讓其一開啟網頁就執行一次動畫，新增一個屬性 appear（可以直接就簡寫為一個appear就表示為真了，有這個值了）
-
最終的真實DOM並沒有transition這個標籤
2.過渡
用過渡再次實現上面的動畫效果，首先標籤這裡還是一樣，transition標籤，name屬性
主要是下面css這裡的編寫，我們的vue給我們提供了其實不止上面兩個類名，分為來和走，每一個狀態都有三個，一共六個，先說來的時候，有來的起點和來的終點，對應的類名為 v-enter和v-enter-to，用transition來做就不用寫動畫效果了，直接在來的起點寫上是個什麼狀態，終點是個什麼狀態即可
像這樣將我們的效果都寫在類名裡面，本來是有六中類名的，不管是進入還是離開都有一箇中間過程的類名，這個也可以寫到我們的出現動畫效果的標籤上transition控制過渡效果，也可以寫到我們的過程中這個類名裡面
最終簡化下來，進入的起點使我們離開的終點，離開的終點是我們的進入的起點
注意transitin配置在動畫呈現的標籤裡面會有bug，最好還是寫在類名裡面
3.多元素過渡
當我們想多個元素使用過渡的時候，如果這樣做，就會報錯
這個時候需要一個新的標籤 transition-group而且，還必須配置key值
4.第三方整合包
想要完成更多酷炫的進出效果，可以去使用第三方庫了 animate.css
我們之前的所有style的樣式全部刪除，就留一個標籤上的transition-group這個還是要的，參考其官網可檢視到首先安裝，並且引入的時候直接引入的方式，因為是css格式
三個屬性配置，第一個先新增我們的 name（官網）、然後是進入的屬性enter-active-class，離開屬性leave-active-class，後面兩個的值直接在官網首頁找到對應的樣式複製進來
5.TODOList動畫版（問題）
直接在css裡面定義動畫，然後給每個li新增transition即可實現
這裡面有兩個問題啊，我又是一個喜歡剖析原理得人，第一個是為什麼一定要新增appear，這個新增的效果不管是現在還是後續才會有效果，他不就是一個能讓一開始就執行一次動畫的屬性嗎，還有一個問題，這裡沒有條件渲染了，想知道vue是怎麼檢測到我是刪除和新增的並還能對應給出動畫效果，因為新增是unshift方法實現的，刪除是陣列filter方法實現的，難道vue又做了封裝？
這些問題目前我還搞不懂先存在這裡，看後續有沒有大佬能幫解答一下，或者學到後面了，看能不能回來自己解答一下