Bagaimana untuk melaksanakan pemantauan acara vuejs

Dalam vuejs, anda boleh menggunakan arahan "v-on" untuk melaksanakan pemantauan acara ini digunakan untuk mengikat pendengar acara anda hanya perlu menambah "v-on: event parameter=" event templat label Untuk memproses pernyataan fungsi "", gunakan JavaScript untuk menetapkan kod yang perlu dilaksanakan apabila dicetuskan.

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

Selepas pemaparan templat selesai, pengikatan dan pemantauan acara boleh dilakukan. Arahan v-on digunakan untuk memantau acara DOM dan biasanya digunakan secara langsung dalam templat.

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

Kaedah dan pemproses pernyataan sebaris

Ikat kaedah dalam kaedah atribut pilihan kekuatan melalui v-on sebagai Pengendali peristiwa, v-on: Parameter pasca menerima semua nama acara asli.

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

singkatan v-on: @. @click="say"

v-on menyokong pernyataan JavaScript sebaris, tetapi hanya satu pernyataan.

    <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);
            }
        }
    })

Apabila kaedah mengikat terus berfungsi dan JavaScript sebaris ke bilik, anda mungkin perlu mendapatkan objek acara DOM asli

   <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);
            }
        }
    })

Elemen yang sama boleh diikat melalui v-on Define berbilang fungsi acara yang sama, dan perintah pelaksanaan adalah pelaksanaan berurutan.

Pengubah suai acara

1 .berhenti: Panggilan acara.stopPropagation().

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

2. mencegah: Panggil acara.preventDefault().

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

3 .caputure: Gunakan mod tangkapan untuk menambah pendengar acara.

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

4 .self: Panggilan balik hanya dicetuskan apabila peristiwa dicetuskan daripada elemen pendengaran itu sendiri.

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

5 .sekali:

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

Apabila menggunakan pengubah suai, kod yang sepadan akan dihasilkan dalam susunan yang sama. Oleh itu, menggunakan @click.prevent.self akan menghalang semua klik, manakala @click.self.prevent hanya akan menghalang klik pada elemen.

   //例子
    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>

Pengubah nilai utama

Apabila mendengar acara papan kekunci, nilai kunci biasa perlu dipantau.

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

Sukar untuk mengingati semua keyCide, jadi Vue menyediakan alias untuk kunci yang paling biasa digunakan.

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

.masukkan
.tab
.padam (menangkap kekunci "padam" dan "ruang belakang")
.esc
.ruang
.atas
.bawah
.kiri
.kanan
Anda boleh menyesuaikan alias pengubah suai nilai kunci melalui objek config.keyCodes global :

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

Perbezaan daripada pengikatan acara tradisional

1. Apabila ViewModel dimusnahkan, semua pengendali acara dipadamkan secara automatik, membebaskan kami daripada mendapatkan acara terikat DOM dan kemudian menyahikatnya dalam keadaan tertentu.

2. Menyahganding. Kod ViewModel ialah kod logik semata-mata dan tiada kaitan dengan DOM, yang membantu kami menulis kes ujian automatik.

vue.extend()

Untuk menggunakan semula subkomponen, vue.js menyediakan kaedah Vue.extend(options), yang mencipta pembina Vue asas " Subkelas", objek pilihan parameter pada asasnya sama dengan objek parameter contoh Vue yang diisytiharkan secara langsung.

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

Cadangan berkaitan: "tutorial vue.js"

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan pemantauan acara vuejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!