Informationen zur Verwendung der Vue v-on-Direktive

1. Auf Ereignisse achten

Mit v-on können Sie auf DOM Ereignisse warten und JavaScript Code ausführen, wenn diese ausgelöst werden. Der Ereigniscode kann direkt nach v-on platziert oder als Funktion geschrieben werden.

Der Beispielcode lautet wie folgt:

<div id="app">
  <p>{{Zähler}}</p>
  <button @click="counter += 1">+1</button>
  <button @click="subtrahieren(10)">-10</button>
</div>
<Skript>
  const app = new Vue({
    el: "#app",
    Daten: {
      Zähler: 0
    },
    Methoden: {
      subtrahieren(Wert){
        this.counter -= Wert
      }
    }
  })
</Skript>
 

2. Übergeben Sie Ereignisparameter

Wenn Sie das native DOM -Ereignis in der Ereignisbehandlungsfunktion abrufen möchten, können Sie beim Aufruf im html -Code einen $event Parameter übergeben.

Der Beispielcode lautet wie folgt:

<button v-on:click="subtract(10,$event)">10 subtrahieren</button>
...
<Skript>
...
Methoden: {
    subtrahieren: Funktion(Wert,Ereignis){
        this.count -= Wert;
        console.log(Ereignis);
    }
}
...
</Skript>
 

3. Ereignismodifikatoren

Es ist eine sehr häufige Anforderung, event.preventDefault() oder event.stopPropagation() in einem Ereignishandler aufzurufen. Obwohl wir dies problemlos in der Methode tun können, ist es besser, wenn die Methode eine reine Datenlogik aufweist, anstatt DOM Ereignisdetails zu verarbeiten.

Um dieses Problem zu lösen, stellt Vue.js Ereignismodifikatoren für v-on bereit. Wie bereits erwähnt, werden Modifikatoren durch einen Punkt am Anfang des Befehlssuffixes angezeigt.

• .stop: event.stopPropagation , stoppt das Aufsteigen von Ereignissen.
• .prevent: event.preventDefault , verhindert das Standardverhalten
• .capture: Ereigniserfassung.
• .self: stellt das aktuell angeklickte Element selbst dar.
• .once: Dieses Ereignis wird nur einmal ausgeführt.
• .passive: Weist den Browser an, das Standardverhalten beim Scrollen der Seite nicht zu verhindern, wodurch das Scrollen flüssiger wird.

Fall 1: Verhindern der weiteren Ausbreitung von Klickereignissen

<div id="app">
  <div @click="divClick">
    1111
    <button @click.stop="btnClick">Schaltfläche</button>
  </div>
</div>
<Skript>
  let app = neues Vue({
    el: "#app",
    Daten: {
      Anzahl: 0
    },
    Methoden: {
      divKlick(){
        console.log("divClick")
      },
      btnClick(){
        console.log("btnClick")
      }
    }
  });
</Skript>

Fall 2: Beim Senden eines Ereignisses wird die Seite nicht mehr neu geladen

<div id="app">
  <Formularaktion="">
    <Bezeichnung>
      <Eingabetyp="Text">
    </Bezeichnung>
    <Bezeichnung>
      <input type="submit" value="Senden">
    </Bezeichnung>
  </form>
</div>
<Skript>
  const app = new Vue({
    el: "#app",
    Daten: {
    }
  })
</Skript>

Das Obige ist der Standardcode zum Senden von Daten. Nach dem Senden wird automatisch zu Baidu gesprungen. Allerdings gibt es jetzt eine Anforderung. Wir hoffen, dass nach der Eingabe der Daten nicht automatisch zu Baidu gesprungen wird, sondern dass die Daten zuerst mit unserer eigenen Methode verarbeitet werden und dann nach der Verarbeitung zur angegebenen Seite gesprungen wird.

Der Code lautet wie folgt:

<div id="app">
  <form action="https://www.baidu.com">
    <Bezeichnung>
      <Eingabetyp="Text">
    </Bezeichnung>
    <Bezeichnung>
      <input type="submit" value="Senden" @click.prevent="testClick">
    </Bezeichnung>
  </form>
</div>
<Skript>
  const app = new Vue({
    el: "#app",
    Methoden: {
      testKlick(){
      }
    }
  })
</Skript>

Hier binden wir ein Klickereignis zum submit und verwenden .prevent , um das Standardverhalten zu verhindern.

Dies ist das Ende dieses Artikels über die Verwendung der Vue v-on-Direktive. Weitere relevante Inhalte zur Vue v-on-Direktive finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!