In diesem Tutorial fahren wir fort eine eigene Todo Liste zu erstellen. Falls npm bzw. NodeJS noch nicht auf dem Computer installiert wurde bzw. noch kein neues Vue JS Projekt mit dem Namen todolist erstellt wurde, bitte zunächst auf der ersten Seite die notwendigen Schritte durcharbeiten.

Zurück auf die erste Seite

 

data und props

Wir haben nun im vorigen Teil unser Projekt erstellt und werden nun die Todo Elemente unserer Todoliste abspeichern. Denn es macht wenig Sinn und Freude, wenn wir nun einfach eine Liste mit ul erstellen würden und diese Liste nicht dynamisch erzeugt werden würde.

 

Vue JS data

Aus genau diesem Grund speichern wir die Todos in einem Array des data Bereichs ab. Dieses data stellt die zentrale Stelle zur speicherung von Daten bereit. Speicherung meint an dieser Stelle jedoch nicht den Umstand, dass zB. beim Schließen des Browserfensters alle Daten inkl. Änderung wieder zur Verfügung stehen. Speichern meint in diesem Kontext lediglich das Ablegen von Daten pro Komponente oder allgemein pro Vue Instanz. Du erinnerst Dich an die erste Seite, wo wir uns bereits mit dem Instanz Begriff beschäftigt haben?

Data wird hierbei als Funktion, welche ein Objekt zurückgibt deklariert. Das heißt, dass die Definition des data Bereichs (oder auch der data-Funktion) wie folgt falsch wäre:


// falsch:
data: {
vorname: 'Andreas',
nachname: 'Pabst'
}

Richtig ist es daher wie folgt:


// richtig
data: function() {
return {
vorname: 'Andreas',
nachname: 'Pabst'
}
}

Und so richtig modern wäre es, wenn wir die Arrow Functions (siehe Vue JS Arrow Functions) hierfür nutzen würden.

// richtig, und zwar richtig modern
data: () => ({
vorname: 'Andreas',
nachname: 'Pabst'
})

 

Vue JS props

Im Vergleich zu data sind unter props ebenfalls Daten zu verorten, jedoch solche, die an diese Vue Instanz oder Komponente übergeben werden könnten. Das heißt also in diesem Fall, dass im Gegensatz zu data, wo wirkliche Daten zB. mit Initialwerten liegen, welche auch verändert werden können, es bei props so ist, dass die Elternkomponente (oder Instanz) jeweils Daten an die Kindkomponente übergibt, und bei der Kindkomponente nur deklariert wird, welche props mit welchen Datentypen etc. übergeben werden könnten.

 

Lernvideo

Wir haben den Sachverhalt props vs. data einmal in einem kostenfreien Lehrvideo auf YouTube bereitgestellt.

Todos als Array in Data

Um nun zurück zu unserem Anwendungsfall zu kommen, einer Todo-Liste, benötigen wir den Blick auf Data. Wir befinden uns zunächst ohne Komponenten in ein und derselben Datei, nämlich der App.vue. Später in diesem Tutorial werden wir auch Komponenten zerlegen.

Betrachten wir

Andreas Pabst Top Speaker – IT Coach – Rhetorik Trainer hat 4,87 von 5 Sternen 70 Bewertungen auf ProvenExpert.com