本次分享是一系列分享的重点，所以准备分 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 。
网友评论