Vue學習之旅：todomvc的學習練習

1、前奏

一、todomvc官網地址：http://todomvc.com/

 查閱文檔和下載插件均可以到這個官網上找。

二、上GitHub上搜索下載有人作的現成的本地模板：進入GitHub搜索todomvc  template，出來的第一個就是了,即：tastejs/todomvc-app-template。

三、解釋裏面的每一個文件的用處

（1）  .editorconfig 文件是統一代碼文件風格的，實際開發中由於是多人開發，爲了方便你們在這裏統一風格。

（2）package.json文件，須要用到的一些文件。

 

 

 （3）進入該文件夾下載安裝相關的樣式，執行npm i

 

 安裝好了樣式，再打開頁面，就出現了想要的樣式，（沒安裝以前，打開首頁後，出現的是亂掉的頁面，因此要安裝）

（4）在該文件夾下安裝vue文件包，執行： npm  i -S vue

 

 （5）下載好了後，在index頁面引入vue文件包。

 

 自此，準備工做都安排好了。按寫代碼了。

2、todomov操做

一、todomvc 案例列表數據展現（渲染列表）

（1）處理ul下的li,completedd和editing的切換，以及對應的功能，

（2）在app裏面寫框架，同時，要在index頁面肯定對應的範圍，即加 id="app" 

（3）經過分析，知道每一行的包括了id，內容，和狀態。因此在app裏寫數據的時候，要有這三項內容。

 

 

 

 （4）頁面的數據從後臺獲取，即加一個v-for循環，這裏記得使用v-for時，要加key，惟一標識。

 

 注：v-for後的既能夠加index，也能夠不加index，由於item.id也是惟一的。當item裏的內容不能惟一確認時，須要用index來輔助。

（5）經過類，動態的綁定狀態，（注：當動態綁定類的時候，即的大括號時單個的{}，不是雙大括號{{}}  ）

 

 （6）表單的打勾狀態，在後臺要動態的控制起來，不能用一個checked的寫死。它的狀態由completed來控制的。

 

注：v-model用在類checkbox上，那麼v-model是用來控制checkbox的選中狀態的，  即讓checkbox選中某個。

// 注：只要數據發生變化，頁面中的全部指令和表達式都會從新計算一次。（注：有個另外，那就是事件不會從新計算，由於事件只有在觸發的時候纔會執行。）

二、todomvc案例添加任務

　　添加內容是一個雙向數據綁定的過程，因此用到v-model，給它綁定一個事件，輸入新內容後，經過觸發事件，來給下面列表添加新的新內容。

（1）