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

Question

Hello guys i am a newbie to Vue.js My simple question is that can we use jquery in VUE.js. because some of my jquery script like addclasses or remove classes and sidemenu script i made that into jquery and want to use that if it is possible then let me know.

just want to run simple jquery function into vue.js

My Navbar Components

 <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>

MY MAIN .JS I have also external file of script.js which I imported here

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/>'
})

MY script.js file which is in assets

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');
    }
  });

I Don't get any error but script is also not working

Answer 1

The issue with is the arrow function or what you expect this to be which is undefined in your code.

JQuery Fix

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');
    }
});

This is pretty easy to replicate with Vue and vanilla js so it would suggest this rather than 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>