如何将 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)
)

2. 您的 SCSS 似乎不正确：

#navigation {
  .colored {
    declaration
  }
}

将适用declaration于任何元素与一类.colored是公司内部的一个元素与id的navigation。但是你的代码切换类colored 上 #navigation。因此，您的 SCSS 应如下所示：

#navigation {
  &.colored {
    declaration
  }
}

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

3. 你可能想申请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();
  }
}

显然，您希望根据其目的/角色和项目的命名约定重命名该函数。

最后但并非最不重要的是，如果您的函数需要接受参数，您可能希望将其用作方法：

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

...并且，在组件中：

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

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