vue怎么調(diào)用外部js

本文小編為大家詳細(xì)介紹“vue怎么調(diào)用外部js”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“vue怎么調(diào)用外部js”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

在Vue應(yīng)用程序中調(diào)用外部JS文件中的方法，我們需要執(zhí)行以下步驟：

步驟1：將外部JS文件引入Vue應(yīng)用程序

在Vue應(yīng)用程序中，我們可以使用script標(biāo)記將外部JS文件引入進(jìn)來。要引入外部JS文件，我們可以在Vue文件的template標(biāo)記中添加script標(biāo)記。例如，我們可以這樣引入一個(gè)名為hello.js的外部JS文件：

<template>
  <div>
    <h2>調(diào)用外部JS文件中的方法</h2>
  </div>
</template>

<script src="./hello.js"></script>

步驟2：定義Vue組件

在Vue應(yīng)用程序中，我們需要定義Vue組件以便能夠在模板中調(diào)用。我們可以在Vue文件中定義Vue組件。例如，下面的代碼定義一個(gè)名為HelloWorld的Vue組件：

<template>
  <div>
    <h2>{{ greeting }}</h2>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      greeting: "Hello, World!",
    };
  },
};
</script>

步驟3：調(diào)用外部JS文件中的方法

一旦我們將外部JS文件引入到Vue應(yīng)用程序中并且定義了Vue組件，我們就可以在Vue組件內(nèi)部調(diào)用外部JS文件中的方法。為了調(diào)用外部JS文件中的方法，我們需要使用Vue實(shí)例的created鉤子函數(shù)。首先，我們需要用ref屬性為Vue組件命名。例如，我們可以將HelloWorld組件命名為hello-world。然后，我們可以在created鉤子函數(shù)中使用$refs屬性來訪問Vue組件。

<template>
  <div>
    <hello-world ref="hello"></hello-world>
  </div>
</template>

<script>
export default {
  name: "App",
  created() {
    this.$nextTick(() => {
      this.$refs.hello.setGreeting("Hello, Vue!");
    });
  },
};
</script>

這里的代碼片段中有幾個(gè)關(guān)鍵點(diǎn)需要注意：

• 首先，我們用ref屬性為HelloWorld組件命名，并在Vue實(shí)例中使用該名稱引用組件。

• 然后，在created鉤子函數(shù)中，我們通過使用$refs屬性來訪問HelloWorld組件。 $refs屬性是一個(gè)對(duì)象，其中包含Vue組件的引用。

• 最后，我們調(diào)用了setGreeting方法，將字符串"Hello, Vue!"作為參數(shù)傳遞給它。我們?cè)趆ello.js文件中定義了setGreeting方法，因此這行代碼將調(diào)用hello.js文件中的setGreeting方法并將參數(shù)傳遞給它。

這里是hello.js文件的內(nèi)容：

function setGreeting(greeting) {
  document.getElementById("greeting").innerText = greeting;
}

module.exports = {
  setGreeting,
};

在hello.js文件中，我們定義了一個(gè)名為setGreeting的方法，并將其導(dǎo)出以供其他JavaScript文件使用。該方法的功能是用傳遞給它的字符串設(shè)置greeting元素的文本內(nèi)容。

讀到這里，這篇“vue怎么調(diào)用外部js”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。