vue は外部 js のメソッドを呼び出します

Vue は、Web アプリケーションの開発で広く使用されている非常に人気のある JavaScript フレームワークです。 Vue フレームワークは、Web アプリケーションの開発プロセスを非常にシンプルにする便利な機能を多数提供します。ただし、Vue フレームワークを使用してアプリケーションを開発するプロセスでは、外部 JS ファイルのメソッドを呼び出す必要がある場合があります。この記事では、Vue アプリケーションで外部 JS ファイルのメソッドを呼び出す方法について説明します。

Vue アプリケーションで外部 JS ファイルのメソッドを呼び出すには、次の手順を実行する必要があります。

ステップ 1: 外部 JS ファイルを Vue アプリケーションに導入する

Vue Inアプリケーションでは、スクリプト タグを使用して外部 JS ファイルを導入できます。外部 JS ファイルを導入するには、Vue ファイルのテンプレート タグにスクリプト タグを追加します。たとえば、hello.js という名前の外部 JS ファイルを次のように導入できます。

<template>
  <div>
    <h1>调用外部JS文件中的方法</h1>
  </div>
</template>

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

ステップ 2: Vue コンポーネントを定義する

Vue アプリケーションでは、次のように Vue コンポーネントを定義する必要があります。テンプレート内で呼び出すことができます。 Vue ファイルで Vue コンポーネントを定義できます。たとえば、次のコードは HelloWorld という名前の Vue コンポーネントを定義します。

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

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

ステップ 3: 外部 JS ファイルのメソッドを呼び出す

外部 JS ファイルを Vue アプリケーションに導入し、定義した後Vue コンポーネントを使用すると、Vue コンポーネント内の外部 JS ファイルのメソッドを呼び出すことができます。外部 JS ファイルのメソッドを呼び出すには、Vue インスタンスの作成されたフック関数を使用する必要があります。まず、ref 属性を使用して Vue コンポーネントに名前を付ける必要があります。たとえば、HelloWorld コンポーネントに hello-world という名前を付けることができます。次に、作成されたフック関数の $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>

ここのコード スニペットには注意すべき重要なポイントがいくつかあります。

• まず、HelloWorld コンポーネントに ref 属性を付け、その名前を使用してコンポーネントを参照します。 Vue インスタンス 。
• 次に、作成したフック関数で、$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 ファイル使用のためにエクスポートします。このメソッドの機能は、渡された文字列を使用して挨拶要素のテキスト コンテンツを設定することです。

この記事では、Vue アプリケーションで外部 JS ファイルのメソッドを呼び出す方法を学びました。外部 JS ファイルをインポートして Vue コンポーネントを定義する方法を学び、Vue コンポーネント内の $refs 属性を使用して外部 JS ファイルのメソッドにアクセスする方法を示しました。これらのヒントは、Vue フレームワークをより簡単に使用し、Web アプリケーション開発にさらなる柔軟性をもたらすのに役立ちます。

以上がvue は外部 js のメソッドを呼び出しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。