vueにjsファイルを導入する方法

Vue.js に外部 JS ファイルを導入するには、<script> タグを使用する 4 つの方法があります。 import ステートメントを使用してモジュラー JS ファイルをインポートします。 Vue.component() メソッドを通じて、JS ファイルを Vue コンポーネントとして登録します。 Vue.mixin() メソッドを使用して、JS ファイル コードを複数の Vue コンポーネントと混合します。

JS ファイルを Vue.js に導入する

Vue.js には、外部 JavaScript ファイルを導入するためのさまざまな方法が用意されています。

1. <script> タグを通じて

Vue テンプレートでは、<script&gt を使用できます。 ; タグは JS ファイルを導入します:

<code class="html"><script src="./my-script.js"></script></code></p>
<p><strong>2. <code>import</code> ステートメントを渡します </strong></p>
<p>モジュール式 JavaScript ファイルの場合は、## を渡すことができます。 # Import<code> ステートメント: </code></p>
<pre class="brush:php;toolbar:false"><code class="js">import myModule from './my-module.js'</code>

3。JavaScript ファイルを使用する必要がある場合は、Vue.component() メソッドを使用します。 Vue コンポーネントとして登録するには、Vue.component() メソッド:

<code class="js">Vue.component('my-component', {
  // ... 组件配置
  template: '<div></div>',
  // ... 组件方法
  created() {
    // 组件创建时执行
    this.fetchData()
  },
  methods: {
    fetchData() {
      // ... 从 JavaScript 文件中获取数据
    }
  }
})</code>

4 メソッドを使用します。

JavaScript ファイル内のコードを複数の Vue コンポーネントと混合する必要がある場合は、Vue.mixin() メソッドを使用できます:

<code class="js">const myMixin = {
  data() {
    return {
      // ... 混合数据
    }
  },
  methods: {
    // ... 混合方法
  }
}

Vue.mixin(myMixin)</code>

Whenこれらの方法を使用して JS ファイルを導入する場合は、次の点に注意する必要があります。

JS ファイルへのパスが正しいことを確認してください。

モジュール式 JavaScript を使用する場合は、Babel または webpack が正しく構成されていることを確認する必要があります。

状況に応じて最適な導入方法を選択してください。

以上がvueにjsファイルを導入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。