Teil 5: Komponenten als Single File Component erstellen

Vue.js unter der Lupe: So funktionieren Single File Components
Keine Kommentare

Wie kann man in Vue.js mit einer einzigen Datei für eine Komponente zurecht kommen? Dafür nutzt man Single File Components, die alles managen, was das Aussehen und Verhalten einer Komponente betrifft.

Vue.js unter der Lupe: Single File Components

Eine Vue-Komponente kann in einer JavaScript-Datei (.js) folgendermaßen deklariert werden:

Vue.component('component-name', {
/* options */
})

Oder auch so:

new Vue({
/* options */
})

Oder sie kann in einer .vue-Datei spezifiziert werden. .vue-Dateien sind ziemlich cool, weil man darin folgendes definieren kann:

  • JavaScript-Logik
  • HTML Code Templates
  • CSS Styling

Alles in einer einzigen Datei,  die daher auch ihren Namen hat – die Single File Component.

Hier ist ein Beispiel:

<template>
<p>{{ hello }}</p>
</template>
<script>
export default {
data() {
return {
hello: 'Hello World!'
}
}
}
</script>
<style scoped>
p {
color: blue;
}
</style>

All das ist durch die Nutzung von Webpack möglich. Das ist mit dem Vue CLI sehr einfach und wird out-of-the-box unterstützt..vue-Dateien können nicht ohne ein Webpack-Setup benutzt werden. Darum sind sie nicht sonderlich gut für Apps geeignet, die Vue lediglich auf einer Seite anwenden, ohne dabei eine vollwertige Single Page App (SPA) zu sein. Dadurch, dass Single File Components auf Webpack angewiesen sind, bekommen wir aber kostenlos die Möglichkeit dazu, moderne Web-Features zu nutzen.

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

Das CSS kann mit SCSS oder Stylus definiert werden, das Template kann mit Pug erstellt werden. Dafür muss man nicht mehr tun, als in Vue zu definieren, welchen Language.Präprozessor man verwendet.

Die Liste der unterstützten Präprozessoren beinhaltet:

  • TypeScript
  • SCSS
  • Sass
  • Less
  • PostCSS
  • Pug

Wir können mit der Babel-Integration modernes JavaScript (ES6-7-8) unabhängig vom Ziel-Browser verwenden. Das gilt auch für ES-Moduls, sodass wir die import-/export-Statements nutzen können. Wir können CSS-Module verwenden, um unser CSS zu einzugrenzen.

Da wir gerade über das Eingrenzen von CSS sprechen: Mit Single File Components ist es wirklich leicht, CSS so zu schreiben, das es nicht zu anderen Komponenten durchdringen kann, indem <style scoped>-Tags verwendet werden.

Wenn man scope weglässt, ist das definierte CSS global. Aber wird es hinzugefügt, fügt Vue automatisch eine spezifische Klasse zu der Komponente hinzu, die einzigartig innerhalb der App ist. So ist es gewährleistet, dass das CSS keine anderen Komponenten beeinflusst.

Vielleicht ist Ihr JavaScript wegen der Logik, um die Sie sich kümmern müssen, sehr umfangreich. Was ist, wenn Sie eine separate Datei für Ihr JavaScript verwenden möchten?

Mit dem src-Attribut kann es ausgelagert werden:

<template>
<p>{{ hello }}</p>
</template>
<script src="./hello.js"></script>

Dies funktioniert ebenfalls für Ihr CSS:

<template>
<p>{{ hello }}</p>
</template>
<script src="./hello.js"></script>
<style src="./hello.css"></style>

Ich habe zum Beispiel folgendes im JavaScript einer Komponente verwendet, um die Daten einzurichten:

export default {
data() {
return {
hello: 'Hello World!'
}
}
}

Weitere, gängige Möglichkeiten, die man findet:

export default {
data: function() {
return {
name: 'Flavio'
}
}
}

(Das ist das gleiche wie zuvor)

Oder:

export default {
data: () => {
return {
name: 'Flavio'
}
}
}

Das hier funktioniert anders, weil es eine Arrow-Funktion verwendet. Arrow-Funktionen sind so lange in Ordnung, bis wir auf Methode einer Komponente zugreifen müssen, weil wir this verwenden müssen und dieses Property nicht über die Arrow-Funktionen an die Komponente gebunden ist. Daher ist es zwingend erforderlich, reguläre Funktionen anstelle der Arrow-Funktionen zu verwenden.

Auch sowas hier kommt vor:

module.exports = {
data: () => {
return {
name: 'Flavio'
}
}
}

Hier wird die CommonJS-Syntax verwendet. Das funktioniert auch, obwohl empfohlen wird, die ES-Modul-Syntax zu verwenden, da es sich um einen JavaScript-Standard handelt.

Das sind die Wege, auf denen eine Single File Component definiert werden kann. Weiter geht es mit Templates.


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 -