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

Das Laufschrift-Tag in HTML erzielt einen nahtlosen Laufschrift-Effekt

Das <marquee>-Tag ist ein Tag, das paarweis...

Detaillierte Erläuterung der Implementierung gemeinsam genutzter Module in Angular-Projekten

Inhaltsverzeichnis 1. Gemeinsam genutztes CommonM...

Vollständige Schritte zum Bereitstellen einer Front-End- und Back-End-getrennten Nginx-Konfiguration

Vorwort Es ist ein Klischee. Hier werde ich über ...

Vollständige MySQL-Sicherung und schnelle Wiederherstellungsmethoden

Ein einfaches MySQL-Vollsicherungsskript, das die...

Der Prozess der Installation von Docker auf Windows Server 2016 und die aufgetretenen Probleme

Voraussetzungen Um Container auf Windows Server a...

Perfekte Lösung für das Problem des Verbindungsfehlers nach der MySQL-Client-Autorisierung

Stellen Sie die MySQL-Umgebung lokal bereit (192....

Tutorial zu HTML-Formular-Tags (2):

Dieses Tutorial stellt die Anwendung verschiedene...

Drei Möglichkeiten zum Konfigurieren einer JNDI-Datenquelle in Tomcat

In meiner früheren Arbeit war der Entwicklungsser...

Beispielanalyse der MySQL-Datumsverarbeitungsfunktion

Dieser Artikel stellt hauptsächlich die Beispiela...

So verwenden Sie Nexus, um JAR-Pakete zu privaten Servern hinzuzufügen

Warum müssen wir einen privaten Nexus-Server erst...

So fügen Sie Docker ein Zertifikat hinzu

1. Upgrade-Vorgang: sudo apt-get update Probleme ...

Detaillierte Erklärung der gemischten Vererbung in Vue

Inhaltsverzeichnis Die Auswirkungen der gemischte...

Verstehen Sie die Verwendung des All-Attributs von CSS3

1. Kompatibilität Wie unten dargestellt: Die Komp...

Ausführliche Erklärung zur Docker-Maschine

Unterschiede zwischen Docker und Docker Machine D...

So konvertieren Sie MySQL-Bin-Log-Protokolldateien in SQL-Dateien

mysqlbinlog-Version anzeigen mysqlbinlog -V [--ve...