VueJS 和 JQuery 更改类答案

【问题标题】：VueJS and JQuery changing classesVueJS 和 JQuery 更改类
【发布时间】：2018-05-24 11:44:21
【问题描述】：

我有一些自定义的 JQuery 代码来监听事件并添加一些类来形成元素（焦点、模糊、奇数/偶数等）。没什么大不了的，但我不想在 VueJS 中重写所有这些逻辑，因为所有网站都只使用 JQuery，而 1 个页面使用 VueJS 来处理复杂的表单。

我编写了一个指令来在新的 VueJS 元素上启动 JQuery 代码，它正在工作。但是一些 VueJS 代码（在我的例子中是 vee-validate 指令插件，但它可以是任何 VueJS 代码）使用 v-bind:class 更改类。所以它删除了 JQuery 设置的类，它没有添加它的类来替换它们......有没有办法很好地使用 VueJS 和 JQuery/Javascript 的类？让 JQuery 了解现有的类或其他东西。

谢谢

【问题讨论】：

听起来您必须在生命周期的后期（可能在mounted）中分配您的 JQuery 类，而不是在指令中。
扩展了上面所说的内容，生命周期钩子通常应该是您研究的一个考虑因素。 mounted 和 updated 钩子可能是您最感兴趣的。
这不是你要找的，但它是你如何让 jQuery 和 Vue 玩得更好。 stackoverflow.com/a/43255516/392102
感谢您的回复，但我使用的是Directive 而不是Component。因为我需要将多个指令附加到一个元素，而一个组件只有一个。您关于mounted 和updated 的示例适用于components。

标签： jquery vue.js vee-validate

【解决方案1】：

您可以通过MutationObserver https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver 完成此操作

以下示例将设置一个 vuejs 应用程序，当单击该应用程序时，该应用程序将类从打开更改为关闭，然后通过 vue 修改类列表。然后它会设置一个变异观察者来寻找类属性的变化，并运行更多的 jquery 来检查 makeBold 类是否在类列表中，如果没有添加它。

这表明 vue 正在控制元素类列表，并且观察者正在通过执行一些 jquery 对更改做出反应

此外，我添加了一个复选框来禁用 oberserver 反应，以表明 vue 正在删除 makeBold 类

const app = new Vue({
  el: '#app',
  data() {
    return {
      on: true
    }
  }
})
const node = document.getElementById('app')
// add bold class with jQuery
$('#app').addClass('makeBold')

const observer = new MutationObserver(mutations => {
  if ($('#cbx').prop('checked')) return
  const changes = mutations
    .filter(({ attributeName }) => attributeName === 'class');
  if (changes.length && !$('#app').hasClass('makeBold')) {
    $('#app').addClass('makeBold')
  }
})

observer.observe(node, { attributes: true })

.on {
  background-color: orange;
}

.off {
  background-color: white;
}
.makeBold {
  font-weight: 600;
}
.appBody {
  height: 100px;
  border: 1px solid #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app" class="appBody" :class="{ 'on': on, 'off': !on }" @click="on=!on">
  Click Me
</div>
<input type="checkbox" id="cbx"> Disable Observer reaction

【讨论】：