通過Vue實現的todolist


和接口對接的todolist因為有后台的存在,todolist獲取的數據會一直存在不丟失(不管你如何刷新頁面),思路如下:

首先得先搞到接口:

 

  • 通過這個接口地址可以獲取整段的數據,成功err為0。
  • 於是我們首先第一步就應該先封裝好一個初始化函數,以方便我們想要的傳參格式fetch(url,  type  ,   {   },function  (   ){       })

 

  •  然后我們創建一個Vue實例,並讓他掛載在html上

 

  • data下的數據會自動掛載在vue的實例對象上,再內層寫一個data存放ajax初始化請求得到的data數據。

 

 

  •  因為頁面內的所有數據都需要ajax請求獲取,重中之重的就是先寫一個初始化init函數。

  •  在書寫函數時,需要主要this的指向,所以需要淺克隆一個_this變量,用於存放Vue實例

 

 

將todolist的雛形完成,並綁定一些事件和值.

 

 

 

 

 完成add、remove函數(利用data._id的唯一性)和虛擬DOM加載完成后執行的mounted鈎子函數監聽初始化

 

 

 

 

 

 

對着接口改數據要求。

 

 

 

 

 

 這樣一個自動更新數據的todolist就誕生了。

  |

  |

  |

  \    /

       \/

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM