作为一个使用了 jQuery 很多年 的人, 最近, 我成为了一个 vue 的皈依者, 我认为从一个框架到另一个框架的迁移过程将是一个值得讨论的有趣的话题.
在我开始之前, 我想清楚地说明一点. 我并没有以任何方式告诉任何人去停止使用 jQuery.jQuery 最近相当流行, 而且见鬼, 我几年前也写过类似的东西 ("我如何(不) 使用 jQuery"). 如果你使用 jQuery 完成了你的项目, 并且你的最终用户成功地使用了你的站点, 那么你将获得更多的动力去继续使用对你有用的东西.
本指南更适合那些可能具有多年 jQuery 经验并希望了解如何使用 Vue 来完成工作的人. 考虑到这一点, 我将重点介绍我所认为的 "核心"jQuery 用例. 我不会涵盖每一个可能的特性, 而是用 "我经常使用 jQuery 来完成 [X]" 的方式来代替, 这种方式可能更适合那些考虑学习 Vue 的人.(顺便提一句, 请注意, 我编写示例的方式只是执行一个任务的一种方式. jQuery 和 Vue 都提供了多种方法来实现相同的目标, 这是一件很棒的事情!)
记住了这一点, 我们来思考一些可以使用 jQuery 完成的高级的东西:
在 DOM 中找到某些东西(稍后再用它做一些事情)
修改 DOM 中的某些东西(例如一个段落的文本或一个按钮的类)
读取和设置表单值
表单验证(实际上是上面各项的一个组合)
Ajax 调用和处理结果
事件处理(例如点击按钮, 做某些事情)
测量或改变元素的样式
当然, jQuery 还有更多的功能, 但是这些用途 (至少在我看来) 涵盖了最常见的用例. 还要注意, 在上面的列表中有很多异花授粉现象. 那么, 我们应该从简单的一一对应的比较开始吗? 不, 没那么快. 我们先从介绍 Vue 应用程序中的主要差异开始.
# 定义 Vue 的使用场景
当我们将 jQuery 加入到页面上时, 我们基本上是在 JavaScript 代码中添加一把瑞士军刀来处理常见的 web 开发任务. 我们可以按照我们认为合适的顺序来处理任何一个用例. 例如, 今天客户可能会要求表单验证, 然后在一个月左右后, 又要求在站点的头部添加一个基于 Ajax 的搜索表单.
Vue 在这方面有一个显著的不同. 当使用 Vue 开始一个项目时, 我们首先会在 DOM 中定义一个我们希望 Vue 专用的 "区域". 因此, 我们来考虑一个简单的原型 Web 页面:
在一个典型的 jQuery 应用程序中, 我们可以编写代码来处理头部, 侧边栏和登录表单等. 这很简单:
而在一个 Vue 应用程序中, 我们首先需要指定要处理的内容. 假设我们的客户首先要求我们向 loginForm 元素添加验证, 那么我们的 Vue 代码就要指定这一点:
这意味着, 如果客户后来决定让我们在侧边栏中添加一些内容, 那我们通常会添加第二个 Vue 应用程序:
这是件坏事吗? 绝对不是. 我们马上就会得到封装的好处. 如果我们不小心使用了一个具有泛型名称的变量(我们都这样做过), 我们不必担心它与代码的其他部分发生冲突. 过后, 当客户端增加了另一个要求时, 像这样将我们独特的, 逻辑化的 Vue 代码集区分开就会确保每一个 Vue 应用程序不会相互干扰.
所以, 是的, 这是一件好事. 但当我第一次开始使用 Vue 时, 它绝对让我停了下来. 现在, 进入我们的用例.
# 在 DOM 中查找东西
你会发现另一个有趣或可怕的方面是如何 "在 DOM 中查找东西". 这有点模糊, 但我们来考虑一个强有力的例子. 我们有一个按钮, 当它被点击时, 我们让一些事情发生. 下面是一个简短的例子, 展示了它是怎样的:
现在我们来将这个例子与用 Vue 的实现方式进行比较:
这个 Vue 应用程序有点冗长, 但是请注意标记是如何在操作 ("click") 和将要调用的函数之间建立一个直接连接的. Vue 的代码并没有与 DOM 进行向后绑定(我们在 el 部分之外定义了它需要运行的地方). 这是 Vue 最吸引我的地方之一 -- 它能很容易地告诉你将要发生什么. 此外, 我不需要过多地担心 ID 值和选择器. 如果我更改了按钮的类或 ID, 我不需要返回代码中去更新选择器.
我们来考虑另一个例子: 在 DOM 中查找和更改文本. 想象一下那个按钮, 单击它, 现在会更改 DOM 的另一部分的文本.
我已经添加了一个新的 span, 现在, 当按钮被单击时, 我们使用另一个选择器来查找它, 并使用一个 jQuery 工具方法来更改其中的文本. 现在我们来考虑一下 Vue 版本:
在本例中, 我们使用 Vue 的模板语言 (突出显示的行) 来指定我们希望在 span 中呈现的一个变量, 在本例中是 resultText. 现在, 当按钮被单击时, 我们更改该值, span 的内部文本将会自动更改.
顺便说一句, Vue 支持 v-on 属性的简写, 因此示例中的按钮可以用 @click="doSomething" 代替.
# 读写表单变量
处理表单可能是我们可以用 JavaScript 做的最常见也是最有用的事情之一. 甚至在 JavaScript 之前, 我早期的 "web 开发" 大部分都是通过编写 Perl 脚本来处理表单提交. 作为接受用户输入的主要方式, 表单对 Web 来说一直都是很重要的, 而且很可能会在相当长一段时间内保持不变. 我们来考虑一个简单的 jQuery 例子, 它将读取几个表单字段并设置另一个:
这段代码演示了 jQuery 如何通过 val( )方法读写表单. 最后, 我们从 DOM 中获取四个项目(所有的三个表单字段和一个按钮), 并使用简单的数学方法来生成一个结果. 现在我们来考虑一下 Vue 版本:
这里介绍了一些有趣的 Vue 快捷方法. 首先, v-model 是 Vue 如何在 DOM 和 JavaScript 中的值之间创建双向数据绑定. data 块变量将自动与表单字段同步. 更改数据, 表单就会更新. 更改表单, 数据就会更新..number 是 Vue 的一个标志, 用于将表单字段的继承字符串值视为数字. 如果我们不做这一步, 按原样做加法, 我们会看到字符串加法, 而不是算术. 我已经使用 JavaScript 处理了将近一个世纪了, 但还是搞砸了.
另一个简单的 "技巧" 是 @click.prevent. 首先,@click 为按钮定义了一个单击处理程序, 然后. prevent 部分会阻止浏览器提交表单的默认行为(相当于 event.preventDefault( )).
最后一个是绑定到该按钮的 doSum 方法进行的相加操作. 注意, 它只处理数据变量(Vue 在 this 作用域内允许对这些变量进行操作).
虽然这主要是我个人的感觉, 但我非常喜欢在用 Vue 编写脚本时, 脚本中没有查询选择器, 以及 html 如何更清楚地显示它在做什么.
最后, 我们甚至可以完全去掉按钮:
Vue 的一个更酷的特性是 computed properties(计算属性). 它们是虚拟值, 可以识别其派生值何时被更新. 在上面的代码中, 只要两个表单字段中的任何一个发生更改, 总和就会更新. 这也适用于表单字段之外. 我们可以这样渲染其总和:
# 使用 Ajax
值得称赞的是, jQuery 使 Ajax 的使用变得非常简单. 事实上, 我可以说我已经以一种 "普通" 的方式完成了 Ajax, 可能总共只有一次 (如果你对此很好奇, 你可以查看 XMLHttpRequest 规范, 并且你可能会为你已经避免了它而感到高兴).jQuery 简单的 $.get(...) 方法在很多情况下都能工作, 并且当它需要在更复杂的东西中使用时,$.Ajax()也能使它变得简单. jQuery 做得很好的另一件事是它处理 JSONP 请求的方式. 虽然现在使用 CORS 基本上没有必要, 但 JSONP 是一种处理向不同域中的 API 发出请求的方法.
那么, Vue 如何让 Ajax 变得更简单呢? 没有什么!
好吧, 听起来很吓人, 但其实并不可怕. 有许多处理 HTTP 请求的选项, 而 vue.js 采用了一种更不可知的方式, 让我们开发人员决定如何处理它. 所以, 是的, 这确实意味着更多的工作, 但我们有一些不错的选择.
首先应该考虑的是 Axios, 这是一个 Promise-based 库, 在 Vue 社区中非常流行. 下面是一个使用它的简单的例子(摘自它们的 README 文件):
Axios 支持 POST 请求, 当然, 它也允许我们在许多其他选项中指定头文件.
虽然 Axios 在 Vue 开发人员中非常流行, 但我并不是真心喜欢它.(至少现在还没有.)相反, 我更喜欢 Fetch.Fetch 不是一个外部库, 而是执行 HTTP 请求的一种 Web 标准方法. Fetch 在大约 90% 的浏览器
上都有很好的支持, 虽然这意味着使用它并不完全安全, 但是我们总是可以使用一个我们需要的 polyfill.
虽然这完全超出了我们在这里讨论的范围, 但是 Kingsley Silas 写了一本关于在 React 中使用 Axios 和 Fetch 的优秀指南.
和 Axios 一样, Fetch 也是 Promise-based 的, 并且有一个友好的 API:
Axios 和 Fetch 都涵盖了所有类型的 HTTP 请求, 所以它们都能满足任意数量的需求. 让我们看一个简单的比较. 下面是一个使用了星球大战 API 的简单 jQuery 演示.
在上面的示例中, 我使用 $.get 调用该 API 并返回一个电影列表. 然后我用这些数据生成一个标题列表作为 li 标记元素, 并将其全部插入到一个 ul 块中.
现在, 让我们考虑一个使用 Vue 的例子:
其中最好的部分可能是使用 v-for 模板. 注意 Vue 是如何做到与布局无关的(至少与 JavaScript 无关). 数据是从该 API 中获取的. 它被分配了一个变量. 布局处理如何显示它. 我一直讨厌在我的 JavaScript 中使用 HTML, 但是 jQuery 提供了解决方案, 把它嵌入到 Vue 中看起来就很自然很合适.
# 一个完整的 (在某种程度上有点琐碎) 例子
为了更好地理解它, 让我们考虑一个更真实的例子. 我们的客户要求我们为一个产品 API 构建一个支持 Ajax 的前端搜索接口. 功能列表包括:
支持按名称和产品类别进行过滤
我们必须提供搜索项或类别的表单验证
当 API 被点击时, 向用户显示一条消息并禁用提交按钮
完成后, 对未显示产品进行报告或列出匹配项
我们从 jQuery 版本开始. 首先, HTML 部分如下:
有一个带有两个过滤器和两个 div 的表单. 一个用做搜索或报告错误时的临时状态, 另一个用于呈现结果. 现在, 检查代码.
代码首先为要处理的每个 DOM 项 (表单字段, 按钮和 div) 创建一组变量. 代码的逻辑核心在按钮的点击处理程序中. 我们进行验证, 如果一切正常, 就对该 API 执行一个 POST 请求. 当请求返回时, 我们要么呈现结果
, 要么在没有匹配的情况下显示消息.
你可以使用下面的 CodePen 来运行这个演示的完整版本.
现在让我们考虑 Vue 版本. 同样, 我们先从布局开始:
从顶部看, 其中的变化包括:
用一个 div 包装布局, 可以让 Vue 知道在哪里运行.
对表单字段使用 v-model, 以便它能轻松处理数据.
使用 @click.prevent 处理执行主搜索操作.
使用 :disabled 在这个 Vue 应用程序中将按钮绑定到一个值, 无论按钮是否禁用 (我们稍后将看到它的实际操作).
状态值与前面的示例稍有不同. jQuery 有一个特定的方法来设置 DOM 项中的文本和 HTML 中的文本, 而 Vue 在将 HTML 分配给要呈现的值时需要使用 v-HTML. 如果我们在 HTML 中直接编写{{status}}, 标签将被转义.
最后, 使用 v-if 条件性地呈现结果列表, 同时使用 v-for 来处理迭代.
现在让我们看看代码.
值得调用的第一个块是 data 字段集. 有些映射到表单字段, 有些映射到结果, 状态消息等等. searchProducts 方法处理的内容与 jQuery 版本大致相同, 但通常直接绑定到 DOM 的代码要少得多. 例如, 即使我们知道结果是以一个无序列表列出的, 但代码本身并不关心这一点. 它只是进行赋值, 标记才处理呈现值. 总的来说, 与 jQuery 代码相比, JavaScript 代码更关心逻辑, jQuery 代码 "感觉" 是更好的分离了关注点.
和以前一样, 这里有一个 CodePen 可以让你自己试试:
#jQuery 将死! Vue 万岁!
好吧, 这有点过分了. 正如我在开始时所说的, 如果你喜欢使用 jQuery 并且它对你有用的话, 那我觉得你完全没必要更改任何东西.
不过, 我想说的是, 对于习惯使用 jQuery 的人来说, Vue 似乎是一个很好的 "下一步".Vue 支持复杂的应用程序, 并为搭建和构建项目提供了一个非常棒的命令行工具. 但是对于更简单的任务来说, Vue 是一个很棒的 "现代 jQuery" 的替代品, 它已经成为我开发的可选工具!
有关使用 Vue 替代 jQuery 的另一个观点, 请查看 Sarah Drasner 的 "使用 Vue.js 替换 jQuery: 无需构建步骤", 因为它包含了其他一些超级有用的例子.
来源: http://www.jianshu.com/p/372a859336d4