Question

所以我使用jQuery创建了一个accordion / tabs，我在.click元素上使用jquery li方法来翻页/标签。现在我想集成Vue.js来显示我在手风琴页面上从jquery获得的JSON数据。但是当我在手风琴和.vue上添加el: '.vue'类时，jquery .click事件根本不会触发，现在标签不会翻页。

也许我不应该将Vue与Jquery一起使用，但我发现jQuery更容易做一个简单的任务，比如在标签之间切换。

PS：我是Vue的新手

Answer 1

我在处理一个大型项目时遇到了同样的问题，该项目有一堆现有的jQuery代码，我们想切换到Vue.JS，而不必一次性重构所有代码。

如果您正在使用像webpack这样的模块构建器，并且您无法保证输入的顺序，则可以执行以下操作：

挂载根应用程序后，在文档上广播自定义事件：

const app = new Vue({
    el: '#app',
    mounted() {
        $(document).trigger('vue-loaded');
    }
});

然后将所有jQuery代码包装到自定义事件的事件侦听器中：

$(document).on('vue-loaded', function () {
    const $toggle = $('.js-accordion-toggle');

    $toggle.on('click', function () {
        $(this).toggleClass('test');
    });
});

这在一个大型应用程序中对我有用

Answer 2

也许我不应该将Vue与Jquery一起使用，但我发现jQuery更容易做一个简单的任务，比如在标签之间切换。

从长远来看，尝试整合jQuery和Vue并不容易。尝试着重于Vue.js的数据驱动方面，其余的将自然地落实到位。

因此，对于Vue中的标签示例，您只是根据基础数据变量显示和隐藏内容，该变量是在用户单击标签时设置的：

<template id="tabs">
  <div>
    <a href="#" @click="tab='foo'">Show Foo</a>
    <a href="#" @click="tab='bar'">Show Bar</a>

    <div v-show="tab === 'foo'">This is Foo</div>
    <div v-show="tab === 'bar'">This is Bar</div>
  </div>
</template>

<script type="text/javascript">
  export default {
    data(){
      return{
        tab: 'foo'
      }
    }
  }

这是JSFiddle：https://jsfiddle.net/nst7day3/

当你开始用这些术语思考时，你会发现在99％的情况下jQuery不是必需的（或者更容易）。

Answer 3

事件处理程序丢失了，因为Vue替换了它们绑定到的元素。您可以使用$.holdReady来延迟$(document).ready直到安装组件。

$.holdReady(true)

document.addEventListener("DOMContentLoaded", () => {
  new Vue({
    el: "#app-body",
    mounted() {
      $.holdReady(false)
    }
  })
});

Answer 4

这是因为您的点击事件是在VUE组件之前加载的。您正在初始化非现有hmtl上的click事件。

＆＃13;

$(document).on('click', '.classname', function(){
 //do action
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 5

将Vue安装在元素上时，它将删除该DOM上的所有事件侦听器。如果要添加自定义事件侦听器，则需要在mounted方法中安装Vue之后执行此操作：

new Vue({
  el: '#example',
  mounted() {
    const button = document.querySelector('#example > button');
    button.addEventListener('click', () => {
      // ...
    });
    // You can also use JQuery if you want
  },
});

Vue.js删除了jQuery事件处理程序

5 个答案: