web前端:如何(安全地)使用Vue.js的jQuery插件

首页 > 学习交流 发布时间:2018年02月10日 22:18编辑:田井艳来源:搜狐公众平台

原标题:web前端:如何(安全地)使用Vue.js的jQuery插件

在同一个UI中使用jQuery和Vue.js不是一个好的选择。如果你可以避免它,请尽量避免。你为了折腾自己,请把我上一句忽略。

你可能读到这篇文章不是因为你想要用jQuery和Vue,而是你必须这么做。也许客户坚持使用一个特定的jQuery插件,那么你将没有时间为Vue重写。

在本文中,我将演示如何将jQuery UI Datepicker插件添加到Vue项目。

?

与jQuery和Vue一起使用的问题

jQuery和Vue一起使用有哪些潜在的危险?

Vue是一个嫉妒的库,你必须让它完全拥有你给它的DOM补丁(由你传递给el的定义)。如果jQuery对Vue正在管理的元素进行更改,比如添加一个类到某个类中,Vue将不会意识到这个变化,并且会在下一个更新周期中覆盖它。接下来分享一个web前端教程,有什么不懂的可以加我视频中的联系方式和我交流,加上后领取价值12800元的web前端学习视频教程。

解决方案:使用一个组件作为包装

知道Vue和jQuery永远不会共享DOM的一部分,我们必须告诉Vue封锁一个区域并将其交给jQuery。

使用一个组件来包装一个jQuery插件似乎是要走的路,因为:

我们可以利用生命周期钩子来设置和拆卸jQuery代码

我们可以使用组件接口通过道具和事件与Vue应用程序的其余部分进行通信

组件可以选择退出v-once更新

设置jQuery UI Datepicker

显然你需要在你的项目中首先包含jQuery和jQuery UI库。一旦你有了这些,datepicker只需要一个输入元素自己附加到:

然后可以通过选择它并调用方法来实例化它:

Datepicker组件

为了使我们的datepicker组件,模板将是这个输入元素:

注意:这个组件应该只是插件的一个包装。不要把你的运气,给它的任何数据属性或使用指令或slots。

实例化小部件

而不是给我们的输入一个ID并选择它,我们可以使用这个(this.el在组件被挂载之前是未定义的。

拆除

要拆除日期选择器,我们可以按照类似的方法并使用生命周期钩子。请注意,我们必须使用beforeDestroy来确保我们的输入仍然在DOM中,因此可以被选中(它在destroy钩子中是未定义的)。

通过props配置

为了使我们的组件可重用,最好允许自定义配置,比如用配置属性dateFormat指定日期格式。我们可以用props做到这一点:

让jQuery处理更新

让我们说,而不是作为一个字符串传递你的dateFormat的props中,你把它作为你的根实例的数据属性,即:

这将意味着dateFormat将是一个被动数据属性。您可以在应用程序生命周期的某个时刻更新其值:

由于dateFormat prop是datepicker组件挂载挂钩的依赖关系,因此更新它将触发组件重新呈现。这不会很酷。 jQuery已经在输入上设置了你的datepicker,现在正在用它自己的自定义类和事件监听器来管理它。组件的更新将导致输入被替换,因此jQuery的设置将被立即重置。

我们需要这样做,以便反应数据不能触发此组件中的更新...

v-once

v-once指令用于在组件有很多静态内容的情况下缓存组件。这实际上使组件选择退出更新。

这实际上是完美的使用我们的插件组件,因为它将有效地使Vue忽略它。这给了我们一些信心,jQuery将在应用程序的生命周期中对这个元素进行无阻的控制。

将数据从jQuery传递给Vue

如果我们无法检索选择的日期并在应用程序的其他地方使用它,那么使用日期选择器是没有用的。让我们这样做,在一个值被选中后,它被打印到页面。

我们将首先给我们的根实例一个日期属性:

日期选择器窗口小部件有一个onSelect回调,当选择一个日期时被调用。然后,我们可以使用我们的组件通过自定义事件发出这个日期:

我们的根实例可以侦听自定义事件并接收新的日期:

接下来分享一个web前端教程,有什么不懂的可以加我视频中的联系方式和我交流,加上后领取价值12800元的web前端学习视频教程。

返回搜狐,查看更多

责任编辑:

热门动态本月排行

热门动态精选