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

下次还敢
リリース: 2024-05-02 22:21:37
オリジナル
809 人が閲覧しました

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

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

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 サイトの他の関連記事を参照してください。

関連ラベル:
vue
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!