本次分享是一系列分享的重點，所以準備分 2 - 3 次完成最後 vue 到 jquery 的分享。代碼大家可以 todoMVC 下載一個 jquery 版本，我是以此爲例進行代碼轉換的。
首先我們引入 vue.js, 有關 vue 安裝很簡單，大家可以下載 vue.js 或者通過 npm install 來安裝，這裏我採用後者方式安裝 vue.js。
開發的 IDE 我用的 visual studio code , 自從 visual studio code 出現我看到微軟從封閉走向開發，而且微軟產品真心不錯。我們再次運行程序。
我們將jqeury 版的 app.js 複雜一份改名爲 j-app.js 留作備用。
然後我們需要確定我們的應用範圍，我們用 id 作爲標識來確定應用的範圍。然後我們就搭建我們的 vue 的應用。
然後我們測試一下，添加一個 {{todos}} 來測試我們的代碼。
好我們既然將 jQuery 版本轉爲 vue 。我們就不需要一切都是重頭來做。我們返回到備份文件，對有用的代碼保留調整，我們先刪除這部分代碼。
然後將可以複用的 util 中的內容保留複製到 methods。
這樣我們將本地保存的數據顯示出來，可以調用 store 中的方法來顯示數據。
在數據結構我們除了要顯示數據列表，還有一個新的數據。表示我們新創建的數據。
然後我們就需要將 newTodo 綁定到 input 輸入框上。
然後我們再次回到備份代碼上，刪除去掉這些代碼，然後我們這裏保留 director.js 的作爲我們代碼路由。
我們將 Router 複製到 created 這個生命週期階段。
然後我們將函數修改我箭頭式函數，也就是 lamba 這樣我們就無需綁定 this，這是=>好處，大家千萬不要簡單用箭頭式函數好處僅僅是好看，其實好處多多。然後我們可創建一個 filter。
然後我們處理的 create 任務的方法，
然後將 create 修改爲 addTodo 名稱，
我們進行修改，然後將 newTodo 綁定 input 的 keyup 事件上。
然後我們將 display 的樣式刪除，我們不需要。
在 vue 中我們就不再需要模板來渲染界面，我們將模板部分的 html 代碼移動到 ul 標籤下，
然後我們用 v-for 來實現列表的顯示，然後綁定 class 爲 completed 。
