时间戳

首页 > 解决方案 > 防止在 VueJS 生成的代码中执行 jQuery

javascript - 防止在 VueJS 生成的代码中执行 jQuery

问题描述

我正在努力用 VueJS 替换 jQuery，但我的旧 jQuery 代码仍在 VueJS 生成的代码上执行。

有一种方法可以防止 jQuery 代码在 VueJS 代码上执行？

我不能简单地在 VueJS 页面上禁用 jQuery，因为页面的某些部分仍然需要 jQuery。

我想我应该检查一个 HTML 有data-v-xxxxx属性，然后阻止 jQuery 执行它。

我找不到阻止在某些标签上执行 jQuery 的方法。

这是可行的还是我需要找到另一种方法？

标签： javascriptjqueryvue.jsvuejs2

解决方案

如果不查看您的应用程序，很难提出解决方案。无论如何，这是一个尝试。

假设您的旧 HTML/jQuery 是这样构造的：

    <div class="mainDiv">
        <header>
        <!-- Some complicated HTML for the header !-->
        </header>

        <!-- Rest of the app !-->
        <div class="someContainer"></div>

    </div>

假设您开始将标头重构为 vueJs 组件，您可以尝试使用 CSS 选择器和事件委托将其与 jQuery 隔离。

CSS 选择器将允许您仅在某些元素内选择元素。

    // before
    const $root = $(".mainDiv");

    // after
    const $root = $(".someContainer");

    // select an element inside the new root
    $root.find("p")
    // catch all clicks inside this root.
    $root.on("click", e => {});

你可以做什么，虽然我不建议它传递一个新版本的 jQuery 对象，它已经预先选择了正确的根。

例如，如果您的应用程序$("selector").click()在您的应用程序中到处都有一些，那么您可以将全局别名$为一个新函数：

    jQuery.noConflict(); // will restore the old $ global var
    const $root = jQuery(".someContainer");
    // very basic and incomplete proposal
    const $ = function (...args) {
        return $root.find.apply($root, args);
    };
    window.$ = $; // make it globally available.

推荐阅读