Aus dem Kurs: Vue.js Grundkurs

Grundlagen und Textfelder – Tutorial zu Vue.js

Aus dem Kurs: Vue.js Grundkurs

Gratismonat starten Für Ihr Team erwerben

Grundlagen und Textfelder

“

Wenn Sie mit Vue mit Formularen arbeiten, werden Sie immer auch v-model nutzen. Dadurch ist ein Two-Way-Binding möglich. Wenn ich ein input-Element habe, wo ich v-model="message" definiere, unten in meinem script-Bereich ist message als reaktiv gekennzeichnet und ich lasse oben message ausgeben, dann ändert sich das, je nachdem, was oben eingetragen wird. Also, wenn ich jetzt hier schreibe "Hallo Vue!", dann erscheint das entsprechend hier unten und das ist eben dieses Two-Way-Binding. Allgemein synchronisiert v-model input-Elemente mit zugehörigem JavaScript-State. Man spricht von Two-Way-Binding. Und was genau geschieht im Hintergrund, ist je nach Formularfeld unterschiedlich. D.h., es gibt Unterschiede, welche Eigenschaften und welche Events eigentlich verwendet werden. Bei einem "input type=text" sowie auch bei textarea wird das Attribut value verwendet und aktuell gehalten. Und man reagiert auf das input-Event. Bei Checkboxen oder Radio-Buttons ist das Attribut checked, was dann mit Two-Way-Binding gebunden ist. Und man reagiert auf das change-Event. Und bei select ist es das value-Attribut und ebenfalls das change-Event. Schauen wir uns noch eine Besonderheit an. Was passiert, wenn ich direkt hier mit value arbeite? Ich schreibe mir hier "Hallo aus HTML" in dieses value-Attribut rein und im Vue-Teil hier schreibe ich "Hallo aus Vue". Und in diesem Fall setzt sich immer das durch und das wird ignoriert. Wenn wir uns das ansehen, eben der Text "Hallo aus Vue", d.h., der ursprüngliche Wert, den ich per HTML gesetzt habe, der wird nicht genommen, sondern es wird der Wert genommen, der in Vue definiert ist. Das waren jetzt ein paar Beispiele für die Verwendung von v-model. Wir werden uns im Folgenden noch weitere Formularelemente ansehen und uns auch ansehen, welche Besonderheiten es dabei gibt, wenn man diese mit Vue bearbeitet.

Inhalt