我们可以在 VUE.js 中使用 jquery答案

【问题标题】：Can we use jquery in VUE.js我们可以在 VUE.js 中使用 jquery
【发布时间】：2021-01-03 16:48:05
【问题描述】：

大家好，我是 Vue.js 的新手我的简单问题是我们可以在 VUE.js 中使用 jquery。因为我的一些 jquery 脚本，比如 addclasses 或删除类和 sidemenu 脚本，所以我把它变成了 jquery，如果可能的话，我想使用它，然后让我知道。

只想在 vue.js 中运行简单的 jquery 函数

我的导航栏组件

 <template>
    <div> 
      <b-navbar class="navbars" toggleable="lg" type="dark" variant="info">
          <router-link to="/"><b-navbar-brand href="/" v-on:click="clickme()">Home</b-navbar-brand></router-link>
        <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
    
        <b-collapse id="nav-collapse" is-nav>
          <b-navbar-nav>
           <router-link to="/contact"><b-nav-item href="/contact">contact</b-nav-item></router-link>
            <b-nav-item href="#" disabled>Disabled</b-nav-item>
          </b-navbar-nav>
    
          <!-- Right aligned nav items -->
          <b-navbar-nav class="ml-auto">
            <b-nav-form>
              <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
              <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
            </b-nav-form>
    
            <b-nav-item-dropdown text="Lang" right>
              <b-dropdown-item href="#">EN</b-dropdown-item>
              <b-dropdown-item href="#">ES</b-dropdown-item>
              <b-dropdown-item href="#">RU</b-dropdown-item>
              <b-dropdown-item href="#">FA</b-dropdown-item>
            </b-nav-item-dropdown>
    
            <b-nav-item-dropdown right>
              <!-- Using 'button-content' slot -->
              <template v-slot:button-content>
                <em>User</em>
              </template>
              <b-dropdown-item href="#">Profile</b-dropdown-item>
              <b-dropdown-item href="#">Sign Out</b-dropdown-item>
            </b-nav-item-dropdown>
          </b-navbar-nav>
        </b-collapse>
      </b-navbar>
    </div>
    </template>

我的主要 .JS 我还有我在这里导入的 script.js 的外部文件

import Vue from vue
import App from ./App
import router from ./router
import { BootstrapVue, IconsPlugin } from bootstrap-vue
import bootstrap/dist/css/bootstrap.css
import bootstrap-vue/dist/bootstrap-vue.css
//import $ from 'jquery


 window.$ = require('jquery')
 window.JQuery = require('jquery')

require('@/assets/style.css')
require('@/assets/script.js')




// Install BootstrapVue
Vue.use(BootstrapVue)
// Optionally install the BootstrapVue icon components plugin
Vue.use(IconsPlugin)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

资产中的我的 script.js 文件

import $ from 'jquery'
$(window).on('scroll', () => {
    if ($(this).scrollTop() > 100) { // Set position from top to add class
      $('.navbars').addClass('header-appear');
    }
    else {
      $('.navbars').removeClass('header-appear');
    }
  });

我没有收到任何错误，但脚本也不起作用

【问题讨论】：

是的，你可以使用 JQuery。
你能举个例子吗？因为我尝试但失败了
@AsadShiekh 添加您尝试过但不起作用的代码，您更有可能获得帮助
确定我会添加我的代码
真的有什么理由要使用 jQuery 吗？您正在编写的逻辑可以很容易地用原生 JS 编写，而无需在另一个框架之上加载框架。此外，VueJS 使用虚拟 DOM，必要时会触发文档树的重新渲染，可能会导致与 jQuery 的互操作性问题。

标签： html jquery css vue.js frontend

【解决方案1】：

问题在于箭头函数或您期望的 this 是代码中的 undefined。

JQuery 修复

import $ from 'jquery'

$(window).on('scroll', function() {
    if ($(this).scrollTop() > 100) { // Set position from top to add class
      $('.navbars').addClass('header-appear');
    }
    else {
      $('.navbars').removeClass('header-appear');
    }
});

这很容易用 Vue 和 vanilla js 复制，所以它会建议这个而不是 JQuery。

<template>
...
<b-navbar :class="{'header-appear': activateClass }" class="navbars" toggleable="lg" type="dark" variant="info">
...
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      activateClass: false,
    };
  },
  created() {
    window.addEventListener('scroll', this.onScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.onScroll);
  },
  methods: {
    onScroll() {
      if (window.scrollY > 150) {
        this.activateClass = true;
      } else {
        this.activateClass = false;
      }
    }
  }
};
</script>

【讨论】：