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

资源中的MY 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

问题在于箭头功能或您期望file.txt在代码中file是什么。

jQuery修复

this

使用Vue和Vanilla js可以很容易地复制它，因此建议使用它而不是JQuery。

undefined

我们可以在VUE.js中使用jQuery吗

1 个答案: