从 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 和 {{}} 就把数据和视图建立起关系了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章