Question

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

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

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

我认为我应该检查具有data-v-xxxxx属性的HTML，然后阻止jQuery在其上执行。

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

这可行吗，还是我需要寻找另一种方法？

Answer 1

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

假设您的旧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.

阻止jQuery在VueJS生成的代码内执行

1 个答案: