5. Projekt [vuejs-03]: Ereignisbehandlung

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

die Behandlung eines [click]-Ereignisses auf einer Schaltfläche;
die [v-if]-Direktive, mit der Sie einen HTML-Block bedingt anzeigen können;

Die Verzeichnisstruktur des Projekts sieht wie folgt aus:

5.1. Das Hauptskript [main.js]

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


// imports
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'
 
// configuration
Vue.config.productionTip = false
 
// instanciation projet [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>
      <!-- ligne -->
      <b-row>
        <!-- colonne de largeur 4 -->
        <b-col cols="4">
          <img src="./assets/logo.jpg" alt="Cerisier en fleurs" />
        </b-col>
        <!-- colonne de largeur 8 -->
        <b-col cols="8">
          <h1>Calculez votre impôt</h1>
        </b-col>
      </b-row>
    </b-jumbotron>
    <!-- composant -->
    <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 [ClickOnMe]-Komponente

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


<template>
  <div>
    <!-- message on green background -->
    <b-alert show variant="success" align="center">
      <h4>[vuejs-03] : événement @click, directive v-if, méthodes</h4>
    </b-alert>
    <!-- message on yellow background -->
    <b-alert show variant="warning" align="center" v-if="show">
      <h4>{{msg}}</h4>
    </b-alert>
    <!-- blue button -->
    <b-button variant="primary" @click="changer">{{buttonTitle}}</b-button>
  </div>
</template>
 
<script>
  export default {
    name: "ClickOnMe",
    // paramètres du composant
    props: {
      msg: String
    },
    // attributs du composant
    data() {
      return {
        // titre du bouton
        buttonTitle: "Cacher",
        // contrôle l'affichage du message
        show: true
      };
    },
    // méthodes
    methods: {
      // montre / cache le message
      changer() {
        if (this.show) {
          // on cache le message
          this.show = false;
          this.buttonTitle = "Montrer";
        } else {
          // on montre le message
          this.show = true;
          this.buttonTitle = "Cacher";
        }
      }
    }
  };
</script>

Kommentare

Zeilen 4–6: eine grüne Warnmeldung von Bootstrap. Die Anzahl der verwendeten Spalten ist nicht angegeben. Daher werden die 12 Spalten von Bootstrap verwendet;
Zeilen 8–10: eine gelbe Bootstrap-Warnmeldung:
- Zeile 8: Die [v-if]-Direktive aus [Vue.js] steuert die Sichtbarkeit eines HTML-Blocks. Der Alert wird hier durch einen booleschen Wert [show] (Zeile 29) gesteuert. Wenn [show==true] ist, wird der Alert angezeigt; andernfalls nicht;
- Zeile 9: Die Warnmeldung zeigt eine Nachricht [msg] an, die eine Eigenschaft (Zeilen 20–22) der Komponente ist;
Zeile 12: Ein blauer Button, auf den Sie klicken, um die [warning]-Warnmeldung ein- oder auszublenden;
Zeilen 16–48: der JavaScript-Code der Komponente. Dieser Code steuert das dynamische Verhalten der Komponente:
Zeilen 20–22: die Eigenschaften der Komponente;
Zeilen 24–31: die Attribute der Komponente;

Was ist der Unterschied zwischen den [Eigenschaften] und [Attributen] 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 [props] einer Komponente ihre Parameter. 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 repräsentiert den Zustand oder die Attribute der Komponente. Dieser Zustand wird durch die Methoden der Komponente (Zeilen 33–46) manipuliert. Das <template> in den Zeilen 1–14 verwendet sowohl [properties] als auch [attributes]:
- Eigenschaftswerte werden von einer übergeordneten Komponente gesetzt;
- Attributwerte werden zunächst von der Funktion [data] gesetzt und können anschließend durch Methoden geändert werden;
- In beiden Fällen reagiert die visuelle Darstellung sofort auf Änderungen an einer Eigenschaft (übergeordnete Komponente) oder einem Attribut (Komponentenmethode). Dies wird als reaktive Schnittstelle bezeichnet;

In der [template] einer Komponente gibt es keinen Unterschied zwischen einem [prop]- und einem [data]-Attribut. Um festzustellen, ob dynamische Daten in der [template] im [props]-Attribut oder im von der [data]-Funktion zurückgegebenen Objekt platziert werden sollen, frage einfach, wer den Wert dieser Daten setzt:

Wenn die Antwort die übergeordnete Komponente ist, dann kommen die Daten in das [props]-Attribut;
Wenn die Antwort die Methode der Komponente ist, die dieses Ereignis verarbeitet, dann kommen die Daten in das von der [data]-Funktion zurückgegebene Objekt;

Die [Vorlage] verwendet hier die folgenden dynamischen Daten:

[show], Zeile 8. Diese Daten werden intern von der Methode [changer] verarbeitet, die das [click]-Ereignis auf der 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. Dies ist eine von der übergeordneten Komponente festgelegte Meldung. Wir platzieren sie daher im [props]-Attribut (Zeile 21);
[buttonTitle], Zeile 12. Diese Daten werden intern von der Methode [changer] verarbeitet, die das [click]-Ereignis auf der Schaltfläche in Zeile 12 verwaltet. Es handelt sich also um ein Attribut, das von der Funktion [data] erstellt wurde (Zeile 27);
Die Namen der Attribute [name, props, data, methods] des von der Komponente exportierten Objekts sind vordefiniert. Sie können keine anderen Namen verwenden;
Zeile 12: Das Attribut [@click] der Schaltfläche wird verwendet, um die Methode anzugeben, 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 enthält alle ihre Methoden. Meistens handelt es sich dabei um Funktionen, die auf ein Komponentenereignis 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 [Show] (Zeile 39);
- Wenn die [warning]-Meldung ausgeblendet ist, wird sie angezeigt und der Text der Schaltfläche ändert sich zu [Hide] (Zeile 43);
- Um die [warning]-Meldung ein- oder auszublenden, ändern wir den Wert des booleschen Werts [show] (Zeilen 38 und 42);
- wenn eine Methode auf das von der Funktion [data] zurückgegebene Attribut [attr] verweisen muss, schreiben wir [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ühren des Projekts

Das Ergebnis sieht wie folgt aus: