Einführung in die Grundlagen der VUE3-Entwicklung: Implementierung grundlegender Funktionen

In der Frontend-Entwicklung ist VUE zweifellos ein sehr beliebtes Framework. Mit der Veröffentlichung von VUE3 haben immer mehr Entwickler begonnen, diese neue Version von VUE zu erlernen und zu nutzen. In diesem Artikel wird die Verwendung von VUE3 zum Entwickeln einer Front-End-Anwendung vorgestellt und anhand einiger einfacher Beispiele gezeigt, wie einige Grundfunktionen implementiert werden.

1. Bereiten Sie die Umgebung vor

Bevor Sie beginnen, stellen Sie bitte sicher, dass Sie Node.js und npm installiert haben. Anschließend können Sie über die Befehlszeilenschnittstelle den folgenden Befehl eingeben, um VUE CLI zu installieren:

npm install -g @vue/cli

Nachdem die Installation abgeschlossen ist, können Sie mit VUE CLI ein neues Projekt erstellen. Geben Sie den folgenden Befehl in die Befehlszeilenschnittstelle ein:

vue create my-project

wobei „mein-projekt“ der Name Ihres eigenen Projekts ist. Anschließend werden Sie aufgefordert, Konfigurationsoptionen für VUE auszuwählen. Sie können Standardoptionen auswählen oder diese manuell konfigurieren. Nachdem das Projekt erstellt wurde, können Sie VUE3 für Ihre eigene Entwicklung verwenden.

2. Komponenten erstellen

In VUE sind Komponenten ein wichtiges Konzept. Eine typische Komponente besteht aus drei Teilen: Vorlage, Skript und Stil. Vorlage ist der HTML-Inhalt der Komponente, Skript ist der logische Code der Komponente und Stil ist das Stylesheet der Komponente. Als nächstes erstellen wir eine einfache Komponente. Erstellen Sie zunächst eine Datei mit dem Namen „HelloWorld.vue“ im Verzeichnis „src/components“. Fügen Sie der Datei den folgenden Inhalt hinzu:

<template>
  <div>
    <h1>Hello World</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {}
  },
  methods: {},
  computed: {},
  created() {}
}
</script>

<style scoped>
h1 {
  font-size: 24px;
  color: #333;
}
</style>

Hier definieren wir eine Komponente namens „HelloWorld“ und legen ein H1-Tag als Inhalt der Komponente fest. Darüber hinaus definieren wir auch einige andere Optionen, einschließlich Daten, Methoden, berechnet und erstellt.

3. Komponenten verwenden

Nachdem wir die Komponente erstellt haben, müssen wir sie in der Anwendung verwenden. Fügen Sie den folgenden Inhalt in die Datei „src/App.vue“ ein:

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
</style>

Hier haben wir die Komponente „HelloWorld“ in der Komponente referenziert und die Komponente in „components“ registriert. In der Anwendung müssen wir nur das Tag „6854c4afb0434626d6ff80c7da64c5b8“ verwenden, um auf die Komponente zu verweisen. Wenn wir die Anwendung ausführen, wird auf der Seite der Titel „Hello World“ angezeigt.

4. Ereignishandler

In Anwendungen müssen wir normalerweise auf Benutzervorgänge reagieren, z. B. auf das Klicken auf Schaltflächen, die Texteingabe usw. Zu diesem Zeitpunkt müssen wir Ereignishandler verwenden. In VUE können Event-Handler über die „v-on“-Direktive implementiert werden. Als Nächstes erstellen wir eine einfache Schaltflächenkomponente. Wenn der Benutzer auf die Schaltfläche klickt, wird ein Ereignis ausgelöst und ein Popup-Fenster angezeigt.

Erstellen Sie zunächst eine Datei mit dem Namen „Button.vue“ im Verzeichnis „src/components“. Fügen Sie der Datei den folgenden Inhalt hinzu:

<template>
  <button @click="showAlert">Click me!</button>
</template>

<script>
export default {
  name: 'Button',
  methods: {
    showAlert() {
      window.alert('Hello World!')
    }
  },
}
</script>

<style scoped>
button {
  background-color: #333;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
}
</style>

Hier haben wir eine Komponente namens „Button“ erstellt und eine Schaltfläche definiert. Der Befehl „v-on:click“ wird auf der Schaltfläche verwendet, um ein Klickereignis zu binden, und beim Klicken wird eine „showAlert“-Methode aufgerufen, um ein Popup-Fenster anzuzeigen.

Fügen Sie abschließend den folgenden Inhalt in der Datei „src/App.vue“ hinzu:

<template>
  <div id="app">
    <Button />
  </div>
</template>

<script>
import Button from '@/components/Button.vue'

export default {
  components: {
    Button
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
</style>

Hier haben wir auf die Komponente „Button“ in der Anwendung verwiesen. Wenn wir die Anwendung ausführen und auf die Schaltfläche klicken, wird ein Popup-Fenster angezeigt.

5. Berechnete Eigenschaften

In Anwendungen müssen wir manchmal einen neuen Wert basierend auf einem oder mehreren Zuständen berechnen. Zu diesem Zeitpunkt können wir berechnete Eigenschaften verwenden, um dieses Problem zu lösen. In VUE können berechnete Eigenschaften über die Option „computed“ implementiert werden. Als Nächstes erstellen wir eine berechnete Eigenschaft, um das Quadrat einer Zahl zu berechnen.

Erstellen Sie zunächst eine Datei mit dem Namen „Number.vue“ im Verzeichnis „src/components“. Fügen Sie der Datei den folgenden Inhalt hinzu:

<template>
  <div>
    <label>Number: </label>
    <input type="number" v-model="number" />
    <p>Number squared: {{ numberSquared }}</p>
  </div>
</template>

<script>
export default {
  name: 'Number',
  data() {
    return {
      number: 0
    }
  },
  computed: {
    numberSquared() {
      return this.number * this.number
    }
  }
}
</script>

<style scoped>
label {
  font-weight: bold;
  margin-right: 10px;
}
input {
  padding: 5px;
  border-radius: 4px;
  border: 1px solid #ccc;
  width 100px;
  margin-right: 10px;
}
p {
  margin-top: 10px;
}
</style>

Hier haben wir eine Komponente namens „Nummer“ erstellt und ein Eingabefeld zur Eingabe von Zahlen definiert. Wir definieren auch eine berechnete Eigenschaft „numberSquared“, die zur Berechnung des Quadrats einer Zahl verwendet wird. Wenn sich die Zahl ändert, aktualisiert die berechnete Eigenschaft automatisch das Quadrat der Zahl und zeigt es auf der Seite an.

Fügen Sie abschließend den folgenden Inhalt in die Datei „src/App.vue“ ein:

<template>
  <div id="app">
    <Number />
  </div>
</template>

<script>
import Number from '@/components/Number.vue'

export default {
  components: {
    Number
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}
</style>

Hier verweisen wir auf die Komponente „Zahl“ in der Anwendung und zeigen ein Zahleneingabefeld und das Quadratberechnungsergebnis der Zahl an.

Zusammenfassung

In diesem Artikel haben wir vorgestellt, wie man eine Front-End-Anwendung mit VUE3 entwickelt, und gezeigt, wie man Komponenten erstellt, Ereignishandler und berechnete Eigenschaften verwendet usw. Grundlegende Funktionalität. Ich glaube, dass Sie anhand dieser Beispiele bereits über einige grundlegende Kenntnisse und Fähigkeiten verfügen. Natürlich verfügt VUE3 immer noch über viele leistungsstarke Funktionen und Features, die darauf warten, von Entwicklern erkundet zu werden. Ich hoffe, dass Sie VUE3 weiterhin erlernen und nutzen und in der Praxis weiterhin Fortschritte und Innovationen erzielen können.

Das obige ist der detaillierte Inhalt vonEinführung in die Grundlagen der VUE3-Entwicklung: Implementierung grundlegender Funktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!