作为一个使用了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:无需构建步骤
”,因为它包含了其他一些超级有用的例子。