Vue.js ermöglicht es auf unterschiedlichste Arten Daten über Komponenten auszugeben. Je nachdem welchem Zweck eine Komponente dient, müssen Daten auf verschiedene Weisen über die Komponenten ausgegeben bzw. an die Komponenten übergeben werden.
Ausgabe der Daten über den <slot> tag
Der <slot>-Tag ist ein Platzhalter in einem Komponenten-Template. Dieser ermöglicht es innerhalb eines Templates bestehende Inhalte, die innerhalb eines Komponenten Tags stehen, auszugeben.
// ./scr/Components/Message.ts
@Component({
name:”message”,
template: "<p><slot>Ich bin ein Platzhalter text eines Slots</slot></p>"
})
// ./index.html code
<message>
<span>Ich werde anstatt des Slot Textes ausgegeben</span>
</message>Die finale Ausgabe im HTML ist wie folgt:
// ./index.html <p> <span>Ich werde anstatt des Slot Textes ausgegeben</span> </p>
Der <p> Tag stammt von dem Komponenten-Template, der <span> Tag inkl. Text wird statt dem <slot> Tag gerendert. Wäre im <message> Tag kein Inhalt angegeben, dann wäre der Platzhaltertext, welcher zwischen dem <slot> Tags steht, gerendert worden.
Bei Inhalten die initial serverseitig gerendert werden, ist die Verwendung von <slot> Tags besonders praktisch.
Ausgabe von Daten über die data() Methode
Die data() Methode kann verwendet werden, um über den Mustache Syntax Daten in der .html Datei auszugeben. Wichtig in diesem Zusammenhang ist, dass Properties, die über die data() Methode definiert werden, auf alle Komponenten angewendet werden. Ist dies nicht der Wunsch, muss eine klassische Property (über @Prop()) verwendet werden (nähere Informationen dazu folgen).
Properties der data() Methode können direkt in der Komponenten-Klasse erstellt werden. Dazu wird die Methode data() definiert, welche ein Objekt zurückgibt, worin die Property definiert und initialisiert wird.
// ./scr/Components/Message.ts
data() {
return{
myMessage: "Ich bin eine Vue Komponent"
}
}Die Ausgabe der myMessage Property erfolgt im Template der Komponente mittels des Mustache Syntax. In diesem Fall wird das Template der Komponente über den @Component Decorator übergeben:
// ./scr/Components/Message.ts
@Component({
...
template: "<p><span>{{myMessage}}</span></p>";
}))Achtung: Sofern myMessage bereits als property (über @Prop()) verwendet wird, kann die Property der data() Methode nicht mehr in der .html Datei ausgegeben werden. Dies würde zu folgender Fehlermeldung führen:
Error The data property „myMessage“ is already declared as a prop. Use prop default value instead.
Verwende für ein und dieselbe Property entweder die data() Methode zur Ausgabe oder den @Prop() Decorator.
Ausgabe von Daten über den @Prop() Decorator
Damit Daten über den @Prop() Decorator definiert werden können, muss dieser einerseits über npm installiert und andererseits über einen Import importiert werden (Component kann über den vue-property-decorator oder über vue-class-component eingebunden werden, da laut Dokumentation dieselbe Komponenten-Klasse verwendet wird):
// ./scr/Components/Message.ts
// vue-property-decorator bietet unterschiedliche Module:
// { Component, Emit, Inject, Model, Prop, Provide, Watch }
// Es sollten immer nur die eingebunden werden, die auch tatsächlich benötigt werden.
import Vue from "vue";
import { Component, Prop } from 'vue-property-decorator'
...Properties, welche über den @Prop() Decorator erstellt werden, dienen dazu Komponenten mit demselben Setup individuelle Werte zu übergeben. Beispielsweise: Damit Dropdowns, die auf einer Komponente basieren, unterschiedliche options (<option></option>) anzeigen können, muss es möglich sein, dass Komponenten individuelle Informationen übergeben. Dazu werden Properties verwendet. Eine Property kann entweder mit oder ohne default Wert angelegt werden:
// ./src/Components/Message.ts
import Vue from "vue";
import { Component, Prop } from 'vue-property-decorator'
@Component({
name:"message",
template: "<p><span>{{myMessage}}</span></p>"
})
export default class Message extends Vue {
@Prop()
myMessage: string;
// oder wenn die Property einen “default” Wert haben soll
// @Prop({default: 'Ich bin ein default Wert für die Property myMessage.'})
// myMessage: string;
}Die Befüllung der Property mit einem Wert erfolgt in der .html Datei über den Komponente-Tag.
// ./index.html code
<body>
<div id=”app”>
<message my-message="Ich bin ein individueller Wert."></message>
</div>
</body>Anmerkung: Properties die im camelCase Format sind, müssen in der .html Datei mittels eines Bindestrichs angesprochen werden:
myMessage > my-message
Wird kein Wert in der .html Datei angegeben, so wird der default Wert der Property, sofern dieser gesetzt wurde, gerendert.
Ausgabe von Daten über das Eltern Element
Manchmal ist es notwendig, dass Komponenten Werte rendern, die über das Eltern-Element übergeben werden. Dies ist besonders dann der Fall, wenn der Inhalt einer Komponente von äußeren Faktoren abhängig ist, beispielsweise Optionen eines Dropdowns, die asynchron geladen werden.
Damit Komponenten Werte des Eltern-Elements rendern können müssen folgende Dinge konfiguriert werden:
- Das Eltern-Element muss im data Objekt eine Property anlegen, welche dynamisch befüllt werden kann.
// ./src/Controller/AppController.ts super({ el: '#app', data: { myMessage: 'Ich bin eine Message, die im Eltern-Element definiert ist' } }) - In der .html Datei wird die Eltern-Property der Komponenten-Property übergeben. Dies wird mittels v-bind: durchgeführt.
// ./index.html code <body> <div id=”app”> <message v-bind:my-message="myMessage"> Hello World. </message> </div> </body>
Es gibt für v-bind auch einen „shorthand“ – es kann das v-bind:my-message durch :my-message ersetzt werden. Dabei bezieht sich :my-message auf die Property der Komponente und myMessage in den Anführungszeichen auf die Property im Eltern-Element.// ./index.html code <body> <div id=”app”> <message :my-message="myMessage"> Hello World. </message> </div> </body>
Anmerkung dazu von Vue.js: „Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id=“{{ val }}“>, use <div :id=“val“>.“
Beispiel
Ausschnitt aus der index.html – Einbindung der Komponenten
// ./index.html code
<body>
<div id="app">
#### Ausgabe über die Property und den <slot> Tag.
<message my-message="Ich bin ein individueller Wert.">
</message>
#### Ausgabe über die Property mit default Wert und den <slot> Tag
<message>
Hello Word!
</message>
#### Ausgabe über die Property mit default Wert und den <slot> Tag mit default Wert.
<message></message>
#### Ausgabe über das Eltern Element und den <slot> Tag.
<message :my-message="myMessage">
Hello World!
</message>
</div>
</body>
Fazit
Vue.js ist eine mächtige Library, die relativ einfach zu verwenden ist. Die Blogreihe bietet eine gute Übersicht, wie Vue.js verwendet werden kann und soll für all jene hilfreich sein, die Vue.js mit TypeScript verwenden möchten. Ich persönlich habe Vue.js aufgrund seiner Einfachkeit lieben gelernt und würde, besonders in kleinen bis mittelgroßen Projekten und bei der Entwicklung von Prototypen, Vue.js einsetzen.
Was ich jeder Entwicklerin bzw. jedem Entwickler empfehle ist, sich gut zu überlegen, was mit dem Einsatz von Vue.js bezweckt werden soll und ob nicht ein anderes Framework oder eine andere Library sinnvoller wäre. Es sollte jeder Anwendungsfall für sich evaluiert werden. Ist letztendlich die Entscheidung getroffen worden, dass Vue.js verwendet wird – so sollte bereits vorab überlegt werden, wie die Projektstruktur
und Architektur der Applikation auszusehen hat, damit das Projekt in seiner Laufzeit nicht unübersichtlich wird.
Für einen weiteren Austausch stehe ich gerne zur Verfügung, einfach übers Kommentarfeld Kontakt mit mir aufnehmen! 
Blogreihe zu Vue.js:
- Teil 1: Gründe für die Verwendung von Vue.js in Sitecore Projekten
- Teil 2: Vue.js als Basisklasse in TypeScript Projekten
- Teil 3: Erstellung einer klassenbasierten Vue.js Komponente
- Teil 4: Individualisiertes Rendering einer Vue.js Komponente
The post Teil 4: Individualisiertes Rendering einer Vue.js Komponente appeared first on ANECON Blog.
Jobs of Nagarro Testing Services GmbH
Software Test Berater (m/w) in DresdenTestautomatisierer (m/w) in Dresden
Software Test Manager (m/w) in Dresden
Berufspraktikant (m/w) für den Bereich Testautomatisierung in Dresden
Architekt Testautomatisierung (m/w) in Dresden
Data Science ist dabei, unser Leben nachhaltig zu verändern. Mit künstlicher Intelligenz ausgestattete Systeme erreichen derzeit bei kognitiven Leistungen wie dem Erkennen und Interpretieren von Bildern, Verständnis und Übersetzen natürlicher Sprache bis hin zum Führen eines Fahrzeugs menschliches Leistungsvermögen und übertreffen dieses stellenweise schon. Ebenso führt das automatisierte Erheben von immer mehr Daten und die technische Möglichkeiten, diese in nie dagewesenem Umfang zu speichern und zu verarbeiten zu neuen Möglichkeiten in Technik, Wissenschaft, Medizin sowie Handel und Dienstleistungen. Neben unverzichtbaren Techniken der Informatik wie Programmieren, Softwaretechnik, Datenbanken sowie verteilten Rechen- und Speichersystemen liegen die mathematischen Grundlagen von Data Science in der Statistik, der Optimierung, inversen Problemen, der Numerik und dem wissenschaftlichen Rechnen.
Facebook erinnert uns an die Geburtstage unserer Freunde, Google gibt Antworten auf jedwede Fragen und auf unserem Smartphone ist unser Leben gespeichert - in Bildern, Videos, Kalendereinträgen, Merkzetteln. Beim Surfen durchs Internet wird uns gezeigt, was wir als nächstes kaufen sollten oder wohin der Sommerurlaub gehen könnte.
Egoistische Gene, böse Technik?
