Skip to content

3. Projekt [vuejs-01]: Die Grundlagen

Um den in [vuejs-00] ausgeführten Code zu erklären, werden wir ihn in [vuejs-01] vereinfachen. Wir duplizieren den Ordner [vuejs-00] in [vuejs-01]:

Image

Das Projekt [vuejs-01] umfasst im Wesentlichen vier Dateien:

  • [main.js] und [2] sind der Einstiegspunkt des Projekts;
  • [App.vue, HelloWorld.vue] und [3-4] sind Komponenten von [Vue.js] und können optional folgende Elemente enthalten:
    • [<template>...</template>]: Code aus HTML;
    • [<script>...</script>]: den mit dem Code HTML verbundenen JavaScript-Code;
    • [<style>...</style>]: das Stilblatt CSS, das dem Code HTML zugeordnet ist;
  • [public/index.html] [5]: das Dokument HTML, das durch den Befehl [npm run serve] angezeigt wird;

Die bei der Ausführung des Projekts angezeigte Datei [public/index.html] ist folgende:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>vuejs</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vuejs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- Die erstellten Dateien werden automatisch eingefügt -->
  </body>
</html>

Diese Datei HTML zeigt also statisch nichts an. Hier gibt es keinen Code HTML. Die Anzeige erfolgt dynamisch: Der Code jS des Projekts generiert den Code HTML, der das Tag [<div id=’app’>] in Zeile 14 vollständig ersetzt. Der Code „HTML“, der durch den Projektcode „jS“ generiert und anstelle des Tags „[<div>]“ in Zeile 14 eingefügt wurde, stammt aus den Tags „[template]“ der Komponenten „[vue.js], wobei die Dateien die Endung [.vue] tragen.

Der Code HTML wird in Zeile 14 dynamisch durch das folgende Skript [vuejs-01/main.js] eingefügt:


// Importe
import Vue from 'vue'
import App from './App.vue'

// Konfiguration
Vue.config.productionTip = false

// Projektinstanziierung [App]
new Vue({
  render: h => h(App),
}).$mount('#App')

Anmerkungen

  • Zeile 2: Das Objekt [Vue] wird vom Framework [vue.js] bereitgestellt;
  • Zeile 3: Das Objekt [App] wird von der Datei [vuejs-01/App.vue] bereitgestellt;
  • Zeile 6: Konfiguration des Objekts [Vue];
  • Zeilen 9–11: Dies sind die Zeilen, die
    • den Code HTML der Anwendung generieren. In Zeile 10 wird dieser durch die Datei [App.vue] generiert;
    • den in Zeile 10 generierten Code „HTML“ in den Abschnitt „[<div id=’app’></div>]“ der Datei „[public/index.html]“ laden;

Jedes Projekt [Vue.js] kann die Datei [index.html] unverändert beibehalten.

Die Datei [App.vue] aus dem ursprünglichen Projekt [vuejs-00] wird im Projekt [vuejs-01] wie folgt vereinfacht:


<template>
  <div id="myApp">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Notre première application Vue.js" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "app",
  components: {
    HelloWorld
  }
};
</script>

Kommentare

  • Ein Fragment [.vue] besteht aus höchstens drei Abschnitten:
    • [<template>...</template>]: aus dem Code HTML;
    • [<script>...</script>]: der JavaScript-Code, der dem Code HTML zugeordnet ist;
    • [<style>...</style>]: das Stil-Element CSS, das dem Code HTML zugeordnet ist;

Hier gibt es keinen Abschnitt [style].

  • Zeilen 1–6: der Code HTML des Fragments (Seite, Komponente, Ansicht, …);
  • Zeilen 2–5: Der Abschnitt [template] darf nur ein Element enthalten. In der Regel wird ein Abschnitt [div] eingefügt, der das gesamte HTML des Fragments umfasst. Es kann auch ein <template>-Tag eingefügt werden;
  • Zeile 3: ein Bild;

Image

  • Zeile 4: eine Komponente mit dem Namen [HelloWorld]. Das Prinzip von [Vue.js] besteht darin, Webseiten mithilfe von Fragmenten zu erstellen, die in [.vue]-Dateien definiert sind, wie hier [App.vue]. Diese Komponente wird durch die Datei [HelloWorld.vue] definiert, die in Zeile 9 des zugehörigen Skripts jS definiert ist;
  • Zeile 4: Eine Komponente kann Parameter akzeptieren. Der Parameter ist hier das Attribut [msg];
  • Zeilen 8–17: das Skript jS des Fragments (oder der Komponente);
  • Zeile 9: Um die Komponente [HelloWorld] in der Komponente [App] verwenden zu können, muss ihre Definition in den Teil [script] importiert werden;
  • Zeilen 11–16: Das Skript definiert ein Objekt und exportiert es, um es extern verfügbar zu machen;
  • Zeile 12: Das Attribut [name] definiert den Namen der exportierten Komponente;
  • Zeilen 13–15: Das Attribut [components] listet die von der Komponente [App] verwendeten Komponenten auf. Diese werden zusammen mit ihr exportiert;

Zeile 9: Es besteht keine Verpflichtung, dass die Komponente [HelloWorld] denselben Namen trägt wie die Datei, die sie definiert. Man könnte sie als [X] importieren und als Komponente [Bonjour] exportieren:

Image

  • Zeile 14: Die Komponente [X] wird unter dem Namen [Bonjour] exportiert. Sie wird dann unter diesem Namen verwendet (Zeile 4);

Die erste Variante ist die gängigste, daher werden wir unsere Komponenten auf diese Weise definieren;


<template>
  <div id="myApp">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Notre première application Vue.js" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "app",
  components: {
    HelloWorld
  }
};
</script>

Zeile 14 ist eine Abkürzung für den Code [HelloWorld : HelloWorld]: Die Komponente [HelloWorld] (rechts, in Zeile 9 importiert) wird unter dem Namen [HelloWorld] (links) exportiert.

Image

Wir vereinfachen die Komponente [HelloWorld.vue] wie folgt:


<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
};
</script>

Anmerkungen

  • Die Komponente [HelloWorld] hat dieselbe Dateistruktur wie die Hauptkomponente [App];
  • Zeile 3: Hier findet die Auswertung eines JavaScript-Ausdrucks statt, in diesem Fall des Ausdrucks [msg];
  • Zeilen 10–12: Hier werden die Eigenschaften der Komponente, genauer gesagt ihre Parameter, definiert. Als die Komponente [App] eine Komponente [HelloWorld] instanziiert hat, erfolgte dies mit folgender Syntax: 

<HelloWorld msg="Notre première application Vue.js" />

Die Komponente [HelloWorld] wird instanziiert, indem dem Parameter (Attribut) [msg] ein Wert zugewiesen wird. Folgt man dem [template] der Komponente [HelloWorld], so lautet dieser:


<div>
    <h1>Notre première application Vue.js</h1>
</div>
  • Zeilen 7–14: Die Eigenschaften der Komponente, definiert als Objekt, das exportiert wird;
    • Zeile 9: Die Komponente wird unter dem Namen [HelloWorld] exportiert;
    • Zeilen 10–12: Ihre Parameter werden durch die Eigenschaft [props] definiert;

Wenn man schließlich die Vorlagen der beiden verwendeten Komponenten [App, HelloWorld] zusammenführt, sieht die angezeigte Datei [index.html] wie folgt aus:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>vuejs</title>
</head>
<body>
  <noscript>
    <strong>We're sorry but vuejs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
  </noscript>
  <div id="myApp">
    <img alt="Vue logo" src="./assets/logo.png" />
    <div>
      <h1>Notre première application Vue.js</h1>
    </div>
  </div></body>
</html>

Wir starten die Anwendung, indem wir den Befehl [serve] [1] in der Datei [package.json] ändern:

Image

Die angezeigte Seite lautet dann [2].

Sehen wir uns nun den Code dieser Seite an:

Image

  • in [1], ändern in [clic droit];
  • in [2], der Quellcode der Seite. Wir sehen, dass es sich um den Code der ursprünglichen Datei [index.html] handelt, und dass nicht dieser angezeigt wurde. Tatsächlich wurde zunächst die Seite [index.html] geladen. Anschließend hat JavaScript diese Seite dynamisch verändert, was uns jedoch nicht angezeigt wird;

Wenn Seiten dynamisch durch JavaScript generiert werden, ist die Option [2] nutzlos. Man muss in die Browser-Tools (F12 in Firefox) gehen, um den Code der aktuell angezeigten Seite zu sehen:

Image

  • in [1], dem Inspektor des DOM (Document Object Model) des angezeigten Dokuments;
  • in [2], was dieses DOM tatsächlich enthält;
  • [3-4], die Tools, die wir verwenden werden, um die vom Framework [Vue.js] verwendeten JavaScript-Objekte anzuzeigen;
  • [4] ist eine Erweiterung (hier für Firefox) zum Debuggen von [Vue.js]-Anwendungen:
    • für Firefox: [https://addons.mozilla.org/fr/firefox/addon/vue-js-devtools/];
    • für Chrome: [https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd];

Sehen wir uns die Registerkarte [Vue] [4] an:

Image

Die Ansicht „[1-4]“ zeigt uns die Struktur „[Vue.js]“ des Dokuments: Die Wurzel des Dokuments [2] (index.html) enthält die Komponente [App] (3), die wiederum die Komponente [HelloWorld] (4) enthält. Ein Klick auf [4] zeigt die Eigenschaften der Komponenten [HelloWorld] und [5] an.

In [4] (rechts) ist der Indikator [$vm0] zu sehen. Dies ist der Name der Variablen, die man in der Konsole JavaScript [6] verwenden kann, um das Objekt [HelloWorld] zu bezeichnen. Machen wir das:

Image

  • In [2] lassen wir den Ausdruck [$vm0] auswerten, wodurch dessen Struktur angezeigt wird. Normalerweise müssen wir diese Struktur nicht direkt verwenden;

Zum Abschluss zeigen wir die Funktion von [hot reload] im Befehl [serve], der zur Ausführung des Projekts verwendet wird:

  • Ändern Sie in [App.vue] die von [HelloWorld] angezeigte Meldung:

Image

  • In [1] wird die angezeigte Meldung geändert;
  • in [2-3] wird die Seite automatisch aktualisiert, ohne dass wir eingreifen müssen;

Wir werden nun verschiedene Projekte [vuejs-xx] erstellen, um die wichtigen Punkte von [Vue.js] zu veranschaulichen. Unter „wichtig“ ist zu verstehen: „die wir im Client [vue.js] des Steuerberechnungsservers verwenden werden“. Andere „wichtige“ Punkte werden nicht behandelt, wenn sie im Client nicht verwendet werden. Es handelt sich also nicht um eine umfassende Darstellung von [vue.js].

https://stahe.github.io
Dieses Tutorial, verfasst von Serge Tahé, wird der Öffentlichkeit unter den Bedingungen der Creative Commons Namensnennung – Nicht kommerziell – Namensnennung – Nicht kommerziell – Weitergabe unter gleichen Bedingungen 3.0 Unported.