VUE Erste Schritte Erlernen der Ereignisbehandlung

1. Funktionsbindung

Sie können v-on:click="methodName" oder die Abkürzung @click="methodName" verwenden, um die Eventhandler-Funktion zu binden

@click="methodName()" ist auch OK. @click="methodName" ist wahrscheinlich eine Abkürzung.

  <div v-on:click="hinzufügen">{{ Anzahl }}</div>
  <div @click="hinzufügen">{{ Anzahl }}</div>

  Daten() {
    zurückkehren {
      Anzahl: 0,
    };
  },
  Methoden: {
    hinzufügen() {
      dies.zählen++;
    },
  },

2. Mit Parametern und $event

Sie können Parameter und $event direkt an die Ereignisbindungsfunktion übergeben  

<div @click="set(0, $event)">{{ Anzahl }}</div>

  Daten() {
    zurückkehren {
      Anzahl: 0,
    };
  },
  Methoden: {
    hinzufügen() {
      dies.zählen++;
    },
    setze(Wert, Ereignis) {
      console.log(Ereignis);
      this.count = Wert;
    },
  },

3. Mehrere Funktionen an ein Ereignis binden

Mehrere Funktionen werden durch Kommas getrennt. Auch wenn in der Funktion kein Parameter vorhanden ist, müssen Klammern hinzugefügt werden, sonst wird die Funktion nicht ausgeführt.

Beispielsweise führt <div @click="set(0, $event), log">{{ count }}</div> nur set aus.

<div @click="set(0, $event), log()">{{ Anzahl }}</div>

  Daten() {
    zurückkehren {
      Anzahl: 0,
    };
  },
  Methoden: {
    hinzufügen() {
      dies.zählen++;
    },
    Protokoll() {
      console.log("log---");
    },
    setze(Wert, Ereignis) {
      console.log(Ereignis);
      this.count = Wert;
    },
  },

4. Ereignismodifikatoren

Bei der Verwendung von Modifikatoren ist die Reihenfolge wichtig; der entsprechende Code wird in der gleichen Reihenfolge generiert

<!-- Verhindert die weitere Ausbreitung des Klickereignisses -->
<a @click.stop="machDies"></a>

<!-- Beim Senden des Ereignisses wird die Seite nicht mehr neu geladen -->
<form @submit.prevent="onSubmit"></form>

<!-- Modifikatoren können verkettet werden -->
<a @click.stop.prevent="machDas"></a>

<!-- nur Modifikatoren -->
<form @submit.prevent></form>

<!-- Beim Hinzufügen von Ereignis-Listenern den Ereigniserfassungsmodus verwenden -->
<!-- Das heißt, die von den internen Elementen ausgelösten Ereignisse werden zuerst hier verarbeitet und dann zur Verarbeitung an die internen Elemente übergeben-->
<div @click.capture="machDies">...</div>

<!-- Handler nur auslösen, wenn event.target das aktuelle Element selbst ist -->
<!-- Das heißt, das Ereignis wird nicht vom internen Element ausgelöst-->
<div @click.self="machDas">...</div>

<!-- Klickereignis wird nur einmal ausgelöst und kann für benutzerdefinierte Komponentenereignisse verwendet werden-->
<a @click.once="machDies"></a>

<!-- Das Standardverhalten des Scroll-Ereignisses (also das Scroll-Verhalten) wird sofort ausgelöst -->
<!-- ohne auf die Fertigstellung von `onScroll` zu warten -->
<!-- Dies schließt den Fall von `event.preventDefault()` ein -->
<!-- Verbessert insbesondere die Leistung auf Mobilgeräten -->
<div @scroll.passive="onScroll">...</div>

5. Wichtige Modifikatoren

• .enter
• .tab
• .delete ( erfasst die Tasten „Entf“ und „Rücktaste“)
• .esc
• .space
• .up
• .down
• .left
• .right

<!-- Rufen Sie `vm.submit()` nur auf, wenn `key` `Enter` ist -->
<input @keyup.enter="Senden" />

<!-- Rufen Sie `vm.onPageDown()` nur auf, wenn `key` PageDown ist -->
<input @keyup.page-down="aufSeiteNachunten" />

6. Systemmodifizierertasten

Die Modifikatortaste muss gedrückt werden, wenn das Ereignis ausgelöst wird

• .ctrl
• .alt
• .shift
• .meta

<!-- Alt gedrückt halten und Enter drücken -->
<input @keyup.alt.enter="löschen" />

<!-- Drücken Sie Strg + Klick -->
<div @click.ctrl="doSomething">Tu etwas</div>

.exact Modifikator

<!-- Dies wird auch ausgelöst, wenn Alt oder Umschalt gleichzeitig gedrückt werden -->
<button @click.ctrl="beimKlick">A</button>

<!-- Wird nur ausgelöst, wenn Strg gedrückt wird-->
<button @click.ctrl.exact="beiStrg-Klick">A</button>

<!-- Wird nur ausgelöst, wenn kein Systemmodifikator gedrückt wird-->
<button @click.exact="beimKlick">A</button>

Maustastenmodifikatoren

  <button @click.left="log('left cllilck')">Linksklick mit der Maus</button>
  <button @click.right="log('right cllilck')">Rechtsklick</button>
  <button @click.middle="log('middle cllilck')">mittlerer Klick</button>

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalten auf 123WORDPRESS.COM mehr Aufmerksamkeit schenken können!