Grundlegendes VUE3-Tutorial: Verwenden Sie das Vue.js-Plug-in, um die Etikettenauswahlkomponente zu kapseln

Da die Sprache JavaScript immer beliebter wird, erfreut sich auch die Webentwicklung immer größerer Beliebtheit. In den letzten Jahren sind JS-Frameworks und -Bibliotheken immer beliebter geworden, und eines der beliebtesten Frameworks ist Vue.js. Dieses einfach zu verwendende und dennoch leistungsstarke Framework hat immer mehr Entwickler angezogen und macht die Webentwicklung schneller und effizienter.

In Vue.js sind Komponenten ein wichtiger Bestandteil bei der Entwicklung von Anwendungen. Mit Vue.js können Sie Code komponentenorientiert schreiben und so eine komplexe Anwendung in mehrere kleine Komponenten aufteilen, von denen jede ihre eigenen spezifischen Funktionen und Eigenschaften hat. Dies erleichtert die Wartung und Erweiterung des Codes und verbessert gleichzeitig die Anwendungsleistung und Wiederverwendbarkeit.

In diesem Artikel stellen wir ein weiteres Kernkonzept von Vue.js vor: Plugins. Wir erfahren, wie Sie mit dem Vue.js-Plugin eine Tag-Selektor-Komponente umschließen. Wir werden untersuchen, wie man diese Komponente schreibt, als Plugin verpackt und in einer Vue.js-Anwendung verwendet.

Beginnen Sie mit dem Schreiben von Komponenten

Lassen Sie uns zunächst unsere Komponenten schreiben. Hier erstellen wir eine einfache Tag-Auswahlkomponente, mit der der Benutzer eine Reihe von Tags auswählen kann. Wir werden einige Konzepte im Zusammenhang mit Vue.js verwenden, z. B. Komponenten, Requisiten, Methoden usw. Wenn Sie mit diesen Konzepten nicht vertraut sind, empfiehlt es sich, zunächst die Grundlagen von Vue.js zu erlernen.

Wir werden Vue CLI verwenden, um unsere Vue.js-Anwendung zu erstellen. Führen Sie in der Befehlszeile den folgenden Befehl aus, um eine neue Anwendung zu erstellen:

vue create tag-selector

Als Nächstes erstellen wir eine Komponente namens TagSelector, die ein Eingabefeld und eine Liste mit Optionen enthält. Der Benutzer kann den Tag-Namen über das Eingabefeld eingeben und dann das Tag aus der Optionsliste auswählen.

<template>
  <div class="tag-selector">
    <input type="text" v-model="inputValue" v-on:keydown.enter="addTag()" />
    <div class="tags">
      <span class="tag" v-for="(tag, index) in tags" :key="index">
        {{ tag }}
        <button v-on:click="removeTag(index)">x</button>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "TagSelector",
  data() {
    return {
      tags: [],
      inputValue: ""
    };
  },
  methods: {
    addTag() {
      if (this.inputValue && !this.tags.includes(this.inputValue)) {
        this.tags.push(this.inputValue);
        this.inputValue = "";
      }
    },
    removeTag(index) {
      this.tags.splice(index, 1);
    }
  }
};
</script>

<style>
.tag-selector {
  display: flex;
  flex-direction: column;
  width: 300px;
}

input[type="text"] {
  padding: 5px;
  border: none;
  border-bottom: 1px solid grey;
}

.tags {
  margin-top: 10px;
}

.tag {
  display: inline-block;
  padding: 5px;
  border: 1px solid grey;
  border-radius: 5px;
  margin-right: 5px;
}
</style>

Diese Komponente verfügt über ein Array mit dem Namen „Tags“, in dem die vom Benutzer ausgewählten Tags gespeichert werden. Es gibt auch eine Variable namens inputValue, die verwendet wird, um Eingaben vom Benutzer zu erhalten. Die Methoden „addTag“ und „removeTag“ werden zum Hinzufügen bzw. Entfernen von Tags verwendet.

Als nächstes müssen wir diese Komponente als Plug-In kapseln.

Komponenten als Plugins verpacken

Um unsere Komponenten zu kapseln, müssen wir ein Plugin darin schreiben. Ein Vue.js-Plugin muss ein JavaScript-Objekt sein, das mindestens eine Installationsmethode enthält. Diese Methode wird während der Installation von Vue.js aufgerufen und erhält als erstes Argument eine Vue.js-Instanz. In diesem Fall müssen wir unsere Komponente (TagSelector) in der Installationsmethode registrieren.

Wir müssen außerdem die integrierte Versionsprüfungsfunktion von Vue.js verwenden, um sicherzustellen, dass das Plugin mit der Vue.js-Version kompatibel ist. Schließlich müssen wir das fertige Plug-in in eine separate JavaScript-Datei packen, um es in unserer Vue.js-Anwendung zu verwenden.

Das Folgende ist unser Plug-in-Code:

import TagSelector from "./TagSelector.vue";

const install = function(Vue) {
  Vue.component("tag-selector", TagSelector);
};

export default { install };

// version check
const version = Number(Vue.version.split(".")[0]);

if (version >= 2) {
  // Vue.js v2.x.x
  Vue.use(install);
} else {
  console.error("This plugin only works with Vue.js version 2 or above!");
}

Wir haben die zuvor geschriebene Komponente importiert (./TagSelector.vue) und eine Installationsmethode erstellt, um sie zu registrieren. Wir haben außerdem eine Versionsprüfung durchgeführt, um sicherzustellen, dass das Plugin mit Anwendungen funktioniert, die mit Vue.js v2.0 und höher kompatibel sind. Abschließend exportieren wir das gesamte Plugin-Objekt, damit es in eine separate Datei gepackt werden kann.

Plugins verwenden

Jetzt haben wir unser Plugin geschrieben und in eine separate Datei gepackt. Wir können dies zu unserer Vue.js-Anwendung hinzufügen und es zur Auswahl von Tags verwenden.

Zuerst müssen wir dieses Plugin in unsere Vue.js-Anwendung importieren. Wir können diese Datei aus einem Repository wie npm oder cdn abrufen und sie unserer Anwendung hinzufügen.

import TagSelectorPlugin from "tag-selector-plugin";
import Vue from "vue";

Vue.use(TagSelectorPlugin);

Jetzt haben wir das Plugin in die Anwendung importiert. Um das Plugin zu verwenden, fügen wir einfach den folgenden Code zu unserer Vorlage hinzu:

<tag-selector></tag-selector>

Dadurch wird in unserer Anwendung ein benutzerdefiniertes Element namens Tag-Selektor erstellt und als unsere Tag-Selektor-Komponente angezeigt. Wir können zwischen diesem benutzerdefinierten Element und allen in unserem Plugin definierten Eigenschaften und Methoden interagieren.

Fazit

In diesem Artikel haben wir vorgestellt, wie Sie das Vue.js-Plugin verwenden, um eine einfache Tag-Auswahlkomponente zu kapseln, und wie Sie das Plugin in einer Vue.js-Anwendung verwenden. Das Erlernen des Schreibens von Plugins ist ein sehr wichtiger Teil der Vue.js-Entwicklung, da es Entwicklern ermöglicht, Funktionen und Komponenten einfach zu kapseln und in mehreren Anwendungen zu verwenden. Ich hoffe, dieser Artikel kann Ihnen helfen, Vue.js besser zu nutzen!

Das obige ist der detaillierte Inhalt vonGrundlegendes VUE3-Tutorial: Verwenden Sie das Vue.js-Plug-in, um die Etikettenauswahlkomponente zu kapseln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!