vue は外部メソッドを使用します

はじめに

Vue.js 開発では、通常、外部メソッドの使用方法という問題に遭遇します。この記事では、Vue.js を外部メソッドと対話させてコードの開発と保守を改善する方法を紹介します。

前提知識

この記事を読む前に、次の知識を知っておく必要があります:

• Vue.js の基本的な知識と使い方
• JavaScript基礎知識と使い方
• 外部メソッドの紹介と使い方

1. 外部メソッドの紹介

Vue.js での外部メソッドの紹介方法は次のとおりです。 JavaScript で外部メソッドを導入するのと同じです。

プロジェクトのルート ディレクトリの src/utils/ ディレクトリに utils.js という名前のファイルがあるとします。このファイルには add という名前のメソッドがあり、2 つの数値を加算して結果を返します。 Vue.js では、このメソッドを次のように導入できます。

import { add } from '@/utils/utils.js';

上記のコードでは、ES6 インポート構文を使用して、utils.js ファイルに add メソッドをインポートします。ここでの @ は src ディレクトリを表します。 utils.js ファイルのパスが異なる場合は、それに応じて変更する必要があります。

2. Vue.js での外部メソッドの使用

外部メソッドを導入した後、それを Vue.js コンポーネントで呼び出すことができます。

以下は例です。 MyComponent という Vue.js コンポーネントがあり、2 つの数値の合計を表示し、add メソッドを使用して計算します。

<template>
  <div>{{ sum }}</div>
</template>

<script>
  import { add } from '@/utils/utils.js';

  export default {
    data() {
      return {
        num1: 3,
        num2: 5,
      }
    },
    computed: {
      sum() {
        return add(this.num1, this.num2);
      }
    }
  }
</script>

上記のコードでは、add メソッドをインポートし、それを合計計算属性で使用して num1 と num2 の合計を取得し、ページに表示しました。 utils.js の add メソッドがエラーを返した場合、try-catch ステートメントを使用してエラーをキャッチし、表示できます。

3. Vue.js コンポーネントでの外部ライブラリの使用

Vue.js 開発では、通常、いくつかの外部 JavaScript ライブラリを使用して Vue.js の機能を拡張する必要があります。これらのライブラリを Vue.js コンポーネントで使用したい場合は、コンポーネントにこれらのライブラリを導入する必要があります。

以下は、moment.js ライブラリを使用した例です。 moment.js は、コンポーネントで日付の書式設定や計算に使用できる強力な JavaScript 日付ライブラリです。

まず、NPM を使用して moment.js ライブラリをインストールする必要があります:

npm install moment --save

次に、moment.js ライブラリを Vue.js コンポーネントに導入します:

import moment from 'moment';

最後に、「コンポーネントで moment.js ライブラリを使用する」で:

<template>
  <div>{{ formattedDate }}</div>
</template>

<script>
  import moment from 'moment';

  export default {
    data() {
      return {
        date: new Date(),
      }
    },
    computed: {
      formattedDate() {
        return moment(this.date).format('YYYY-MM-DD');
      }
    }
  }
</script>

上記のコードでは、moment.js ライブラリをインポートして moment 変数に割り当て、formattedDate 計算プロパティで moment ライブラリを使用します。日付の書式を設定すると、ページに表示されます。

結論

Vue.js 開発では、外部メソッドやライブラリを導入して使用することが非常に一般的な状況です。この記事では、Vue.js に外部メソッドとライブラリを導入して使用する方法について説明します。 Vue.js コンポーネントで外部メソッドとライブラリを使用する場合は、それらをコンポーネントにインポートする必要があることに注意してください。ご質問やご意見がございましたら、コメント欄に残してください。

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