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

Question

Good Day，我是 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>

scroll.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')
  }
})

navigation.scss

仅供参考：我在这里删除了不必要的代码。

#navigation {
    background: transparent;

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

}

Answer 1

就这样

<template>
   .... your HTML
</template>

<script>
  export default {
    data: () => ({
      ......data of your component
    }),
    mounted() {
      let recaptchaScript = document.createElement('script')
      recaptchaScript.setAttribute('src', 'https://www.google.com/recaptcha/api.js')
      document.head.appendChild(recaptchaScript)
    },
    methods: {
      ......methods of your component
    }
  }
</script>

来源：Link

Answer 2

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

---

Vue 是一个 JavaScript 框架，因此您可以在其中的任何位置插入 vanilla 代码，它会运行得非常好。

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

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

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 类的任何元素，该元素在 具有id 的navigation 的元素。但是您的代码会切换类 colored on #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();
  }
}

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

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

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

...并且，在组件中：

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

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