Vue implementiert Klicks und übergibt gleichzeitig Ereignisobjekte und benutzerdefinierte Parameter.

Vue implementiert Klicks und übergibt gleichzeitig Ereignisobjekte und benutzerdefinierte Parameter.

Übergeben Sie einfach benutzerdefinierte Parameter

HTML

<div id="app">
 <button @click="tm(123)">ddddd</button>
</div>

JS-Code

neuer Vue({
  el:'#app',
 Methoden:{
   tm:Funktion(e){
    konsole.log(e);
  }
 }
})

Übergeben Sie einfach das Ereignisobjekt

HTML

<div id="app">
 <button @click="tm">ddddd</button>
</div>

JS-Code

neuer Vue({
  el:'#app',
 Methoden:{
   tm:Funktion(e){
    konsole.log(e);
  }
 }
})

Übergeben Sie Ereignisobjekt und benutzerdefinierte Parameter gleichzeitig

HTML

<div id="app">
 <button @click="tm($event,123)">ddddd</button>
</div>

JS-Code

neuer Vue({
  el:'#app',
 Methoden:{
   tm:Funktion(e,Wert){
    konsole.log(e);
    konsole.log(Wert);
  }
 }
})

Ergänzung: allgemeine Vue-Ereignisse (v-on:click) und Ereignisobjekte, Ereignis-Bubbling, Ereignis-Standardverhalten

Tatsächlich können auf v-on nicht nur Klickereignisse, sondern auch andere Ereignisse folgen, und die Verwendung ist ähnlich. Zum Beispiel: v-on:click/mouseout/mouseover/mousedown.......

Der folgende Klick ist ein Beispiel

Hinweis: Alle v-on-Zeichen können mit @ abgekürzt werden, z. B. kann v-click mit @click abgekürzt werden.

1. Auf Ereignisse achten

Mit der Direktive „v-on“ können Sie auf DOM-Ereignisse warten und JavaScript-Code ausführen, wenn diese ausgelöst werden. Im Allgemeinen besteht es darin, auf DOM zu hören, um einige Vorgänge auszulösen. Die nach dem Auslösen dieser Vorgänge (z. B. Klicks) ausgeführten Aktionen (js) können direkt dahinter geschrieben werden

v-on:click="Artikel+=1"

z.B:

<Vorlage>
 <div >
  <input type="button" value="klickmich" v-on:click="item+=1"/>
  <div>{{Artikel}}</div>
 </div>
</Vorlage>
 
<Skript>
Standard exportieren {
 Name: "Hallo Welt",
 Daten () {
  zurückkehren {
  Artikel:1
  }
 }
}
</Skript>
 
<!-- Fügen Sie das Attribut „scoped“ hinzu, um CSS nur auf diese Komponente zu beschränken -->
<Stilbereich>
 
</Stil>

Ergebnis:

Sie können sehen, dass der gebundene Wert bei jedem Klicken um 1 erhöht wird. Das heißt, Sie können den JS-Vorgang nach dem Ereignisauslöser einfügen. Aber manchmal, wenn die Logik zu komplex ist, führt das Einschreiben zu Verwirrung und führt zu Verwirrung hinsichtlich Ansicht und Logik. Auf den Klick kann also eine Methode folgen und alle Methoden der Verarbeitungslogik können in einer Funktion gekapselt und beim Klicken aufgerufen werden.

2. Ereignisbehandlungsmethode

v-on:click="begrüßen"

Zum Beispiel:

<Vorlage>
 <div >
  <input type="button" value="klickmich" v-on:click="grüßen"/>
  <div>{{res}}</div>
 </div>
</Vorlage>
 
<Skript>
Standard exportieren {
 Name: "Hallo Welt",
 Daten () {
  zurückkehren {
   Name: 1,
   Antwort: ""
  }
 },
 Methoden:{
  Begrüßung: Funktion () {
   // „this“ in der Methode bezieht sich auf die aktuelle Vue-Instanz this.res = „Hallo“ + this.name + „!“;
  }
 }
}
</Skript>
 
<!-- Fügen Sie das Attribut „scoped“ hinzu, um CSS nur auf diese Komponente zu beschränken -->
<Stilbereich>
 
</Stil>

Wirkung:

Sie können sehen, dass nach dem Klicken die JS-Logik in der Greet-Methode ausgeführt wird.

3. Zeitbindungsmethode mit Parametern:

Wie oben, der einzige Unterschied besteht darin, dass es Parameter enthält

 v-on:click="begrüßen(Name)"

<Vorlage>
 <div >
  <input type="button" value="klickmich" v-on:click="greet(name)"/>
  <div>{{res}}</div>
 </div>
</Vorlage>
 
<Skript>
Standard exportieren {
 Name: "Hallo Welt",
 Daten () {
  zurückkehren {
   Name: 1,
   res:""
  }
 },
 Methoden:{
  Begrüßung: Funktion (Empfangen) {
   // „this“ in der Methode bezieht sich auf die aktuelle Vue-Instanz this.res = „Hallo“ + reccept + 1 + „!“;
  }
 }
}
</Skript>
 
<!-- Fügen Sie das Attribut „scoped“ hinzu, um CSS nur auf diese Komponente zu beschränken -->
<Stilbereich>
 
</Stil>

Die Wirkung ist durchgängig. Die Methode kann auch mehrfach in einer Methode aufgerufen werden.

4. Methoden in Inline-Prozessoren

Das heißt, wenn in der Methode andere Methoden aufgerufen werden, können die anderen Methoden hier js-native Methoden wie das Verhindern von Blasenbildung usw. oder benutzerdefinierte Methoden sein.

v-on:click="begrüßen(Name,$Ereignis)"

z.B:

<Vorlage>
 <div >
  <input type="button" value="klickmich" v-on:click="greet(name,$event)"/>
  <div>{{res}}</div>
 </div>
</Vorlage>
 
<Skript>
Standard exportieren {
 Name: "Hallo Welt",
 Daten () {
  zurückkehren {
   Name: 1,
   res:""
  }
 },
 Methoden:{
  Begrüßung: Funktion (Empfangen, Ereignis) {
   wenn (reccept===1) dies.sagen()
  },
  sagen:funktion () {
   this.res="Ich habe angerufen"
  }
 }
}
</Skript>
 
<!-- Fügen Sie das Attribut „scoped“ hinzu, um CSS nur auf diese Komponente zu beschränken -->
<Stilbereich>
 
</Stil>

Wirkung:

5. Ereignisobjekt

$event ruft das Ereignisobjekt des aktuellen Klickereignisses ab. Beispielsweise ruft click die DOM-Ereignisobjektinformationen des aktuellen Klicks ab.

v-on:click="begrüßen($event)"

z.B:

<Vorlage>
 <div >
  <input type="button" value="klickmich" v-on:click="greet($event)"/>
 </div>
</Vorlage>
 
<Skript>
Standard exportieren {
 Name: "Hallo Welt",
 Daten () {
  zurückkehren {
   ausblenden: wahr
  }
 },
 Methoden:{
  Begrüßung: Funktion (ev) {
  Alarm (ev.clientX)
  }
 }
}
</Skript>
 
<!-- Fügen Sie das Attribut „scoped“ hinzu, um CSS nur auf diese Komponente zu beschränken -->
<Stilbereich>
 
</Stil>

Wirkung:

6. Das Aufwallen von Ereignissen

Wenn das Ereignis nicht am Sprudeln gehindert wird, springt es zweimal

z.B

<Vorlage>
 <div >
  <div @click="show1($event)">
   <div @click="show2($event)">Klick mich</div>
  </div>
 </div>
</Vorlage>
 
<Skript>
Standard exportieren {
 Name: "Hallo Welt",
 Daten () {
  zurückkehren {
   ausblenden: wahr
  }
 },
 Methoden:{
  show1: Funktion (ev) {
   Alarm(1)
  },
  show2: Funktion (ev1) {
   Alarm(2)
  }
 }
}
</Skript>
 
<!-- Fügen Sie das Attribut „scoped“ hinzu, um CSS nur auf diese Komponente zu beschränken -->
<Stilbereich>
 
</Stil>

Aber wenn man aufhört zu sprudeln, platzt es nur einmal

zB: Native js verhindert Blasenbildung

ev1.cancelBubble=true
<Vorlage>
 <div >
  <div @click="show1($event)">
   <div @click="show2($event)">Klick mich</div>
  </div>
 </div>
</Vorlage>
 
<Skript>
Standard exportieren {
 Name: "Hallo Welt",
 Daten () {
  zurückkehren {
   ausblenden: wahr
  }
 },
 Methoden:{
  show1: Funktion (ev) {
   Alarm(1)
  },
  show2: Funktion (ev1) {
    ev1.cancelBubble=true
   Alarm(2)
 
  }
 }
}
</Skript>
 
<!-- Fügen Sie das Attribut „scoped“ hinzu, um CSS nur auf diese Komponente zu beschränken -->
<Stilbereich>
 
</Stil>

Was ist also mit der in Vue selbst gekapselten Methode zur Blasenverhinderung?

@click.stop="show2()"

z.B:

<Vorlage>
 <div >
  <div @click="show1()">
   <div @click.stop="show2()">Klick mich</div>
  </div>
 </div>
</Vorlage>
 
<Skript>
Standard exportieren {
 Name: "Hallo Welt",
 Daten () {
  zurückkehren {
   ausblenden: wahr
  }
 },
 Methoden:{
  show1: Funktion () {
   Alarm(1)
  },
  show2: Funktion (ev1) {
   Alarm(2)
  }
 }
}
</Skript>
 
<!-- Fügen Sie das Attribut „scoped“ hinzu, um CSS nur auf diese Komponente zu beschränken -->
<Stilbereich>
 
</Stil>

7. Standardverhalten verhindern:

Beispiel: Ein Rechtsklick öffnet das Standardmenü wie folgt

<Vorlage>
 <div >
  <div>
   <div @contextmenu="show2()">Klick mich mit der rechten Maustaste an</div>
  </div>
 </div>
</Vorlage>
 
<Skript>
Standard exportieren {
 Name: "Hallo Welt",
 Daten () {
  zurückkehren {
   ausblenden: wahr
  }
 },
 Methoden:{
  show2: Funktion (ev1) {
   Alarm(2)
 
  }
 }
}
</Skript>
 
<!-- Fügen Sie das Attribut „scoped“ hinzu, um CSS nur auf diese Komponente zu beschränken -->
<Stilbereich>
 
</Stil>

Wirkung:

Dann gibt es eine Möglichkeit, das Standardverhalten zu verhindern

ev1.preventDefault();

z.B:

<Vorlage>
 <div >
  <div>
   <div @contextmenu="show2($event)">Klick mich mit der rechten Maustaste an</div>
  </div>
 </div>
</Vorlage>
 
<Skript>
Standard exportieren {
 Name: "Hallo Welt",
 Daten () {
  zurückkehren {
   ausblenden: wahr
  }
 },
 Methoden:{
  show2: Funktion (ev1) {
   Alarm(2);
   ev1.preventDefault();
  }
 }
}
</Skript>
 
<!-- Fügen Sie das Attribut „scoped“ hinzu, um CSS nur auf diese Komponente zu beschränken -->
<Stilbereich>
 
</Stil>

Das Standardmenü wird nach dem Klicken nicht angezeigt (Rechtsklick im PS 360-Browser ist ungültig)

Die in Vue gekapselte Methode, um Standardverhalten zu verhindern:

@contextmenu.prevent="show2()"

z.B:

<Vorlage>
 <div >
  <div>
   <div @contextmenu.prevent="show2()">Klick mich mit der rechten Maustaste an</div>
  </div>
 </div>
</Vorlage>
 
<Skript>
Standard exportieren {
 Name: "Hallo Welt",
 Daten () {
  zurückkehren {
   ausblenden: wahr
  }
 },
 Methoden:{
  show2: Funktion (ev1) {
   Alarm(2);
  }
 }
}
</Skript>
 
<!-- Fügen Sie das Attribut „scoped“ hinzu, um CSS nur auf diese Komponente zu beschränken -->
<Stilbereich>
 
</Stil>

8. Andere Ereignismodifikatoren

Die Verwendung ist die gleiche, deshalb werde ich sie nicht wiederholen.

.erfassen

.selbst

.einmal

<!-- Verhindert die weitere Ausbreitung des Klickereignisses -->
<a v-on:click.stop="machDas"></a>
<!-- Beim Senden des Ereignisses wird die Seite nicht mehr neu geladen -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- Modifikatoren können verkettet werden -->
<a v-on:click.stop.prevent="machDas"></a>
<!-- nur Modifikatoren -->
<form v-on:submit.prevent></form>
<!-- Beim Hinzufügen von Ereignis-Listenern den Ereigniserfassungsmodus verwenden -->
<!-- Das heißt, die vom Element selbst ausgelösten Ereignisse werden hier zuerst verarbeitet und dann zur Verarbeitung an die internen Elemente übergeben-->
<div v-on: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 v-on:click.self="machDas">...</div>

Bei der Verwendung von Modifikatoren ist die Reihenfolge wichtig; der entsprechende Code wird in der gleichen Reihenfolge generiert. Daher verhindert die Verwendung von @click.prevent.self alle Klicks, während @click.self.prevent nur Klicks auf das Element selbst verhindert.

2.1.4 Hinzugefügt

<!-- Klickereignis wird nur einmal ausgelöst-->
<a v-on:click.once="machDies"></a>

Im Gegensatz zu anderen Modifikatoren, die nur bei nativen DOM-Ereignissen funktionieren, kann der Modifikator .once auch bei benutzerdefinierten Komponentenereignissen verwendet werden. Wenn Sie die Dokumentation zur Komponente noch nicht gelesen haben, machen Sie sich jetzt keine Gedanken darüber.

<!-- das Scroll-Ereignis bricht das Standard-Scroll-Verhalten nicht ab -->
<div v-on:scroll.passive="onScroll">...</div>

Vue bietet für diese Modifikatoren zusätzliche .passive-Modifikatoren, um die mobile Leistung zu verbessern.

Beispielsweise löst der Browser beim Scrollen das Scrollen aus, nachdem das gesamte Ereignis verarbeitet wurde, da der Browser nicht weiß, ob das Ereignis in seiner Verarbeitungsfunktion event.preventDefault () aufgerufen wurde. Der Modifikator .passive wird verwendet, um dem Browser außerdem mitzuteilen, dass das Standardverhalten dieses Ereignisses nicht abgebrochen wird.

Verwenden Sie .passive und .prevent nicht zusammen. Passive Handler können das Standardereignisverhalten nicht verhindern.

Das Obige ist meine persönliche Erfahrung. Ich hoffe, es kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden. Sollten dennoch Fehler oder unvollständige Überlegungen vorliegen, freue ich mich über eine Korrektur.

Das könnte Sie auch interessieren:
  • So übergeben Sie benutzerdefinierte Parameter im Vue Select Change-Ereignis
  • Erläuterung des Beispiels zur Wertübertragung an eine Vue-Custom-Komponente
  • So passen Sie Ereignisparameter in Vue an

<<:  Grafisches Tutorial zum Herunterladen und Installieren von MySQL 5.7 und höher

>>:  So konfigurieren Sie WordPress mit Nginx

Artikel empfehlen

So begrenzen Sie die Anzahl der Datensätze in einer Tabelle in MySQL

Inhaltsverzeichnis 1. Lösung auslösen 2. Partitio...

Detailliertes Tutorial zur Installation und Verwendung von MySQL 8.0.15 unter Windows

In diesem Artikel finden Sie das ausführliche Ins...

SpringBoot integriert Activiti7-Implementierungscode

Nach der offiziellen Veröffentlichung von Activit...

Detaillierte Schritte zur Installation von Anaconda unter Linux (Ubuntu 18.04)

Anaconda ist die beliebteste Python-Plattform für...

Detailliertes Tutorial zur Installation und Konfiguration von MySql5.7 unter Ubuntu 20.04

Inhaltsverzeichnis 1. Änderung der Ubuntu-Quelle ...

Implementierung des Vue-Top-Tags-Browserverlaufs

Inhaltsverzeichnis Unsinn Implementierte Funktion...

Beispielcode zum Implementieren eines gleichbreiten Layouts auf verschiedene Arten mithilfe von CSS

Das in diesem Artikel beschriebene gleichbreite L...

Einführung in 10 Hooks in React

Inhaltsverzeichnis Was ist ReactHook? React biete...

Analyse und Lösung des abnormalen Problems beim Laden von JAR in Tomcat

Beschreibung des Phänomens: Das Projekt verwendet...

Einführung und Anwendungsbeispiele von ref und $refs in Vue

Vorwort In JavaScript müssen Sie document.querySe...

Detaillierte Erklärung des Workbench-Beispiels in MySQL

MySQL Workbench – Modellierungs- und Designtool 1...

Lernen Sie die Prinzipien und allgemeinen Operationen von MySQL-Partitionstabellen anhand von Beispielen kennen

1. Bedeutung der Partitionstabelle Eine Partition...

MySql Group By implementiert die Gruppierung mehrerer Felder

Bei täglichen Entwicklungsaufgaben verwenden wir ...

Eine kurze Diskussion über die Synchronisierungslösung zwischen MySQL und Redis Cache

Inhaltsverzeichnis 1. Lösung 1 (UDF) Demo-Fall 2....

Eine einfache Strategie zur ID-Generierung: Implementierung der Generierung einer global eindeutigen ID aus einer MySQL-Tabelle

Es gibt viele Möglichkeiten, eine globale ID zu g...