Vue.js与jQuery混用

标签： js

---

坑位

最近开发一个需求，项目有用到jQuery和Vue，发现我jQuery绑定的事件全部都失效了。

Why

Vue会重新渲染dom,加上是异步实例Vue.所以正常写程序的话jq的$()获取的元素不是vue渲染后的元素。

解决方案

• 方案1:最彻底的方法是既然用了Vue就全部交给Vue就好了，不再引入jQuery
• 方案2: 既然Vue接管了并重新渲染dom，那我们就等Vue真正渲染重新渲染出dom了再执行我们的jQuery事件绑定,主要代码示例如下：

new Vue({
  el: "testId",
  mounted: function() {
    this.$nextTick(function(){
      // 在这里执行$()的dom事件绑定
      ...
    })
  }
})

方案2注意点：

1. 针对你要通过jQuery绑定事件的元素不要使用v-if去显示隐藏，改用v-show吧;

2. 尽量使用jquery的事件委托机制，这样可以针对后续生成的元素事件也做处理
3. 事件绑定还是尽量通过@click方式来绑定吧;