Vue.JS Einführungs-Tutorial zur Ereignisüberwachung

Sie können die v-on-Direktive verwenden, um DOM-Ereignisse zu binden und abzuhören. Der Inhalt der Bindung kann eine Methode für die aktuelle Instanz (es müssen keine Klammern gefolgt werden) oder ein Inline-Ausdruck sein. Wenn eine Methode bereitgestellt wird, wird das native DOM-Ereignis als erster Parameter übergeben, und dieses Ereignis verfügt über das targetVM-Attribut, das auf das entsprechende ViewModel verweist, das das Ereignis ausgelöst hat:

<div id="demo">
 <a v-on="click: onClick">触发一个方法函数</a>
 <a v-on="click: n++">触发一个表达式</a>
</div>

new Vue({
el: '#demo',
data: {
 n: 0
},
methods: {
 onClick: function (e) {
 console.log(e.targetVM.n);
 console.log(e.target.tagName);// "A"
 console.log(e.targetVM === this);// true
 }
}
});

Ausdruck ausführen

targetVM ist nützlich, wenn v-on in v-repeat verwendet wird, da v-repeat eine große Anzahl untergeordneter ViewModels erstellt. Es ist jedoch bequemer und intuitiver, den Alias ​​zu übergeben, der das aktuelle ViewModel-Datenobjekt darstellt, indem der Ausdruck ausgeführt wird:

<ul id="list">
 <li v-repeat="item in items" v-on="click: toggle(item)">
 {{item.text}}
 </li>
 <button v-on="click: submit(&#39;hello!&#39;, $event)">Submit</button>
</ul>

new Vue({
el: '#list',
data: {
 items: [
 { text: 'one', done: true },
 { text: 'two', done: false }
 ]
},
methods: {
 toggle: function (item) {
 console.info(item.done);
 item.done = !item.done;
 console.info(item.done);
 },
 submit: function (msg, e) {
 e.stopPropagation();
 console.info(msg + ' submit is called!');
 }
}
})

Wenn Sie im Ausdrucksereignis auf das ursprüngliche DOM zugreifen möchten, müssen Sie kann einen $event-Parameter daran übergeben.

Tastenfilter
Bei der Überwachung von Tastaturereignissen müssen wir häufig häufig verwendete Tastencodes ermitteln. Vue.js bietet einen speziellen Filter, der nur mit der v-on-Direktive: key verwendet werden kann. Es empfängt einen Parameter, der den Schlüsselcode darstellt, und vervollständigt die Beurteilung:

<!-- 只有当 keyCode 等于 13 时才调用方法 -->
<input v-on="keyup:mySubmit | key 13">

Das System verfügt über viele Standardwerte, die verwendet werden können, zum Beispiel:

<!-- 效果同上 -->
<input v-on="keyup:submit | key &#39;enter&#39;">

Der Standardwert ist: Enter Tab, Löschen, Esc, Oben, Unten, Links, Rechts, Leertaste

Warum Listener in HTML verwendet werden
Sie werden vielleicht feststellen, dass die gesamte Art und Weise des Event-Listenings dem traditionellen Konzept der „Trennung von Belangen“ zuwiderläuft. Machen Sie sich keine Sorgen, da alle Vue.js-Ereignishandler und -Ausdrücke strikt an das ViewModel der aktuellen Ansicht gebunden sind, wird dies keine Wartungsschwierigkeiten verursachen. Tatsächlich hat die Verwendung von v-on noch weitere Vorteile:

Es erleichtert das Auffinden der entsprechenden Methodenimplementierung im JS-Code in der HTML-Vorlage.
Da Sie Ereignisse in JS nicht manuell binden müssen, kann Ihr ViewModel-Code eine sehr reine Logik sein, die vollständig vom DOM entkoppelt ist. Dies wird einfacher zu testen sein.
Wenn ein ViewModel zerstört wird, werden alle Ereignis-Listener automatisch entfernt. Sie müssen sich nicht selbst um die Reinigung kümmern.

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er wird für das Studium aller hilfreich sein