Ein Artikel, in dem einige Vue-Ereignismodifikatoren kurz analysiert werden

Dieser Artikel vermittelt Ihnen relevantes Wissen über das Frontend. Es geht hauptsächlich um einige Ereignismodifikatoren in Vue. Ich hoffe, dass es für alle hilfreich ist.

Ich bin während der Projektentwicklung auf die Tastaturereignisse von vue gestoßen:

<div class="query-form-left">
   <i-Form :model="formItem" inline>
       <form-item  >
           <i-input style="width:200px"  placeholder="名称" v-model="formItem.name" @keyup.enter.native="queryTableDataByAction"></i-Input>
       </form-item>
       <form-item>
           <i-input placeholder="负责人" v-model="formItem.ownerUserName" @keyup.enter.native="queryTableDataByAction"></i-Input>
       </form-item>
       <form-item>    
           <i-Button type="ghost" @click="queryTableDataByAction">查询</i-Button>
       </form-item>
   </i-Form></div>

Im Codeausschnitt wurde festgestellt, dass es immer gibt. Naitvie nach dem Tastaturereignis. Ich habe den Grund zunächst nicht verstanden und festgestellt, dass Vue beispielsweise einen eigenen Ereigniszustellungsmechanismus verwendet /code> werden von vue gekapselt. Wenn Sie ein natives Ereignis im Stammelement einer Komponente abhören möchten, müssen Sie den v-on-Modifikator <code>.native.naitvie，刚开始并不明白是什么原因，查证一番，发现是因为vue 使用的是一套自己的事件传递机制，例如 @click 等事件是经过 vue 封装的。如果想在某个组件的根元素上监听一个原生事件，就要使用 v-on 的修饰符 .native

在上面的代码片段中@keyup.enter 是写在一个封装好的组件上（项目中用的的 iView组件 ），因此，在一些实际上处理 DOM 原生事件的上需要添加额外的标识符.native，如果是直接在input上使用就不需要添加了。

此外，vue 提供了很多的 修饰符。

1、事件修饰符

.stop 阻止单击事件继续传播
.prevent 提交事件不再重载页面
.capture 添加事件监听器时使用事件捕获模式， 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数 ，即事件不是从内部元素触发的
.once 点击事件将只会触发一次
.passive 滚动事件的默认行为 (即滚动行为) 将会立即触发 ，包含 event.preventDefault() 的情况

注：修饰符可以串联 ,使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 @click.prevent.self 会阻止所有的点击，而 @click.self.prevent 只会阻止对元素自身的点击。

2、按键修饰符

可以直接用keycode，但是较难记全，所以Vue提供 了常用的按键别名

.enter 回车键
.tab 制表空格键
.delete (捕获“删除”和“退格”键)
.esc 退出
.space 空格键
.up 向上键
.down 向下键
.left 向左键
.right 向右键

3、系统修饰键

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

.ctrl .alt .shift .meta

im obigen Code-Snippet @keyup.enter ist auf einer gekapselten Komponente geschrieben (der im Projekt verwendeten <a href="https://www.php.cn/link/7cacb56f54aec341efbcbab4c267db28">iView-Komponente <p>), sodass in einigen Fällen tatsächlich das DOM An verarbeitet wird Der zusätzliche Bezeichner <code>.native muss dem nativen Ereignis hinzugefügt werden. Wenn er direkt auf input verwendet wird, ist es nicht erforderlich, ihn hinzuzufügen.

Darüber hinaus bietet vue viele Modifikatoren.

1. Ereignismodifikatoren

.stop verhindert, dass sich das Klickereignis weiter ausbreitet .prevent Senden Sie das Ereignis und laden Sie es nicht mehr neu page.capture Verwenden Sie beim Hinzufügen von Ereignis-Listenern den Ereigniserfassungsmodus, d. h. vom Element selbst ausgelöste Ereignisse werden hier zuerst verarbeitet und dann zur Verarbeitung an interne Elemente übergeben.self Nur wenn Die Handlerfunktion wird ausgelöst, wenn event.target das aktuelle Element selbst ist, d. h. das Ereignis wird nicht von einem internen Element ausgelöst<path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><code>.once Das Klickereignis wird nur einmal ausgelöst .passive Das Scroll-Ereignis. Das Standardverhalten (d. h. Scrollverhalten) wird sofort ausgelöst, einschließlich des Falls von event.preventDefault()

Hinweis:Modifikatoren können verkettet werden Bei der Verwendung von Modifikatoren ist die Reihenfolge wichtig; der entsprechende Code wird in derselben 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. Tastenmodifikatoren

Sie können den Tastencode direkt verwenden, aber es ist schwierig, sich alles zu merken, daher stellt Vue häufig verwendete Tastenaliase zur Verfügung🎜🎜.enter Eingabetaste 🎜 .tab Tabulatortaste 🎜.delete (erfasst die Tasten „Löschen“ und „Rücktaste“) 🎜.esc Beenden 🎜 . Leertaste Leertaste 🎜.up Aufwärtstaste 🎜.ab Abwärtstaste 🎜.left Linkstaste 🎜 .right Rechte Taste🎜🎜<strong>3. Systemmodifikatortasten</strong>🎜🎜Mit den folgenden Modifikatoren können Sie einen Listener implementieren, der Maus- oder Tastaturereignisse nur dann auslöst, wenn die entsprechende Taste gedrückt wird. 🎜🎜<code>.ctrl .alt .shift .meta🎜🎜Hier sind nur einige der Vue-Ereignisse aufgeführt. Modifikatoren Eine ausführlichere Einführung in Modifikatoren finden Sie in der offiziellen Vue-Dokumentation )🎜🎜🎜🎜🎜🎜🎜 🎜🎜🎜Empfohlenes Lernen: „🎜vue.js Video-Tutorial🎜“🎜🎜

Das obige ist der detaillierte Inhalt vonEin Artikel, in dem einige Vue-Ereignismodifikatoren kurz analysiert werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!