5. Projekt [vuejs-03]: Ereignisverwaltung

Das Projekt [vuejs-03] führt zwei Konzepte ein:

die Ereignisbehandlung [clic] für eine Schaltfläche;
die Anweisung [v-if], mit der ein Block HTML bedingt angezeigt werden kann;

Die Projektstruktur sieht wie folgt aus:

5.1. Das Hauptskript [main.js]

Das Skript [main.js] bleibt unverändert:


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

// Plugins
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);

// Bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// Konfiguration
Vue.config.productionTip = false

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

5.2. Die Hauptkomponente [App.vue]

Die Hauptkomponente [App.vue] verwendet die Komponente [ClickOnMe] anstelle der Komponente [HelloBootstrap]:


<template>
  <b-container>
    <b-card>
    <!-- Bootstrap Jumbotron -->
    <b-jumbotron>
      <!-- Zeile -->
      <b-row>
        <!-- Spalte mit einer Breite von 4 -->
        <b-col cols="4">
          <img src="./assets/logo.jpg" alt="Cerisier en fleurs" />
        </b-col>
        <!-- Spalte mit einer Breite von 8 -->
        <b-col cols="8">
          <h1>Calculez votre impôt</h1>
        </b-col>
      </b-row>
    </b-jumbotron>
    <!-- Komponente -->
    <ClickOnMe msg="Information..." />
    </b-card>
  </b-container>
</template>


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

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

5.3. Die Komponente [ClickOnMe]

Die Komponente [ClickOnMe] führt die neuen Konzepte ein:


<template>
  <div>
    <!-- Meldung auf grünem Hintergrund -->
    <b-alert show variant="success" align="center">
      <h4>[vuejs-03] : événement @click, directive v-if, méthodes</h4>
    </b-alert>
    <!-- Meldung auf gelbem Hintergrund -->
    <b-alert show variant="warning" align="center" v-if="show">
      <h4>{{msg}}</h4>
    </b-alert>
    <!-- blaue Schaltfläche -->
    <b-button variant="primary" @click="changer">{{buttonTitle}}</b-button>
  </div>
</template>

<script>
  export default {
    name: "ClickOnMe",
    // Komponentenparameter
    props: {
      msg: String
    },
    // Komponentenattribute
    data() {
      return {
        // Titel der Schaltfläche
        buttonTitle: "Cacher",
        // Steuert die Anzeige der Meldung
        show: true
      };
    },
    // Methoden
    methods: {
      // zeigt die Meldung an / blendet sie aus
      changer() {
        if (this.show) {
          // Die Meldung wird ausgeblendet
          this.show = false;
          this.buttonTitle = "Montrer";
        } else {
          // Die Meldung wird angezeigt
          this.show = true;
          this.buttonTitle = "Cacher";
        }
      }
    }
  };
</script>

Anmerkungen

Zeilen 4–6: eine grüne Bootstrap-Warnung. Die Anzahl der belegten Spalten wird nicht angegeben. Es werden daher die 12 Bootstrap-Spalten verwendet;
Zeilen 8–10: eine gelbe Bootstrap-Warnung:
- Zeile 8: Die Direktive [v-if] von [Vue.js] steuert die Sichtbarkeit eines Blocks HTML. Die Meldung wird hier durch einen booleschen Wert [show] (Zeile 29) gesteuert. Ist [show==true], so ist die Meldung sichtbar, andernfalls nicht;
- Zeile 9: Die Warnmeldung zeigt eine Meldung [msg] an, die eine Eigenschaft (Zeilen 20–22) der Komponente ist;
Zeile 12: Eine blaue Schaltfläche, auf die man klicken kann, um die Warnmeldung [warning] auszublenden bzw. einzublenden;
Zeilen 16–48: Der Code jS der Komponente. Dieser Code regelt die dynamische Funktionsweise der Komponente:
Zeilen 20–22: die Eigenschaften der Komponente;
Zeilen 24–31: die Attribute der Komponente;

Was ist der Unterschied zwischen [propriétés] und [attributs] einer Komponente sowie zwischen den Feldern [props] und [data] des von der Komponente in den Zeilen 17–47 exportierten Objekts?

Wie wir bereits gesehen haben, sind die Eigenschaften [props] einer Komponente Parameter der Komponente. Ihre Werte werden von außerhalb der Komponente festgelegt. Eine Komponente A, die eine Komponente B mit den Eigenschaften [prop1, prop2, ..., propn] verwendet, nutzt diese wie folgt: <B :prop1=’val1’ :prop2=’val2’ ...> ;
Das von der Funktion [data] in den Zeilen 24–31 zurückgegebene Objekt stellt den Zustand der Komponente bzw. die Attribute der Komponente dar. Dieser Zustand wird durch die Methoden der Komponente (Zeilen 33–46) bearbeitet. Das <template> in den Zeilen 1–14 verwendet sowohl Elemente von [propriétés] als auch von [attributs]:
- Die Werte der Eigenschaften werden von einer übergeordneten Komponente festgelegt;
- die Werte der Attribute werden zunächst durch die Funktion [data] festgelegt und können anschließend durch die Methoden geändert werden;
- in beiden Fällen reagiert die visuelle Darstellung sofort auf Änderungen einer Eigenschaft (übergeordnete Komponente) oder eines Attributs (Methode der Komponente). Man spricht dann von einer reaktiven Schnittstelle;

In der [template] einer Komponente unterscheidet sich eine Eigenschaft [prop] in keiner Weise von einem Attribut [data]. Um festzustellen, ob ein dynamischer Wert von [template] in das Attribut [props] oder in das von der Funktion [data] zurückgegebene Objekt gesetzt werden soll, muss man sich einfach fragen, wer den Wert dieses Datums festlegt:

Wenn die Antwort „übergeordnete Komponente“ lautet, wird die Datenangabe in das Attribut [props] gesetzt;
wenn die Antwort die Methode ist, die dieses Ereignis der Komponente verarbeitet, wird der Wert in das von der Funktion [data] zurückgegebene Objekt gesetzt;

[template] verwendet hier die folgenden dynamischen Daten:

[show], Zeile 8. Diese Daten werden intern von der Methode [changer] verarbeitet, die das Ereignis [click] für die Schaltfläche in Zeile 12 verwaltet. Es handelt sich also um ein Attribut, das von der Funktion [data] (Zeile 29) erstellt wird;
[msg], Zeile 9. Es handelt sich um eine von der übergeordneten Komponente festgelegte Meldung. Sie wird daher in das Attribut [props] (Zeile 21) geschrieben;
[buttonTitle], Zeile 12. Diese Daten werden intern von der Methode [changer] verarbeitet, die das Ereignis [click] für die Schaltfläche in Zeile 12 verwaltet. Es handelt sich also um ein Attribut, das von der Funktion [data] (Zeile 27) erstellt wird;
die Namen der Attribute [name, props, data, methods] des von der Komponente exportierten Objekts sind vordefiniert. Andere Namen können nicht verwendet werden;
Zeile 12: Das Attribut [@click] der Schaltfläche dient dazu, die Methode zu bezeichnen, die auf einen Klick auf die Schaltfläche reagieren soll. Diese Methode muss sich in der Eigenschaft [methods] der Komponente befinden;
Zeile 33: Das Attribut [methods] der Komponente fasst alle Methoden der Komponente zusammen. Meistens handelt es sich dabei um Funktionen, die auf ein Ereignis der Komponente reagieren;
Zeilen 35–46: Die Methode [changer] wird aufgerufen, wenn der Benutzer auf die Schaltfläche klickt:
- Wenn die Warnmeldung [warning] angezeigt wird, wird sie ausgeblendet und der Text der Schaltfläche ändert sich in [Montrer] (Zeile 39);
- Wenn die Warnmeldung [warning] ausgeblendet ist, wird sie eingeblendet und der Text der Schaltfläche ändert sich in [Cacher] (Zeile 43);
- Um die Warnmeldung [warning] ein- bzw. auszublenden, wird der Wert des Booleschen Werts [show] geändert (Zeilen 38 und 42);
- Wenn eine Methode auf das Attribut [attr] verweisen muss, das von der Funktion [data] zurückgegeben wird, schreibt man [this.attr] (Zeilen 38 und 42). Das bedeutet, dass die Attribute des von der Funktion [data] zurückgegebenen Objekts direkte Attribute der Komponente [this] sind;

5.4. Ausführung des Projekts

Das Ergebnis sieht wie folgt aus: