VUE3-Schnellstart: Verwenden Sie das Vue.js-Plug-in, um Popup-Komponenten zu erstellen

Vue.js ist ein beliebtes JavaScript-Framework, das eine komponentenbasierte Möglichkeit zum Erstellen von Benutzeroberflächen bietet. Die neueste Vue.js-Version 3 ist nicht nur in der Leistung optimiert, sondern fügt auch einige neue Funktionen hinzu. In diesem Artikel stellen wir Ihnen kurz vor, wie Sie Vue.js 3 und Plugins zum Erstellen von Popup-Komponenten verwenden.

1. Erstellen Sie eine Vue.js 3-Anwendung

Bevor Sie beginnen, müssen Sie Node.js und Vue CLI installieren. Sie können diese Tools mit npm installieren:

npm install -g @vue/cli

Als nächstes erstellen Sie eine neue Vue.js 3-Anwendung mit der Vue-CLI:

vue create my-app
cd my-app
npm run serve

Dadurch wird eine neue Anwendung namens „my-app“ erstellt und der Entwicklungsserver gestartet.

2. Installieren Sie das Vue.js-Plug-in

Um die Popup-Komponente zu erstellen, verwenden wir ein Plug-in namens Vue.js Modal. Um das Plugin zu installieren, führen Sie den folgenden Befehl aus:

npm install vue-js-modal

Öffnen Sie die Datei src/main.js und fügen Sie den folgenden Inhalt hinzu:

import Vue from 'vue'
import App from './App.vue'
import VModal from 'vue-js-modal'

Vue.config.productionTip = false

Vue.use(VModal)

new Vue({
  render: h => h(App),
}).$mount('#app')

Zuerst haben wir die Vue- und App-Komponenten importiert. Als nächstes haben wir das Vue.js Modal-Plugin importiert und Vue.use(VModal) ausgeführt, um es als Erweiterung der Vue.js-Anwendung zu verwenden.

3. Erstellen Sie eine Popup-Komponente

Jetzt können wir mit der Erstellung unserer eigenen Popup-Komponente beginnen. In diesem Fall erstellen wir ein einfaches Anmeldeformular für den Fall, dass der Benutzer versucht, eine Aktion auszuführen, die eine Anmeldung erfordert.

Zuerst müssen wir eine neue Vue.js-Komponente erstellen. Erstellen Sie eine neue Datei mit dem Namen LoginModal.vue und kopieren Sie den folgenden Code hinein:

<template>
  <div id="login-modal">
    <h1>Login</h1>
    <form>
      <div>
        <label for="username">Username:</label>
        <input type="text" id="username" v-model="username" required>
      </div>
      <div>
        <label for="password">Password:</label>
        <input type="password" id="password" v-model="password" required>
      </div>
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      // Your login logic goes here
      this.$emit('close')
    }
  }
}
</script>

Diese Komponente enthält ein Formular, in das der Benutzer seinen Benutzernamen und sein Passwort eingeben kann. Wenn das Formular abgeschickt wird, rufen wir eine Anmeldemethode auf, die Ihre Anmeldelogik enthält. In diesem Beispiel verwenden wir einfach eine Platzhaltermethode und geben darin ein Schließereignis aus, um das Popup-Fenster zu schließen.

Jetzt verwenden wir diese LoginModal-Komponente in einer anderen Komponente, um ein Popup-Fenster zu erstellen.

4. Verwenden Sie die Popup-Komponente

, um die App.vue-Datei zu öffnen und den folgenden Inhalt an einer beliebigen Stelle im Vorlagen-Tag hinzuzufügen:

<modal name="login-modal">
  <login-modal @close="$modal.hide('login-modal')"></login-modal>
</modal>
<button @click="$modal.show('login-modal')">Show Login Modal</button>

Dieser Code verwendet die vom Vue.js Modal Plug-in bereitgestellten Komponenten und Anweisungen . Zuerst definieren wir ein modales Fenster mit dem Namen mithilfe der Name-Eigenschaft. Dieses modale Fenster enthält die gerade erstellte LoginModal-Komponente. Anschließend wird der Seite eine Schaltfläche hinzugefügt und beim Klicken wird das modale Fenster angezeigt.

Um das modale Fenster zu schließen, müssen wir ein Schließereignis in der LoginModal-Komponente ausgeben. Mithilfe der Methode $modal.hide('login-modal') können wir sie in der übergeordneten Komponente anhören und das modale Fenster schließen.

5. Fazit

In diesem Artikel haben wir gelernt, wie man Vue.js 3 und Plug-Ins zum Erstellen von Popup-Komponenten verwendet. Das Modal-Plugin von Vue.js bietet uns die Möglichkeit, modale Fenster direkt zu erstellen, und wir müssen nur einfache Vue.js-Komponenten verwenden. Auf diese Weise können wir schnell und einfach komplexe Benutzeroberflächen erstellen, die es Benutzern ermöglichen, mit interaktiven Webanwendungen zu interagieren.

Das obige ist der detaillierte Inhalt vonVUE3-Schnellstart: Verwenden Sie das Vue.js-Plug-in, um Popup-Komponenten zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!