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

Question

大家好，我是 Vue.js 的新手我的简单问题是我们可以在 VUE.js 中使用 jquery。 因为我的一些 jquery 脚本如 addclasses 或 remove classes 和 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');
    }
  });

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

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