Vue3 Ereignisbehandlung

Wir können die v-on-Direktive verwenden, um DOM-Ereignisse abzuhören und JavaScript-Code auszuführen.

v-onDie Direktive kann als@Symbol abgekürzt werden.

Syntaxformat:

v-on:click="methodName"
oder 
@click="methodName"

v-on

<div id="app"> <button @click="counter += 1">1 hinzufügen</button> <p>Diese Schaltfläche wurde {{ counter }} mal angeklickt.</p> </div> <script> const app = { data() { return { counter: 0 } } } Vue.createApp(app).mount('#app') </script>

Ausprobieren »

Normalerweise müssen wir eine Methode verwenden, um eine JavaScript-Methode aufzurufen.

v-on kann eine definierte Methode zum Aufrufen akzeptieren.

v-on

<div id="app"> <!--`greet` ist der unten definierte Methodenname--> <button @click="greet">Klick mich</button> </div> <script>const app = { data() { return { name: 'Example' } }, methods: { greet(event) { // `methods` innerhalb von `this` verweist auf currentEventsExample alert('Hello ' + this.name + '!') // `event` ist das native DOM-Event if (event) { alert(event.target.tagName) } } } } Vue.createApp(app).mount('#app')</script>

Ausprobieren »

Neben der direkten Bindung an eine Methode können Sie auch Inline-JavaScript-Anweisungen verwenden:

v-on

<div id="app"> <button @click="say('hi')">Sag Hallo</button> <button @click="say('what')">Sag was</button> </div> <script> const app = { data() { }, methods: { say(message) { alert(message) } } } Vue.createApp(app).mount('#app') </script>

Ausprobieren »

Event-Handler können mehrere Methoden enthalten, die durch den Komma-Operator getrennt werden:

v-on

<div id="app"> <!--Sowohl one() als auch two() werden beim Button-Klick-Ereignis ausgeführt--> <button @click="one($event), two($event)">Klick mich</button> </div> <script>const app = { data() { }, methods: { one(event) { alert("firstEvent Handlingdevice逻辑...") }, two(event) { alert("No.二itemsEvent Handlingdevice逻辑...") } } } Vue.createApp(app).mount('#app')</script>

Ausprobieren »

Ereignismodifikatoren

Vue.js bietet für v-on Event-Modifikatoren, um DOM-Ereignisdetails wie event.preventDefault() oder event.stopPropagation() zu behandeln.

Vue.js ruft durch das mit einem Punkt.dargestellte Direktiven-Suffix Modifikatoren auf.

  • .stop- Bubbling stoppen
  • .prevent- Standardereignis verhindern
  • .capture- Capturing stoppen
  • .self- Nur auf Ereignisse hören, die auf diesem Element ausgelöst werden
  • .once- Nur einmal auslösen
  • .left- Linksklick-Ereignis
  • .right- Rechtsklick-Ereignis
  • .middle- Mittleres Mausrad-Ereignis
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>

<!-- click 事件只能点击一次，2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>

Tastenmodifikatoren

Vue ermöglicht das Hinzufügen von Tastenmodifikatoren zu v-on beim Abhören von Tastaturereignissen:

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">

Es ist schwierig, sich alle keyCodes zu merken, daher bietet Vue Aliase für die am häufigsten verwendeten Tasten:

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

Alle Tasten-Aliase:

  • .enter
  • .tab
  • .delete(Erfasst die Tasten "Delete" und "Backspace")
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right

System-Modifikatortasten:

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

Maustasten-Modifikatoren:

  • .left
  • .right
  • .middle

Beispiel

<p><!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Etwas tun</div>

.exact-Modifikator

.exactDer Modifikator ermöglicht es Ihnen, Ereignisse zu steuern, die durch eine exakte Kombination von Systemmodifikatoren ausgelöst werden.

Beispiel

<!-- Wird auch ausgelöst, wenn zusätzlich Alt oder Shift gedrückt werden -->
<button @click.ctrl="onClick">A</button>

<!-- Wird genau dann ausgelöst, wenn Ctrl gedrückt ist -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- Wird nur ausgelöst, wenn keine Systemmodifikatoren gedrückt sind -->
<button @click.exact="onClick">A</button>
Weitere Erweiterungen