Einführungs-Tutorial zur VUE3-Entwicklung: Verwenden Sie das Vue.js-Plug-in, um die Suchfeldkomponente zu kapseln

Vue.js ist ein beliebtes JavaScript-Framework und VUE3 ist die neueste Version, die eine schnellere Geschwindigkeit und leistungsstärkere Funktionen bietet. In diesem Artikel zeige ich Ihnen, wie Sie eine einfache Suchfeldkomponente mithilfe der Plug-Ins VUE3 und Vue.js kapseln.

1. Erstellen Sie ein Vue-Projekt

Zuerst müssen Sie VUE3 und Vue-cli installieren. Nach der Installation von Vue-cli können Sie den folgenden Befehl eingeben, um ein neues Vue-Projekt zu erstellen:

vue create search-box

Folgen Sie dann den Anweisungen zur Installation.

2. Neues Plugin erstellen

Im Projektordner müssen Sie ein neues Plugin erstellen. Erstellen Sie im Ordner src eine Datei mit dem Namen search-box.js. In dieser Datei definieren Sie die Suchfeldkomponente und das Plugin.

In search-box.js müssen wir zuerst Vue importieren:

import Vue from 'vue'

Dann können wir eine neue Vue-Komponente namens SearchBox definieren:

const SearchBox = Vue.component('SearchBox', {
  template: `
    <div>
      <input type="text" v-model="searchTerm" ref="searchInput" @keyup.enter="performSearch" placeholder="Search...">
      <button @click="performSearch">Search</button>
    </div>
  `,
  data() {
    return {
      searchTerm: ''
    }
  },
  methods: {
    performSearch() {
      this.$emit('search', this.searchTerm)
      this.$refs.searchInput.focus()
      this.searchTerm = ''
    }
  }
})

Im obigen Code haben wir eine einfache Suchfeldkomponente definiert. Die Komponente verfügt über ein Eingabefeld, einen Button und eine Funktion, die die Suche übernehmen kann. Wenn der Benutzer auf die Suchschaltfläche klickt oder die Eingabetaste drückt, wird der searchTerm-Wert über das Emit-Ereignis an die übergeordnete Komponente gesendet.

3. Installieren Sie das Plugin

Wir müssen das Vue-Plugin verwenden, um search-box.js in ein verwendbares Vue-Plugin zu konvertieren. Fügen Sie am Ende der Datei search-box.js den folgenden Code hinzu:

export default {
  install(Vue) {
    Vue.component('SearchBox', SearchBox)
  }
}

Auf diese Weise haben wir ein funktionierendes Vue.js-Plugin erstellt. Wir können dieses Plug-in in Vue-Projekten verwenden.

4. Plugins verwenden

Jetzt müssen wir das Suchfeld-Plugin in unserem Vue-Projekt verwenden. Importieren Sie dazu das Plugin „search-box.js“ in die Datei „main.js“ Ihres Projekts und installieren Sie das Plugin mit der Vue.use-Methode:

import Vue from 'vue'
import SearchBox from './search-box'

Vue.use(SearchBox)

Jetzt haben wir das Plugin „search-box“ installiert. Es kann in Vue-Projekten verwendet werden.

5. SearchBox in Komponenten verwenden

Im Vue-Projekt können wir die Suchfeldkomponente verwenden. Beispielsweise können wir in einer Komponente mit dem Namen App.vue eine Komponente mit dem Namen „search“ hinzufügen:

<template>
  <div>
    <SearchBox @search="doSearch"></SearchBox>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    doSearch(searchTerm) {
      alert(searchTerm)
    }
  }
}
</script>

Im obigen Code haben wir eine Komponente mit dem Namen „search“ und eine Komponente mit dem Namen „doSearch“ zu dieser Methode hinzugefügt. Die Methode wird aufgerufen, wenn der Benutzer eine Suche durchführt, und zeigt ein Warnfeld mit dem Suchbegriff an.

6. Führen Sie das Vue-Projekt aus

Zum Schluss müssen wir nur noch das Vue-Projekt ausführen. Geben Sie im Befehlszeilenterminal den folgenden Befehl ein:

npm run serve

Dadurch wird das Vue-Projekt gestartet. Öffnen Sie http://localhost:8080 in Ihrem Browser, um die Suchfeldkomponente anzuzeigen.

Fazit

In diesem Tutorial haben wir gelernt, wie man eine einfache Suchfeldkomponente mithilfe des Vue.js-Plugins kapselt. Wir haben gelernt, wie man diese Komponente in VUE3-Projekten verwendet, und haben festgestellt, dass VUE3 schneller, leistungsfähiger und benutzerfreundlicher ist. Jetzt können Sie dieses Wissen nutzen, um Ihre eigene Vue.js-Anwendung zu erstellen.

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