VueJS - Binding: Ein Anfängerguide

Hallo da, zukünftiger Vue.js-Superstar! Ich freue mich sehr, dein Guide auf dieser aufregenden Reise in die Welt der Vue.js-Bindung zu sein. Als jemand, der seit Jahren Programmierung unterrichtet, kann ich dir sagen, dass Binding wie das Geheimrezept ist, das Vue.js so lecker macht. Also, rollen wir die Ärmel hoch und tauchen ein!

Was ist Binding in Vue.js?

Bevor wir ins Detail gehen, lassen sich klären, was Binding bedeutet. In Vue.js ist Binding die Art und Weise, wie wir unsere Daten mit dem DOM (Document Object Model) verbinden. Es ist so, als ob wir eine magische Verbindung zwischen deinem JavaScript-Code und dem, was auf dem Bildschirm erscheint, herstellen. Cool, oder?

Binding von HTML-Klassen

Stell dir vor, du bereitest dich für eine Party vor. Du könntest verschiedene Outfits basierend auf dem Anlass wählen, oder? Das.Binding von HTML-Klassen in Vue.js funktioniert ähnlich. Wir können das Erscheinungsbild unserer Elemente basierend auf unseren Daten dynamisch ändern.

Grundlegendes Class Binding

Lassen sie uns mit einem einfachen Beispiel beginnen:

<div id="app">
<p :class="{ active: isActive }">Bin ich aktiv?</p>
</div>

<script>
new Vue({
el: '#app',
data: {
isActive: true
}
})
</script>

In diesem Beispiel binden wir die 'active' Klasse an unseren Absatz basierend auf der isActive Daten Eigenschaft. Wenn isActive wahr ist, wird der Absatz die 'active' Klasse haben. Wenn es falsch ist, nicht.

Mehrere Klassen

Was aber, wenn wir mehrere Klassen jonglieren möchten? Kein Problem! Vue.js hat uns abgedeckt:

<div id="app">
<p :class="{ active: isActive, 'text-danger': hasError }">
Mehrfachklasse-Binding
</p>
</div>

<script>
new Vue({
el: '#app',
data: {
isActive: true,
hasError: false
}
})
</script>

Hier binden wir zwei Klassen: 'active' und 'text-danger'. Der Absatz wird die 'active' Klasse haben, aber nicht 'text-danger',除非 wir hasError auf true ändern.

Array-Syntax

Wir können auch eine Liste verwenden, um Klassen zu binden. Es ist, als ob man eine Garderobe voller Klassen zur Auswahl hat:

<div id="app">
<p :class="[activeClass, errorClass]">Array-Syntax ist cool!</p>
</div>

<script>
new Vue({
el: '#app',
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
})
</script>

In diesem Fall werden beide Klassen 'active' und 'text-danger' auf den Absatz angewendet.

Binding von Inline-Stilen

Nun, lassen sie uns über Inline-Stile sprechen. Es ist, als ob man seinen Elementen eine Überarbeitung auf die Schnelle verpasst!

Objekt-Syntax

Wir können Inline-Stile mit einem Objekt binden:

<div id="app">
<p :style="{ color: textColor, fontSize: fontSize + 'px' }">
Styling!
</p>
</div>

<script>
new Vue({
el: '#app',
data: {
textColor: 'rot',
fontSize: 20
}
})
</script>

Dies setzt die Farbe auf rot und die Schriftgröße auf 20px. Beachte, wie wir CamelCase (fontSize) oder KebabCase ('font-size') für die Stil-Eigenschaften verwenden können.

Array-Syntax

Wir können auch ein Array von Stil-Objekten verwenden:

<div id="app">
<p :style="[baseStyles, overridingStyles]">Array von Stilen</p>
</div>

<script>
new Vue({
el: '#app',
data: {
baseStyles: {
color: 'blau',
fontSize: '20px'
},
overridingStyles: {
fontWeight: 'fett'
}
}
})
</script>

Dies ermöglicht es uns, mehrere Stil-Objekte anzuwenden, wobei spätere Objekte im Array frühere überschreiben, falls es zu Konflikten kommt.

Formular-Eingabe-Bindungen

Formular-Eingabe-Bindungen sind, wo Vue.js wirklich glänzt. Es ist, als ob man eine direkte Telefonleitung zwischen seinen Formularfeldern und seinen Daten hat!

Text-Eingabe

Lassen sie uns mit einer einfachen Text-Eingabe beginnen:

<div id="app">
<input v-model="message" placeholder="Bearbeite mich">
<p>Nachricht ist: {{ message }}</p>
</div>

<script>
new Vue({
el: '#app',
data: {
message: ''
}
})
</script>

Die v-model Direktive erstellt eine bidirektionale Bindung zwischen der Eingabe und der message Daten-Eigenschaft. Jegliche Änderungen in der Eingabe werden sofort message aktualisieren, und umgekehrt.

Checkbox

Checkboxen sind wie kleine Ein/Aus-Schalter. Hier ist, wie wir sie binden:

<div id="app">
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
</div>

<script>
new Vue({
el: '#app',
data: {
checked: false
}
})
</script>

Die checked Eigenschaft wird wahr sein, wenn die Checkbox angekreuzt ist, und falsch, wenn nicht.

Radiobuttons

Radiobuttons sind wie Multiple-Choice-Fragen. Nur einer kann gleichzeitig ausgewählt werden:

<div id="app">
<input type="radio" id="one" value="Eins" v-model="picked">
<label for="one">Eins</label>
<br>
<input type="radio" id="two" value="Zwei" v-model="picked">
<label for="two">Zwei</label>
<br>
<span Gewählt: {{ picked }}</span>
</div>

<script>
new Vue({
el: '#app',
data: {
picked: ''
}
})
</script>

Die picked Eigenschaft wird auf den Wert des ausgewählten Radiobuttons gesetzt.

Auswahldropdown

Schließlich schauen wir uns Dropdown-Menüs an:

<div id="app">
<select v-model="selected">
<option disabled value="">Bitte eine Option auswählen</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span Gewählt: {{ selected }}</span>
</div>

<script>
new Vue({
el: '#app',
data: {
selected: ''
}
})
</script>

Die selected Eigenschaft wird auf den Wert der ausgewählten Option gesetzt.

Zusammenfassung der Binding-Methoden

Hier ist eine schnelle Referenztabelle der Binding-Methoden, die wir behandelt haben:

Binding-Typ	Syntax	Beschreibung
Klasse (Objekt)	:class="{ className: bedingung }"	applies class based on condition
Klasse (Array)	:class="[class1, class2]"	applies multiple classes
Stil (Objekt)	:style="{ eigenschaft: wert }"	applies inline styles
Stil (Array)	:style="[styleObject1, styleObject2]"	applies multiple style objects
Formular-Eingabe	v-model="dataProperty"	bidirectional binding for form inputs

Und das war's! Du hast gerade deine ersten Schritte in die wunderbare Welt der Vue.js-Bindung unternommen. Denke daran, Übung macht den Meister, also habe keine Angst, mit diesen Konzepten zu experimentieren. Bereit zum Coden!

Credits: Image by storyset