vue verwendet externe Methoden

Vorwort

Bei der Entwicklung von Vue.js stoßen wir normalerweise auf ein Problem: wie man externe Methoden verwendet. In diesem Artikel erfahren Sie, wie Sie Vue.js mit externen Methoden interagieren lassen, um Code besser zu entwickeln und zu warten.

Vorausgesetzte Kenntnisse

Bevor Sie diesen Artikel lesen, müssen Sie über die folgenden Kenntnisse verfügen:

• Grundkenntnisse und Verwendung von Vue.js # 🎜🎜#
JavaScript-Grundkenntnisse und -Nutzung
• Einführung und Verwendung externer Methoden

Einführung externer Methoden#🎜🎜 #
1. Die Einführung externer Methoden in Vue.js ist dasselbe wie die Einführung externer Methoden in JavaScript.

Angenommen, wir haben eine Datei namens utils.js, die sich im Verzeichnis src/utils/ unter dem Projektstammverzeichnis befindet. In dieser Datei gibt es eine Methode namens add, die zwei Zahlen addiert und das Ergebnis zurückgibt. In Vue.js können wir diese Methode wie folgt einführen:

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

Im obigen Code verwenden wir die ES6-Importsyntax, um die Add-Methode in die Datei utils.js zu importieren. Das @ stellt hier das src-Verzeichnis dar. Wenn Ihr utils.js-Dateipfad anders ist, sollten Sie ihn entsprechend ändern.

Verwenden externer Methoden in Vue.js

2. Nachdem wir die externe Methode eingeführt haben, können wir sie in der Vue.js-Komponente aufrufen.

Hier ist ein Beispiel. Wir haben eine Vue.js-Komponente namens MyComponent, die die Summe zweier Zahlen anzeigt und die Add-Methode verwendet, um sie zu berechnen.

<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>

Im obigen Code haben wir die Add-Methode importiert und sie dann im Attribut „Summe berechnet“ verwendet, um die Summe von Num1 und Num2 abzurufen und auf der Seite anzuzeigen. Wenn die Add-Methode von utils.js einen Fehler zurückgibt, können wir Try-Catch-Anweisungen verwenden, um die Fehler abzufangen und anzuzeigen.

Verwendung externer Bibliotheken in Vue.js-Komponenten

3. In der Vue.js-Entwicklung müssen wir normalerweise einige externe JavaScript-Bibliotheken verwenden, um die zu erweitern Funktionalität von Vue.js. Wenn wir diese Bibliotheken in Vue.js-Komponenten verwenden möchten, müssen wir sie in die Komponente einführen.

Das Folgende ist ein Beispiel für die Verwendung der Bibliothek moment.js. moment.js ist eine leistungsstarke JavaScript-Datumsbibliothek, die wir in Komponenten zum Formatieren und Berechnen von Datumsangaben verwenden können.

Zuerst müssen wir NPM verwenden, um die moment.js-Bibliothek zu installieren:

npm install moment --save

Als nächstes führen wir die moment.js-Bibliothek in die Vue.js-Komponente ein: #🎜🎜 #

import moment from 'moment';

# 🎜🎜#Schließlich verwenden wir die Bibliothek moment.js in der Komponente:

<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>

Im obigen Code importieren wir die Bibliothek moment.js, weisen sie der Variable moment zu und verwenden sie dann Moment in der Bibliothek der berechneten Eigenschaft formattedDate, um Datumsangaben zu formatieren und auf der Seite anzuzeigen.

Fazit

Bei der Entwicklung von Vue.js ist die Einführung und Verwendung externer Methoden und Bibliotheken eine sehr häufige Situation. In diesem Artikel wird erläutert, wie Sie externe Methoden und Bibliotheken in Vue.js einführen und verwenden. Denken Sie daran, wenn Sie externe Methoden und Bibliotheken in Vue.js-Komponenten verwenden, müssen Sie daran denken, diese in die Komponente zu importieren. Wenn Sie Fragen oder Kommentare haben, hinterlassen Sie diese bitte im Kommentarbereich.

Das obige ist der detaillierte Inhalt vonvue verwendet externe Methoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!