从 jQuery 平滑过渡到 vue （上）

金刚狼系列电影是个人比较喜爱的超级英雄，金刚狼是 Xmen 中的一员，也是 Xmen 中唯一一个有自己单体电影一个超级英雄吧。我们不确定呀。不过金刚狼和Xmen的关系有点像 jquery 和 javascript 当年关系，当年 jquery 有盖过 javascript 的趋势。不过随着 javascript 自身不多完善，以及前段不断发展，技术上进行翻天覆地的改变，jquery 这个昔日此诧风云也淡淡退出 developer 视野，我们更多地关心像 angular react 和 Vue 这样新兴的英雄。

那么一些老的项目，如果用jquery写的，就面临向 vue 进行升级。今天我们就看一看如何把 jquery 项目转移为 vue 项目。在开始之间我们看一看 jquery 和 vue 历史以及他们开发 web 的不同套路吧。首先我们看 jquery 是事件驱动的，而 vue 是数据驱动的。

大小上，vue 显得轻巧而且强大。

安装差别不大，不过 vue 当然不仅是这么简单，我们可以通过 vue 和 webpack 以及 vue 周边以及衍生产品搭建出庞大复杂的库，不过 vue 是大事能做小事也不差，我们可以简单引用 vue 就可以开始进行 vue 开发之旅了。

我们通过一些常用 web 开发场景来对比 vue 和 jquery 对应开发套路，从而大家可以了解一下如何将你的 jquery 代码转换为 vue 的代码。下面是点击事件的处理。jquery 是通过选择器获取 dom 然后将事件绑定到 dom 上，而 vue 是通过 @click 自定义 dom 属性将点击事件绑定到对应 dom 上的。

样式的绑定，只要是绑定一定像 vue 这样 moden web 框架的优势，通过自定义:class 属性就轻松将 className 的样式赋给我们目标的 dom。

数据绑定最初是 angular 引入的吧，视乎一下只让 web 前端从繁重数据绑定的工作解放出来。我们可以把更多精力放在业务逻辑上了。

通过对比我们看在 vue 上实现数据绑定是多么简单，而且 code 逻辑更加清晰易懂。v-model 和 {{}} 就把数据和视图建立起关系了。