從 jQuery 平滑過渡到 vue （下）- 1
本次分享是一系列分享的重點，所以準備分 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 。
