【发布时间】：2019-06-06 16:58:33
【问题描述】：
我对 VueJS 有点陌生，我在 mounted 函数中使用了 jQuery 代码：
mounted () {
$(".sidebar-dropdown > a").click(function() {
$(".sidebar-submenu").slideUp(200);
if (
$(this)
.parent()
.hasClass("active")
) {
$(".sidebar-dropdown").removeClass("active");
$(this)
.parent()
.removeClass("active");
} else {
$(".sidebar-dropdown").removeClass("active");
$(this)
.next(".sidebar-submenu")
.slideDown(200);
$(this)
.parent()
.addClass("active");
}
});
}
active 类正在运行，但 slideUp 和 slideDown 无法运行。有什么建议吗？
【问题讨论】：
-
这种事情对于 Vue 新用户来说是很常见的，它确实会阻碍你对框架的理解和使用能力。帮自己一个忙，将 jQuery 从您的开发管道中移除，直到您更深入地了解 Vue 本身的工作原理；你正在做的大部分 DOM 操作最好通过组件模板完成，通过 Vue 方法处理事件，而不是使用 jQuery 绕过框架。
-
我在HTML模板中有很多链接我必须一一绑定到点击事件那怎么办？我使用了 jQuery，所以我必须编写一行代码，然后可以使用该类的所有元素，但在 Vue 中我必须在每个元素上写
@click！ -
如果你把它放在一个可重用组件的
mounted()中，你一定会遇到灾难。至少通过将this.$el作为 jQuery 选择器中的第二个参数传递来限制绑定事件的应用，如下所示：$('.slidebar-droopdown a', this.$el)。这样，您只需在组件中绑定一个事件/链接，而不是为页面中的所有链接绑定一个事件/链接 * n 个组件。 -
但是，说真的，您可能想阅读event delegation。如果你如此热衷于使用 jQuery，至少要以正确的方式使用它。而且，实际上，我相信这就是你的事件不起作用的原因。 Vue 更新（如替换）元素并且您最初绑定的事件消失了。答案是使用在绑定和事件发生时绑定在DOM中的元素上的委托事件。
-
好吧，您可能希望使用 v-for 循环来绘制这些元素，而不是大量单独的 @click 事件，这样您就可以编写 DOM 元素 和单击一行中的处理程序。与 jQuery 相比，Vue（和其他 SPA 框架）需要一种非常不同的方法，你有一些习惯需要改掉。当 vue 开始尝试更新 DOM 时，像这样混合 vue 和 jquery 会导致各种令人困惑的错误，并覆盖它不知道的 jquery 绑定，反之亦然。
标签： javascript jquery vue.js