Der Inhalt dieses Artikels ist eine Einführung in die Methoden und Ereignisse von Vue.j. Er hat einen gewissen Referenzwert. Ich hoffe, dass er für Sie hilfreich ist.
Methoden und Ereignisse
Dem von @click aufgerufenen Methodennamen müssen keine Klammern () folgen, wenn die Methode Parameter hat, das native Ereignisobjekt wird standardmäßig übergeben.
Dieses Design der Überwachung von Ereignissen auf HTML-Elementen scheint DOM und JavaScript eng zu koppeln und damit das Prinzip der Trennung zu verletzen, aber tatsächlich ist es genau das Gegenteil. Da Sie über HTML wissen können, welche Methode aufgerufen wird, wird die Logik vom DOM entkoppelt und die Wartung erleichtert.
Das Wichtigste ist, dass bei der Zerstörung des ViewModel alle Event-Handler automatisch zerstört werden, ohne dass Sie sich selbst darum kümmern müssen.
Vue bietet eine spezielle Variable $event für den Zugriff auf native DOM-Ereignisse.
<div id="app"> <a href="https://www.apple.com/" @click="handleClick('禁止打开',$event)">打开链接</a> </div>
Modifikatoren
Vue unterstützt die folgenden Modifikatoren:
.stop
.prevent
.capture
.self.once
Die spezifische Verwendung ist wie folgt:
| 修饰符功能 | 使用示例 |
|---|---|
| 阻止单击事件冒泡 | <a @click.stop="handle"></a> |
| 提交事件不再重载页面 | <form @submit.prevent="handle"></form> |
| 修饰符可以串联 | <a @click.stop.prevent="handle"></a> |
| 只有修饰符 | <form @submit.prevent></form> |
| 添加事件侦听器时使用事件捕获模式 | <p @click.capture="handle">...</p> |
| 只当事件在该元素本身（不是子元素）触发时执行回调 | <p @click.self="handle">...</p> |
| 只触发一次，组件同样适用 | <p @click.once="handle">...</p> |
Beim Lauschen auf Tastaturereignisse für Formularelemente können Sie auch Tastenmodifikatoren verwenden.
| 修饰符功能 | 使用示例 |
|---|---|
只有在keyCode是13时调用vm.submit()
|
<input @keyup.13="submit"> |
Zusätzlich zu einem bestimmten Schlüsselcode stellt Vue auch einige Verknüpfungsnamen bereit:
.enter
.tab
.delete ( Restock " Löschen“ und „Rücktaste“)
.esc
.space
.up
.down
.left
.right
Diese Tastenmodifikatoren können auch in Kombination oder mit der Maus verwendet werden:
.ctrl
.alt
. Shift
.meta
Dieser Artikel ist hier drüben. Weitere Kurse zu vue.js finden Sie in der Spalte JavaScript auf der chinesischen Website mit Video-Tutorials! ! !
Das obige ist der detaillierte Inhalt vonEinführung in die Methoden und Ereignisse von Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
