如何將 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 框架，因此您可以在其中的任何位置插入 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)
)

2. 您的 SCSS 似乎不正確：

#navigation {
  .colored {
    declaration
  }
}

將declaration應用於.colored類的任何元素，該元素位於id為navigation的元素內。 但是您的代碼會切換在#navigation上colored的類。 因此，您的 SCSS 應如下所示：

#navigation {
  &.colored {
    declaration
  }
}

可能看起來不多，但&使您的代碼適用（或不適用）。

3. 您可能希望將transition應用到#navigation ，因為它應該在它具有colored類時應用，而當它沒有時應用。 如果你不這樣做，返回過渡（從.colored到:not(.colored) ）將不會被動畫化。

---

為了記錄並回答您最初的問題，將自定義代碼導入 Vue 組件的正確方法是：

a）將您的代碼導出為函數：
（在滾動.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... */
  }
}

Answer 2

就這樣

<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>

來源： 鏈接