Die 13 am häufigsten in Interviews gestellten Fragen zu Vue-Modifikatoren

<Eingabetyp="Text" v-model.lazy="Wert">
<div>{{Wert}}</div>

Daten() {
 zurückkehren {
  Wert: '111111'
 }
}

<Eingabetyp="Text" v-model.trim="Wert">
<div>{{Wert}}</div>

Daten() {
 zurückkehren {
  Wert: '111111'
 }
}

<Eingabetyp="Text" v-Modell.Nummer="Wert">
<div>{{Wert}}</div>

Daten() {
 zurückkehren {
  Wert: '111111'
 }
}

<div @click="clickEvent(2)" style="Breite:300px;Höhe:100px;Hintergrund:rot">
    <button @click.stop="clickEvent(1)">Klick</button>
</div>

Methoden: {
 Klickereignis(Nummer) {
  // Klicken Sie ohne Unterbrechung auf die Schaltfläche, um 1 2 auszugeben.
  //Stopp hinzugefügt und auf die Schaltfläche geklickt, um 1 auszugeben
  console.log(Nummer)
 }
}

<div @click.capture="clickEvent(2)" style="Breite:300px;Höhe:100px;Hintergrund:rot">
    <button @click="clickEvent(1)">Klick</button>
</div>

Methoden: {
 Klickereignis(Nummer) {
  // Ohne Erfassung, klicken Sie auf die Schaltfläche zur Ausgabe 1 2
  // Capture hinzugefügt und auf die Schaltfläche zur Ausgabe geklickt 2 1
  console.log(Nummer)
 }
}

<div @click.self="clickEvent(2)" style="Breite:300px;Höhe:100px;Hintergrund:rot">
    <button @click="clickEvent(1)">Klick</button>
</div>
Methoden: {
 Klickereignis(Nummer) {
  // Ohne self hinzuzufügen, klicken Sie auf die Schaltfläche, um 1 2 auszugeben
  // Selbst hinzugefügt. Durch Klicken auf die Schaltfläche wird 1 ausgegeben. Durch Klicken auf das Div wird 2 ausgegeben.
  console.log(Nummer)
 }
}

<div @click.once="clickEvent(2)" style="Breite:300px;Höhe:100px;Hintergrund:rot">
    <button @click="clickEvent(1)">Klick</button>
</div>

Methoden: {
 Klickereignis(Nummer) {
  // Ohne einmal, klicken Sie mehrmals auf die Schaltfläche, um 1 auszugeben
  // Einmal hinzugefügt. Wenn Sie die Schaltfläche mehrmals anklicken, wird nur einmal 1 ausgegeben. 
  console.log(Nummer)
 }
}

<a href="#" rel="external nofollow" @click.prevent="clickEvent(1)">Klick mich</a>

Methoden: {
 Klickereignis(Nummer) {
  // Ohne zu verhindern, klicke auf Label a um zuerst zu springen und dann 1 auszugeben
  // Verhinderung hinzugefügt, Klick auf Label a führt nicht zum Springen, sondern gibt nur 1 aus
  console.log(Nummer)
 }
}

<Meine Komponente @click="shout(3)"></Meine Komponente>

<Meine Komponente @click.native="shout(3)"></Meine Komponente>

<button @click.middle="clickEvent(1)" @click.left="clickEvent(2)" @click.right="clickEvent(3)">Klick mich</button>

Methoden: {
 // Klicken Sie auf die mittlere Schaltfläche, um 1 auszugeben
 // Klicken Sie auf die linke Schaltfläche, um 2 auszugeben
 // Rechtsklick zur Ausgabe 3
 Klickereignis(Nummer) {
  console.log(Nummer)
 }
}

<div @scroll.passive="onScroll">...</div>

Ohne Camel ViewBox wird es als Viewbox erkannt
<svg :viewBox="Ansichtsbox"></svg>

Erst nach dem Hinzufügen von canmel viewBox wird es als viewBox erkannt
<svg :viewBox.camel="viewBox"></svg>

<Kinder :foo="bar" @update:foo="val => bar = val"></Kinder>

dies.$emit('update:foo', neuerWert)

<Kinder :foo.sync="bar"></Kinder>

dies.$emit('update:foo', neuerWert)

<Eingabetyp="text" @keyup="schreien(4)">

<Eingabetyp="text" @keyup.keyCode="schreien(4)">

//Gewöhnliche Taste.Eingabe 
.Tab
.delete //(erfasst die Tasten „Entf“ und „Rücktaste“)
.Raum
.esc
.hoch
.runter
.links
.Rechts
//Systemmodifikatortaste.ctrl
.alt
.Meta
.Schicht

<Eingabetyp="text" @keyup.ctrl="schreien(4)">

<Eingabetyp="text" @mousedown.ctrl.="schreien(4)">

<Eingabetyp="Text" @