So implementieren Sie die VueJS-Ereignisüberwachung

In vuejs können Sie die Anweisung „v-on“ verwenden, um die Ereignisüberwachung zu implementieren. Diese Anweisung wird verwendet, um Ereignis-Listener zu binden Etikettenvorlage: Verwenden Sie JavaScript, um den Code festzulegen, der beim Auslösen ausgeführt werden muss.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

Nachdem das Rendern der Vorlage abgeschlossen ist, können die Ereignisbindung und -überwachung durchgeführt werden. Die v-on-Direktive dient zur Überwachung von DOM-Ereignissen und wird normalerweise direkt innerhalb der Vorlage verwendet.

<button v-on:click="say">Say</button>

Methode und Inline-Anweisungsprozessor

Binden Sie die Methode in den Stärkeoptionsattributmethoden über v-on als Ereignishandler. Der v-on: Post-Parameter akzeptiert alle nativen Ereignisnamen.

    <button v-on:click = "say">Say</button>
    var vm = new Vue({
        el: "#app",
        data: {
            msg:"hello vue.js"
        },
        methods:{
            say:function(){
                alert(this.msg);
            }
        }
    })

v-on-Abkürzung: @. @click="say"

v-on unterstützt Inline-JavaScript-Anweisungen, jedoch nur eine Anweisung.

    <button v-on:click = "sayFrom(&#39;from param&#39;)">Say</button>
    var vm = new Vue({
        el: "#app",
        data: {
            msg:"hello vue.js"
        },
        methods:{
            sayFrom:function(from){
                alert(this.msg + &#39;&#39; + from);
            }
        }
    })

Wenn Sie Methoden, Funktionen und Inline-JavaScript direkt an Räume binden, müssen Sie möglicherweise das native DOM-Ereignisobjekt abrufen.

   <button v-on:click = "showEvent">Event</button> 
   <button v-on:click = "showEvent($event)">event</button>
   <button v-on:click = "showEvent()">Say</button>  //这样写获取不到event
    var vm = new Vue({
        el: "#app",
        methods:{
            showEvent:function(event){
                console.log(event);
            }
        }
    })

Sie können mehrere identische Ereignisfunktionen über v-on an dasselbe Element binden, und die Ausführungsreihenfolge ist sequenzielle Ausführung . .

Ereignismodifikatoren

1.stop: Aufruf von event.stopPropagation().

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>

2. .prevent: Aufruf von event.preventDefault().

    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"></form>
    <!-- 修饰符可以串联  -->
    <a v-on:click.stop.prevent="doThat"></a>
    <!-- 只有修饰符 -->
    <form v-on:submit.prevent></form>

3 Hörer.

  <!-- 添加事件侦听器时使用事件捕获模式 -->
    <div v-on:click.capture="doThis">...</div>

4.self: Der Rückruf wird nur ausgelöst, wenn das Ereignis vom Listening-Element selbst ausgelöst wird.

   <!-- 只当事件在该元素本身（比如不是子元素）触发时触发回调 -->
    <div v-on:click.self="doThat">...</div>

5.once:

 <!-- 点击事件将只会触发一次 -->
    <a v-on:click.once="doThis"></a>

Bei der Verwendung von Modifikatoren ist die Reihenfolge wichtig, die entsprechenden Codes werden in derselben Reihenfolge generiert. Daher verhindert die Verwendung von @click.prevent.self alle Klicks, während @click.self.prevent nur Klicks auf das Element verhindert.

   //例子
    var vm = new Vue({
        el: '#app',
        methods:{
            saySelf(msg) {
                alert(msg);
            }
        }
    });
    //HTML代码
    <div v-on:click="say(&#39;click from inner&#39;)" v-on:click.self="saySelf(&#39;click from self&#39;)">
        <button v-on:click="saySelf(&#39;button click&#39;)">button</button>
        <button v-on:click.stop="saySelf(&#39;just button click&#39;)">button</button>
    </div>

Schlüsselwertmodifikator

Beim Abhören von Tastaturereignissen müssen Sie allgemeine Schlüsselwerte überwachen.

    <input v-on:keyup.13 = "submit" />  //监听input的输入，当输入回车时触发submit函数。

Es ist schwierig, sich alle KeyCide zu merken, daher stellt Vue Aliase für die am häufigsten verwendeten Schlüssel bereit.

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

.enter
.tab
.delete (erfasst die Tasten „Löschen“ und „Rücktaste“)
.esc
.space
.up
.down
.left
.right
Kann über die globale Konfiguration aufgerufen werden. keyCodes-Objekt Benutzerdefinierter Schlüsselwertmodifikator-Alias

    // 可以使用 v-on:keyup.f1
    Vue.config.keyCodes.f1 = 112

Unterschiede zur herkömmlichen Ereignisbindung

1 Ereignisse müssen nicht manuell verwaltet werden. Wenn das ViewModel zerstört wird, werden alle Event-Handler automatisch gelöscht, was uns davon befreit, DOM-gebundene Ereignisse abzurufen und sie dann unter bestimmten Umständen zu entbinden.

2. Entkopplung. ViewModel-Code ist rein logischer Code und hat nichts mit DOM zu tun, was für uns hilfreich ist, um automatisierte Testfälle zu schreiben.

vue.extend()

Um Unterkomponenten wiederzuverwenden, stellt vue.js die Methode Vue.extend(options) bereit, die eine „Unterklasse“ des grundlegenden Vue-Konstruktors und Parameteroptionsobjekts erstellt und direkt deklariert die Vue-Instanz Die Parameterobjekte sind grundsätzlich gleich.

    var Child = Vue.extend({
        teplate:'#child', //不同的是，el和data选项需要通过函数返回值赋值，避免多个组件实例共用一个数据
        data:function(){
            return {
                ...
            }
        },
        ...
    })
    Vue.component('child',child)  //全局注册子组件
    <child ...></child>  //子组件在其他组件内的调用方式

Verwandte Empfehlungen: „

vue.js Tutorial“

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die VueJS-Ereignisüberwachung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!