Nuxt.js中的jQuery或为锚定标记设置onClick事件侦听器
我正在做一个Nuxt.js项目。在这个项目中，我想为正文中的任何锚标签设置一个事件侦听器，然后在之后做一些事情。
问题是我想要监听的锚标签是在内容管理系统中设置的，所以我不能像你通常那样在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 is not defined“
一个示例，它会导致相同的'jQuery is not defined‘错误：
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事件)，那么我听到它就放心了。
--
更新:有关项目如何设置的示例，请参阅下文。我已经修改了一些细节，比如类。
<div
class="Card__extras"
>
<p
v-show="sectionOpen"
ref="section"
class="Card__extras-section"
:tabindex="isActive ? 1 : -1"
v-html="sectionText"
/>
</div>sectionText是从内容管理系统中拉入的字符串，类似于：
To read more about this story — and other subjects – check out <a target="_blank" href="https://google.com">This Website</a>回答 1
Stack Overflow用户
发布于 2021-08-04 22:06:52
下面是关于如何安装jQuery的指南：https://stackoverflow.com/a/68414170/8816585
现在，你应该在Vue/Nuxt应用中使用jQuery吗？我会说绝对不会。
如果你有50k行的遗留代码，也许是这样。
Vue/React是声明性的，这意味着你只需要告诉他们要做什么，而不是如何来实现这一点。
jQuery既不了解state，也不了解reactivity，与现代JS框架相比，它基本上是一个低级的工具。最重要的是几乎相同的(包)大小。
我想说您现在更适合使用普通的ES6+ JavaScript代码，而不是jQuery。
所以，尽可能多地使用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上找到。
https://stackoverflow.com/questions/68658362
复制相似问题
腾讯云开发者
