Deutsch

VueJS Tutorial

VueJS - Instanzen

Hallo dort, angehende Web-Entwickler! Heute tauchen wir ein in die wunderbare Welt der Vue.js-Instanzen. Machen Sie sich keine Sorgen, wenn Sie neu im Programmieren sind – ich werde Sie Schritt für Schritt führen, genau wie ich es in den letzten Jahren mit unzähligen Schülern getan habe. Holen Sie sich eine Tasse Kaffee (oder Tee, wenn das mehr Ihr Ding ist) und lassen Sie uns loslegen!

VueJS - Instances

Was ist eine Vue-Instanz?

Bevor wir uns dem Code zuwenden, lassen Sie uns verstehen, was eine Vue-Instanz ist. Stellen Sie sich vor, Sie bauen ein Haus. Die Vue-Instanz ist wie das Fundament dieses Hauses – es ist der Ausgangspunkt, von dem alles beginnt. Es ist der Kern, der Ihre gesamte Vue-Anwendung kontrolliert.

Syntax

Das Erstellen einer Vue-Instanz ist ziemlich einfach. Hier ist die grundlegende Syntax:

new Vue({
// Optionen
})

So einfach ist das! Wir verwenden das Schlüsselwort new gefolgt von Vue(), und innerhalb der Klammern übergeben wir ein Objekt mit verschiedenen Optionen. Diese Optionen sind wie die Baupläne für unser Haus – sie sagen Vue, wie wir unsere Anwendung verhalten möchten.

Deine erste Vue-Instanz

Lassen Sie uns gemeinsam unsere erste Vue-Instanz erstellen. Machen Sie sich keine Sorgen, wenn Sie nicht alles sofort verstehen – wir werden alles Schritt für Schritt auseinandernehmen.

Beispiel 1

<!DOCTYPE html>
<html>
<head>
<title>Mein erstes Vue-App</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ nachricht }}
</div>

<script>
var app = new Vue({
el: '#app',
data: {
nachricht: 'Hallo, Vue!'
}
})
</script>
</body>
</html>

Ausgabe

Hallo, Vue!

Lassen Sie uns das auseinandernehmen:

  1. Wir включаем библиотеку Vue.js в наш HTML-файл.
  2. Wir erstellen ein <div> mit der ID "app". Hier wird unsere Vue-Anwendung leben.
  3. Innerhalb des <div> verwenden wir {{ nachricht }}. Das nennt man Interpolation – so zeigen wir Daten in Vue an.
  4. In unserem <script>-Tag erstellen wir eine neue Vue-Instanz.
  5. Wir verwenden el: '#app', um Vue zu sagen, welches Element es kontrollieren soll (unser Div mit der ID "app").
  6. Im data-Objekt definieren wir eine Eigenschaft nachricht mit dem Wert 'Hallo, Vue!'.

Wenn Vue {{ nachricht }} in unserem HTML sieht, ersetzt es es mit dem Wert der nachricht aus unseren Daten. Magisch, oder?

Daten und Methoden

Vue-Instanzen können mehr als nur Daten haben. Sie können auch Methoden haben – Funktionen, die Aktionen oder Berechnungen ausführen können.

Beispiel 2

<!DOCTYPE html>
<html>
<head>
<title>Vue Methoden Beispiel</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ nachricht }}</p>
<button v-on:click="reverseMessage">Nachricht umkehren</button>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
nachricht: 'Hallo, Vue!'
},
methods: {
reverseMessage: function() {
this.nachricht = this.nachricht.split('').reverse().join('')
}
}
})
</script>
</body>
</html>

Ausgabe

Initially, you'll see "Hello, Vue!" and a button. When you click the button, the message will reverse to "!euV ,olleH".

In diesem Beispiel:

  1. Wir haben eine Schaltfläche hinzugefügt mit v-on:click="reverseMessage". Dies sagt Vue, die reverseMessage-Methode aufzurufen, wenn die Schaltfläche geklickt wird.
  2. In unserer Vue-Instanz haben wir ein methods-Objekt mit einer reverseMessage-Funktion hinzugefügt.
  3. Die Funktion teilt die Nachricht in ein Array von Zeichen auf, kehrt es um und verbindet es wieder zu einer Zeichenkette.
  4. Wir verwenden this.nachricht, um die nachricht-Daten Eigenschaft zugreifen und zu ändern.

Lebenszyklus-Hooks

Vue-Instanzen haben einen Lebenszyklus – sie werden erstellt, in das DOM eingebettet, aktualisiert und schließlich zerstört. Vue bietet Hooks, die es Ihnen ermöglichen, an bestimmten Phasen dieses Lebenszyklus Codes auszuführen.

Beispiel

<!DOCTYPE html>
<html>
<head>
<title>Vue Lebenszyklus Hooks</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ nachricht }}</p>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
nachricht: 'Hallo, Vue!'
},
created: function() {
console.log('Vue-Instanz erstellt!')
},
mounted: function() {
console.log('Vue-Instanz in das DOM eingebettet!')
this.nachricht = 'Willkommen bei Vue!'
}
})
</script>
</body>
</html>

Ausgabe

In dem Browser werden Sie "Willkommen bei Vue!" sehen. In der Konsole werden Sie zwei Nachrichten sehen:

Vue instance created!
Vue instance mounted to the DOM!

Hier ist, was passiert:

  1. Der created-Hook wird aufgerufen, wenn die Vue-Instanz erstellt wird. Wir loggen eine Nachricht in die Konsole.
  2. Der mounted-Hook wird aufgerufen, wenn die Vue-Instanz in das DOM eingebettet wird. Wir loggen eine andere Nachricht und ändern die nachricht-Daten Eigenschaft.

Diese Hooks sind unglaublich nützlich, um an bestimmten Punkten im Lebenszyklus Ihrer Anwendung Codes auszuführen.

Vue-Instanz Eigenschaften und Methoden

Vue-Instanzen haben auch integrierte Eigenschaften und Methoden. Lassen Sie uns einige anschauen:

Beispiel

<!DOCTYPE html>
<html>
<head>
<title>Vue-Instanz Eigenschaften und Methoden</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ nachricht }}</p>
<button v-on:click="updateMessage">Nachricht aktualisieren</button>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
nachricht: 'Hallo, Vue!'
},
methods: {
updateMessage: function() {
this.$data.nachricht = 'Nachricht aktualisiert!'
console.log(this.$el)
this.$nextTick(function() {
console.log('DOM aktualisiert!')
})
}
}
})

console.log(app.$data)
</script>
</body>
</html>

In diesem Beispiel:

  1. Wir verwenden this.$data, um das Datenobjekt direkt zugreifen.
  2. Wir verwenden this.$el, um das Wurzelelement der Vue-Instanz zu protokollieren.
  3. Wir verwenden this.$nextTick, um eine Funktion nach dem nächsten DOM-Updatezyklus auszuführen.
  4. Außenhalb der Vue-Instanz können wir auf ihre Eigenschaften mit app.$data zugreifen.

Hier ist eine Tabelle mit einigen commonly verwendeten Vue-Instanz Eigenschaften und Methoden:

Eigenschaft/Methode Beschreibung
$data Das Datenobjekt, das die Vue-Instanz beobachtet
$el Das Element, das die Vue-Instanz verwaltet
$watch Beobachtet eine Eigenschaft der Vue-Instanz auf Änderungen
$set Setzt eine Eigenschaft auf einem Objekt und löst Ansichten aktualisieren aus
$nextTick Definiert eine Callback-Funktion, die nach dem nächsten DOM-Updatezyklus ausgeführt wird

Denken Sie daran, dass dies nur einige Beispiele sind. Vue.js hat viele mehr Funktionen und Fähigkeiten, die wir in zukünftigen Lektionen erkunden werden.

Ich hoffe, diese Einführung in Vue-Instanzen hat Ihnen geholfen! Erinnern Sie sich daran, dass das Lernen von Code wie das Lernen einer neuen Sprache ist – es erfordert Zeit und Übung. Lassen Sie sich nicht entmutigen, wenn Sie nicht alles sofort verstehen. Halten Sie experimentieren, codieren und vor allem Spaß haben! Bis zur nächsten Lektion!

Credits: Image by storyset

Vorheriges Tutorial:
VueJS - Einführung
Nächstes Tutorial:
VueJS - Vorlage