Nuxt.js 中的 jQuery 或为锚标记设置 onClick 事件侦听器

Question

我正在开发一个 Nuxt.js 项目。在这个项目中，我想为恰好在正文中的任何锚标记设置一个事件侦听器，然后再做一些事情。

问题是我想要监听的锚标记位于 CMS 中设置的内容中，因此我无法像往常一样在 Vue.js 中绑定 onClick 事件。我想操纵 DOM 将 onClick 事件绑定到正文中的锚标记。

在 jQuery 方面：

window.onload = function () {
    if (typeof jQuery != 'undefined') {
        jQuery(document).ready(function ($) {
            jQuery('body').on('click', 'a', function (event) {
                // all my other code that does what I want
            });
        });
    }
};

我正在尝试在 Nuxt.js 中设置 jQuery，我尝试将其安装为插件（yarn add jquery，然后将其添加到我的 nuxt.config.js），我尝试将 CDN 引用添加到头部.将它作为插件安装似乎没有做任何事情。如果我在页面加载后在控制台中输入$().jquery，它会返回我脑海中的 jQuery 版本。

但是，如果我尝试将 jQuery 添加到页面上的 mounted() 挂钩，它会返回“未定义 jQuery”

一个示例，它会导致相同的“未定义 jQuery”错误：

mounted() {
  this.$nextTick(() => {
    // another method that's unrelated; this is not blank in my actual code
  });

  this.jQueryTest();
}
methods : {
  jQueryTest() {
    jQuery('body').on('click', 'a', function (event) {
      console.info('hi');
    });
  }

此外，我知道将 Vue.js 与 jQuery 混合使用通常是不好的做法。如果有 Nuxt-y/Vue-y 的方式来设置这个事件监听器（一个 onclick 事件，用于恰好在 body 中的任何锚标记），那么我听到它就会松一口气。

--

更新：请参阅下面的项目设置示例。我修改了类等细节。

<div
  class="Card__extras"
>
  <p
    v-show="sectionOpen"
    ref="section"
    class="Card__extras-section"
    :tabindex="isActive ? 1 : -1"
    v-html="sectionText"
  />
</div>

sectionText 是从 CMS 中提取的字符串，类似于：

To read more about this story — and other subjects –  check out <a target="_blank" href="https://google.com">This Website</a>

Answer 1

这里是如何安装 jQuery 的指南：https://stackoverflow.com/a/68414170/8816585

现在，您应该在 Vue/Nuxt 应用程序中使用 jQuery 吗？我会说绝对不是。
如果您有 50k 行遗留代码，也许。

Vue/React 是声明性的，这意味着您只需要告诉他们要做什么，而不是如何来实现。
jQuery 对 state 和 reactivity 没有任何概念，与现代 JS 框架相比，它基本上是一个低于标准的工具。除了几乎相同（捆绑）大小之外。

我想说你现在比 jQuery 更适合使用原生 ES6+ JavaScript 代码。

所以，是的，尽可能使用 Vue（或 Nuxt）并尽量不使用 jQuery。到目前为止，我已经使用 Vue 大约 3/4 年了，但我从未使用过。

如果你需要一些包，你可以在这里找到很多很酷的东西：https://github.com/vuejs/awesome-vue

---

作为 HTML 元素和一些 JS 之间简单快速绑定的示例，您确实有这个

<template>
  <button @click="test">click me!</button>
</template>

<script>
export default {
  methods: {
    test() {
      console.log('this is a nice test!!')
    },
  },
}
</script>

更多详情可关注官方Vue documentation。