如何在 Vuejs 中编写 Jquery 脚本答案

【问题标题】：How to write Jquery script in Vuejs如何在 Vuejs 中编写 Jquery 脚本
【发布时间】：2022-02-07 19:46:04
【问题描述】：

我尝试在 Vueenter image description herejs 中构建导航栏的代码，同时使用 Jquery 和 CSS 脚本滚动更改颜色。这项工作，但部分......当我刷新页面时，Vue js 不支持语法 $。出现错误“$ 未定义”。我是新来的 Vuejs，如果交付中有错误的话，我很抱歉。我希望有一个人可以帮助我。谢谢你:)。

这段代码Vue：

.navbar{
  transition:500ms ease;
  background: transparent;
  font-weight: 600;
} 


.navbar.scrolled {
  background:#fff;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
} 

.nav-link {
  color: white;
}

.nav-link:hover {
  color: lightgray;
}
.nav-link:focus {
  color: lightgray;
}

.navbar-brand.change-black, .nav-link.change-black {
  color:#000;
}

.nav-link.change-black:hover, .nav-link.change-black:focus {
  color:#0d6efd;
}

<template>
    <b-app>
        <b-nav class="navbar navbar-expand-lg pt-12 pb-12 fixed-top fluid"
        data-aos="fade-down" data-aos-duration="700"
        >
            <b-container>
                    <b-col lg="3">
                        <b-nav-item class="navbar-brand" href="#">
                            <span>APR</span>
                        </b-nav-item>
                    </b-col>
                    <b-col lg="8" class="d-flex"> 
                        <b-nav-item class="nav-link" href="#">Home</b-nav-item>
                        <b-nav-item class="nav-link" href="#">Procedure</b-nav-item>
                        <b-nav-item class="nav-link" href="#">About</b-nav-item>
                    </b-col>
                    <b-col lg="1" class="d-flex" right>
                        <b-nav-item-dropdown
                        id="my-nav-dropdown"
                        text="Masuk"
                        toggle-class="nav-link-custom"
                        right
                        >
                            <b-dropdown-item>Lecturer</b-dropdown-item>
                            <b-dropdown-divider></b-dropdown-divider>
                            <b-dropdown-item>Secretary</b-dropdown-item>
                        </b-nav-item-dropdown>
                    </b-col>
            </b-container>
        </b-nav> 
    </b-app>
    
</template>

<script>
export default {
        name: 'CoverLayout',
        data () {
            return {
            }
        },
}

$(window).scroll(function(){
$('.navbar').toggleClass('scrolled', $(this).scrollTop() > 50);
$('.nav-link').toggleClass('change-black', $(this).scrollTop() > 50);
$('.navbar-brand').toggleClass('change-black', $(this).scrollTop() > 50);
$('.back-to-top').toggleClass('active', $(this).scrollTop() > 50);
});

</script>

[工作，如果我不刷新页面 ][刷新页面时出错]

【问题讨论】：

你真的不应该把 jQuery 和 Vue 混在一起。此外，现在是 2022 年：原生 JS 几乎可以做 jQuery 在当时可以做的所有事情，而不需要 polyfill。根据您的代码，使用addEventListener 监听scroll 事件，然后使用Element.classList.toggle()

标签： javascript jquery css vue.js

【解决方案1】：

在使用 Vue 时远离 jQuery。只需坚持使用普通的旧香草 JS。通过使用事件侦听器，它完全能够处理此任务。

类似：

const navBar = document.querySelector(".navbar");
const navLink = document.querySelector(".nav-link");
const navBarBrand = document.querySelector(".navbar-brand");
const backToTop = document.querySelector(".back-to-top");

window.addEventListener('scroll',handleScroll);

function handleScroll(){
      let scrollPosition = window.pageYOffset || window.scrollY || document.body.scrollTop || document.documentElement.scrollTop;

  if(scrollPosition >50) {
    navbar.classList.add("scrolled");
    navLink.classList.add("change-black");
    navBarBrand.classList.add("change-black");
    backToTop.classList.add("active");
 } else {
    // ... 
 }
 
}

【讨论】：