javascript - 如何将 vanilla JavaScript 添加到 vue.js 项目？

Question

美好的一天，我是 vue.js 的新手，想要一个默认透明的导航栏，但在滚动时会更改其背景。不幸的是，它不起作用。我尝试了一个 fe 解决方案，但都没有用。所以这段 JavaScript 代码是来自 Stack Overflow 的示例，它在 Fiddle 中运行。如果您需要更多信息和/或代码，请告诉我。

导航.vue

<template>
    <div id="navigation"> 
        <nav class="nav-items"> 
            <router-link class="item" to="/home">Home</router-link>
            <router-link class="item" to="/about">About</router-link>
            <router-link class="item" to="/japan">Japan</router-link>
        </nav> 
    </div>
</template>

<script>
export default {
    name: 'navigation'
}

import scroll from '../assets/js/scroll.js';

</script>

滚动.js

const navbar = document.querySelector('#navigation')

window.addEventListener('scroll', function(e) {
  const lastPosition = window.scrollY
  if (lastPosition > 50 ) {
    navbar.classList.add('colored')
  } else if (navbar.classList.contains('colored')) {
    navbar.classList.remove('colored')
  } else {
    navbar.classList.remove('colored')
  }
})

导航.scss

仅供引用:我在这里删除了不必要的代码。

#navigation {
    background: transparent;

    .colored {
        background: #fff;
        transition: 0.3s;
    }

}

Answer 1

注意:要查看如何在 Vue 组件中导入自定义代码(一般情况)，请向下滚动到最后一个 <hr>。 .

---

Vue 是一个 JavaScript 框架，因此您可以在其中的任何地方插入普通代码，它会运行得很好。

恕我直言，您的问题与导入普通代码无关。这是关于在正确的时间运行它。

你必须在 mounted() 中运行你的代码钩子(Hook)，因为那是#navigation存在于 DOM 中:

Vue.config.devtools = false;
Vue.config.productionTip = false;

Vue.component('navigation', {
  template: '#navigationTemplate',
  mounted() {
    window.addEventListener('scroll',
      () => document.querySelector('#navigation')
      .classList.toggle('colored', window.scrollY > 50)
    )
  }
})

new Vue({
  el: '#app'
});

#app {
  min-height: 200vh;
  background: url("https://picsum.photos/id/237/1024/540") no-repeat center center /cover;
}

#navigation {
  background: transparent;
  position: fixed;
  top: 0;
  padding: 1rem;
  transition: 0.3s;
  width: 100%;
  box-sizing: border-box;
  color: white;
}

#navigation.colored {
  background: rgba(255, 255, 255, .85);
  color: black;
}

body {
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script id="navigationTemplate" type="text/template">
  <div id="navigation">
    <nav class="nav-items">
      <a class="item" to="/home">Home</a>
      <a class="item" to="/about">About</a>
      <a class="item" to="/japan">Japan</a>
    </nav>
  </div>
</script>
<div id="app">
  <navigation />
</div>

---

1. 你的 scroll.js可以安全地写成:

window.addEventListener('scroll',
  () => document.querySelector('#navigation')
  .classList.toggle('colored', window.scrollY > 50)
)

1. 您的 SCSS 似乎不正确:

#navigation {
  .colored {
    declaration
  }
}

将申请declaration到类为 .colored 的任何元素那是 inside 一个带有 id 的元素的 navigation .但是您的代码切换类 colored 在 #navigation .因此，您的 SCSS 应如下所示:

#navigation {
  &.colored {
    declaration
  }
}

可能看起来不多，但是 &使您的代码适用(或不适用)。

1. 您可能想申请 transition至 #navigation ，因为当它有 colored 时它应该适用上课以及不上课。如果您不这样做，返回过渡(从 .colored 到 :not(.colored) )将不会是动画的。

---

作为记录并回答您最初的问题，将自定义代码导入 Vue 组件的正确方法是:

a) 将您的代码导出为函数:
(在 scroll.js 中)

export function menuScroll = function() {
  /* your custom code here */
}

b) 导入它:
(在你的组件中)

import { menuScroll } from 'path/to/scroll'

c) 在你需要的地方运行它:
(即:安装)

export default {
  name: 'navigation',
  mounted() {
    menuScroll();
  }
}

显然，您想根据函数的用途/Angular 色和项目的命名约定重命名该函数。

最后但同样重要的是，如果您的函数需要参数，您可能希望将其用作方法:

export function someName = function(...args) {
  /** do stuff with args **/
}

...并且，在组件中:

import { someName } from 'path/to/it'

export default {
  name: 'whatever',
  methods: {
    someName,
    /* more methods... */
  }
}