使VueJS和jQuery发挥出色

JavaScript Vue.js

Stafan阳光

2020-03-19

这个问题与尚未使用的intl-tel-input和vuejs2一起使用 /相似

VueJS使用prop作为具有解决方案的数据属性值,但有点解释“环境”。

因此,长话短说,我正在动态设置一个新的引导程序选项卡(标题和URL),然后尝试使用来(重新)绑定某些功能jQuery

在我的Vue方法中添加以下行https://github.com/thecodeassassin/bootstrap-remote-data/blob/master/js/bootstrap-remote-tabs.js#L258将应用该功能,但前提是我触发了换两次。

与第一个(未回答)问题相同的问题。

有人可以解释一下vueJS之间的工作原理jQuery吗?以及如何解决问题,希望无需重写jQuery包。

如果console.log我的变量似乎落后了一步。

LE:

我已经为提到的相关问题准备了一支笔:https : //codepen.io/AngelinCalu/pen/LWvwNq

第2260篇《使VueJS和jQuery发挥出色》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
LGO西里 2020.03.19

使Vue与其他DOM操纵工具包完美配合的方法是将它们完全隔离:如果要使用jQuery操纵DOM小部件,则不要同时在其上使用Vue(反之亦然)。

包装部件充当桥,其中的Vue可以与组件进行交互和组分可以操纵使用jQuery(或其他)其内部的DOM元素。

生命周期挂钩之外的jQuery选择器是一种不好的代码味道。validatePhoneNumber使用选择器和DOM操作调用,但是您使用Vue处理keydown事件。您需要使用jQuery处理此小部件上的所有内容。不要使用Vue设置其类或phone_number或处理其事件。这些都是DOM操作。如前所述,如果将其包装在组件中,则可以将props传递给该组件,并且可以使用jQuery从这些props中设置class和phone_number。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android