Teil 6: Templates

Vue.js unter der Lupe: So funktionieren Templates
Keine Kommentare

Vue.js verwendet eine Templating-Sprache, die ein Superset von HTML ist. HTML ist immer ein gültiges Vue.js-Template. Darüber hinaus bietet Vue.js zwei mächtige Funktionen: Interpolation und Directives.

Templates in Vue.js

Vue.js benutzt eine Templating-Sprache, die ein Superset von HTML darstellt. HTML ist immer  ein gültiges Vue.js-Template. Darüber hinaus bietet Vue.js zwei sehr mächtige Dinge an: Interpolation und Directives. In diesem Artikel werde ich detailliert auf die Interpolation eingehen, in einem späteren Artikel gehe ich dann auf die Directives ein.

Das hier ist ein gültiges Vue.js-Template:

<span>Hello!</span>

Dieses Template kann, explizit deklariert, in einer Vue-Komponente platziert werden:

 new Vue({
template: '<span>Hello!</span>'
})

Oder es kann in eine Single File Component platziert werden:

<template>
<span>Hello!</span>
</template>

Dieses erste Beispiel ist sehr einfach. Der nächste Schritt besteht darin, dass man das Template dazu bringt, einen Teil des States der Komponente auszugeben, z. B. einen Namen. Das kann per Interpolation gemacht werden. Zuerst fügen wir unserer Komponente ein paar Daten zu:

new Vue({
data: {
name: 'Flavio'
},
template: '<span>Hello!</span>'
})

Und dann können wir es zu unserem Template hinzufügen, indem wir die Doppelklammer-Syntax verwenden.

new Vue({
data: {
name: 'Flavio'
},
template: '<span>Hello {{name}}!</span>'
})

Hier möchte ich auf etwas Interessantes hinweisen. Haben Sie es gesehen, dass wir gerade name anstatt this.data.name benutzt haben? Der Grund dafür ist, dass Vue.js etwas internes Binding betreibt und die Templates das Property so verwenden, als ob es lokal wäre. Eine sehr praktische Sache.

In einer Single File Component würde das so aussehen:

<template>
<span>Hello {{name}}!</span>
</template>
<script>
export default {
data() {
return {
name: 'Flavio'
}
}
}
</script>

In meinem Export habe eine reguläre Funktion verwendet. Warum habe ich nicht mit einer Arrow-Funktion gearbeitet?

Das liegt daran, dass wir möglicherweise auf eine Methode in unserer Komponenten-Instanz zugreifen müssen, die sich in data befindet. Das können nicht machen, wenn this an die Komponente gebunden ist, sodass die Verwendung von Arrow-Funktionen nicht möglich ist.

Lesen Sie auch: Das Vue.js Tutorial – Einführung in das JavaScript-Framework

Wir könnten auch eine Arrow-Funktion anwenden, aber dann dürfte man nicht vergessen, wieder auf eine reguläre Funktion zu wechseln, für den Fall, dass man this verwendet. Ich halte es für besser, auf Nummer sicher zu gehen.

Jetzt aber zurück zu der Interpolation.

{{ name }} erinnert an die Mustache- oder Handelbar-Templates-Interpolation, aber das ist nur eine optische Erinnerung. In diesen Template Engines sind die Interpolations „dumm“, aber in Vue kann man weitaus mehr damit machen, da sie viel flexibler sind.

Sie können jeden beliebigen JavaScript-Ausdruck in Ihren Interpolations verwenden. Sie dürfen aber jeweils nur eine Expression verwenden:

{{ name.reverse() }}
{{ name === 'Flavio' ? 'Flavio' : 'stranger' }}

Vue bietet Zugriff auf einige globale Objekte innerhalb von Templates, einschließlich Math und Date, so dass Sie diese verwenden können:

{{ Math.sqrt(16) * Math.random() }}

Es ist am besten, Templates keine komplexe Logik hinzuzufügen, aber die Tatsache, dass Vue es uns erlaubt, gewährt uns mehr Flexibilität. Besonders dann, wenn wir Dinge ausprobieren wollen. Wir können zuerst versuchen, einen Ausdruck in das Template einzufügen und es dann später in ein berechnetes Property oder eine Methode zu verschieben. Der in einer Interpolation enthaltene Wert wird bei einer Änderung einer der Daten-Properties, auf die er sich stützt, aktualisiert.

Sie können diese Reaktivität vermeiden, indem Sie die v-once-Direkte verwenden. Das Resultat wird immer escaped sein, so dass Sie kein HTML in der Ausgabe verwenden können. Wenn Sie ein HTML-Snippet benötigen, müssen Sie stattdessen die v-html-Direktive verwenden.


Dieser Artikel erschien zuerst auf Englisch im Vue Handbook von Flavio Copes.


Kostenlos: Das iJS React Cheat Sheet

Sie wollen mit React durchstarten?
Unser Cheatsheet zeigt Ihnen alle wichtigen Snippets auf einen Blick.
Jetzt kostenlos herunterladen!

Download for free

 

API Summit 2018

From Bad to Good – OpenID Connect/OAuth

mit Daniel Wagner (VERBUND) und Anton Kalcik (business.software.engineering)

Unsere Redaktion empfiehlt:

Relevante Beiträge

X
- Gib Deinen Standort ein -
- or -