vue怎么調用外部js

本文小編為大家詳細介紹“vue怎么調用外部js”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue怎么調用外部js”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

在Vue應用程序中調用外部JS文件中的方法，我們需要執行以下步驟：

步驟1：將外部JS文件引入Vue應用程序

在Vue應用程序中，我們可以使用script標記將外部JS文件引入進來。要引入外部JS文件，我們可以在Vue文件的template標記中添加script標記。例如，我們可以這樣引入一個名為hello.js的外部JS文件：

<template>
  <div>
    <h2>調用外部JS文件中的方法</h2>
  </div>
</template>

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

步驟2：定義Vue組件

在Vue應用程序中，我們需要定義Vue組件以便能夠在模板中調用。我們可以在Vue文件中定義Vue組件。例如，下面的代碼定義一個名為HelloWorld的Vue組件：

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

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

步驟3：調用外部JS文件中的方法

一旦我們將外部JS文件引入到Vue應用程序中并且定義了Vue組件，我們就可以在Vue組件內部調用外部JS文件中的方法。為了調用外部JS文件中的方法，我們需要使用Vue實例的created鉤子函數。首先，我們需要用ref屬性為Vue組件命名。例如，我們可以將HelloWorld組件命名為hello-world。然后，我們可以在created鉤子函數中使用$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>

這里的代碼片段中有幾個關鍵點需要注意：

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

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

• 最后，我們調用了setGreeting方法，將字符串"Hello, Vue!"作為參數傳遞給它。我們在hello.js文件中定義了setGreeting方法，因此這行代碼將調用hello.js文件中的setGreeting方法并將參數傳遞給它。

這里是hello.js文件的內容：

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

module.exports = {
  setGreeting,
};

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

讀到這里，這篇“vue怎么調用外部js”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。