3. Projekt [vuejs-01]: Die Grundlagen

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

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

[main.js] [2] ist der Einstiegspunkt des Projekts;
[App.vue, HelloWorld.vue] [3-4] sind [Vue.js]-Komponenten, die optional die folgenden Elemente enthalten:
- [<template>...</template>]: HTML-Code;
- [<script>...</script>]: der mit dem HTML-Code verbundene JavaScript-Code;
- [<style>...</style>]: die mit dem HTML-Code verbundenen CSS-Stile;
[public/index.html] [5]: das HTML-Dokument, das durch den Befehl [npm run serve] angezeigt wird;

Die Datei [public/index.html], die bei Ausführung des Projekts angezeigt wird, ist diese:


<!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>
    <!-- built files will be auto injected -->
  </body>
</html>

Diese HTML-Datei zeigt daher statisch nichts an. Hier gibt es keinen HTML-Code. Die Anzeige ist dynamisch: Der JavaScript-Code des Projekts generiert HTML, der den Tag [<div id=’app’>] in Zeile 14 vollständig ersetzt. Der vom JavaScript des Projekts generierte und anstelle des Tags [<div>] in Zeile 14 eingefügte HTML-Code stammt aus den [template]-Tags der [vue.js]-Komponenten, den Dateien mit der Endung [.vue].

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


// imports
import Vue from 'vue'
import App from './App.vue'
 
// configuration
Vue.config.productionTip = false
 
// instanciation projet [App]
new Vue({
  render: h => h(App),
}).$mount('#app')

Kommentare

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

Jedes [Vue.js]-Projekt 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 [.vue]-Fragment besteht aus höchstens drei Abschnitten:
- [<template>...</template>] : HTML-Code;
- [<script>...</script>] : JavaScript-Code, der mit dem HTML-Code verknüpft ist;
- [<style>...</style>]: die mit dem HTML-Code verbundenen CSS-Stile;

Hier gibt es keinen [style]-Abschnitt.

Zeilen 1–6: der HTML-Code des Fragments (Seite, Komponente, Ansicht, ...);
Zeilen 2–5: Der [template]-Abschnitt darf nur ein Element enthalten. In der Regel platzieren wir hier ein [div]-Element, das den gesamten HTML-Code des Fragments umfasst. Wir können auch ein <template>-Tag einfügen;
Zeile 3: ein Bild;

Zeile 4: eine Komponente namens [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 JavaScript-Skripts definiert ist;
Zeile 4: Eine Komponente kann Parameter akzeptieren. Der Parameter ist hier das Attribut [msg];
Zeilen 8–17: das JavaScript-Skript für das Fragment (oder die Komponente);
Zeile 9: Um die Komponente [HelloWorld] innerhalb der Komponente [App] zu verwenden, muss ihre Definition in den Abschnitt [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. Sie werden zusammen mit ihr exportiert;

Zeile 9: Die Komponente [HelloWorld] muss nicht denselben Namen haben wie die Datei, die sie definiert. Sie könnte als [X] importiert und als Komponente [Bonjour] exportiert werden:

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 Kurzform für den Code [HelloWorld : HelloWorld]: Die Komponente [HelloWorld] (rechts, in Zeile 9 importiert) wird unter dem Namen [HelloWorld] (links) exportiert.

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


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

Kommentare

Die Komponente [HelloWorld] hat dieselbe Dateistruktur wie die Hauptkomponente [App];
Zeile 3: Hier wird ein JavaScript-Ausdruck ausgewertet, in diesem Fall der Ausdruck [msg];
Zeilen 10–12: definieren die Eigenschaften der Komponente, genauer gesagt ihre Parameter. Als die [App]-Komponente eine [HelloWorld]-Komponente instanziierte, tat sie dies mit der folgenden Syntax:


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

Die [HelloWorld]-Komponente wird instanziiert, indem dem Parameter (Attribut) [msg] ein Wert zugewiesen wird. Wenn wir uns die [template] der [HelloWorld]-Komponente ansehen, ergibt sich:


<div>
    <h1>Notre première application Vue.js</h1>
</div>

Zeilen 7–14: Die Eigenschaften der Komponente, definiert als ein 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 wir schließlich die Vorlagen der beiden verwendeten Komponenten [App, HelloWorld] kombinieren, 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:

Die angezeigte Seite ist dann [2].

Sehen wir uns nun den Code für diese Seite an:

Klicken Sie in [1] mit der rechten Maustaste;
unter [2] den Quellcode der Seite. Wir sehen, dass dies der Code aus der ursprünglichen Datei [index.html] ist, und das ist nicht das, was angezeigt wurde. Es war tatsächlich die Seite [index.html], die ursprünglich geladen wurde. Dann hat JavaScript-Code diese Seite dynamisch verändert, aber das wird uns nicht angezeigt;

Wenn Seiten dynamisch durch JavaScript generiert werden, ist die Option [2] nutzlos. Sie müssen die Browser-Entwicklertools (F12 in Firefox) aufrufen, um den Code der aktuell angezeigten Seite anzuzeigen:

in [1] den DOM-Inspector (Document Object Model) für das angezeigte Dokument;
in [2], was dieses DOM tatsächlich enthält;
[3-4], Werkzeuge, mit denen wir die vom [Vue.js]-Framework verwendeten JavaScript-Objekte anzeigen;
[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] einmal genauer an:

Die Ansicht [1-4] zeigt uns die [Vue.js]-Struktur des Dokuments: Der Dokumentstamm [2] (index.html) enthält die Komponente [App] (3), die wiederum die Komponente [HelloWorld] (4) enthält. Durch Klicken auf [4] werden die Eigenschaften der Komponente [HelloWorld] [5] angezeigt.

In [4] (rechts) sehen wir den Indikator [$vm0]. Dies ist der Name der Variablen, die wir in der JavaScript-Konsole [6] verwenden können, um auf das [HelloWorld]-Objekt zu verweisen. Probieren wir das aus:

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

Zum Abschluss demonstrieren wir die [Hot-Reload]-Funktion des Befehls [serve], der zum Ausführen des Projekts verwendet wird:

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

In [1] ändern wir die angezeigte Meldung;
in [2-3] wird die Seite automatisch aktualisiert, ohne dass wir etwas tun müssen;

Wir werden nun verschiedene [vuejs-xx]-Projekte erstellen, um die wichtigsten Funktionen von [Vue.js] zu veranschaulichen. Mit „wichtig“ meinen wir „Funktionen, die wir im [Vue.js]-Client des Steuerberechnungsservers verwenden werden“. Andere „wichtige“ Funktionen werden weggelassen, wenn sie im Client nicht verwendet werden. Dies ist daher nicht als umfassende Darstellung von [Vue.js] gedacht.