Mari kita bincangkan tentang arahan pemantauan acara Vue secara v-on

Dalam pembangunan bahagian hadapan, kita perlu kerap berinteraksi dengan pengguna Pada masa ini, kita mesti memantau acara pengguna, seperti klik, seret, acara papan kekunci, dll. Bagaimana untuk memantau acara dalam Vue? Gunakan perintah v-on. Artikel berikut akan membawa anda melalui arahan pemantauan acara v-on saya harap ia akan membantu anda!

pengenalan arahan v-on

• Fungsi: mengikat Pendengar acara yang ditentukan

• Singkatan: @

• Dijangka: Fungsi (kaedah) | Pernyataan Sebaris (ungkapan dalaman) | >

• Parameter: acara

Ikat pendengar acara dalam Vue Jenis acara ditentukan oleh parameter; pernyataan sebaris, yang boleh ditinggalkan jika tiada pengubah suai. (Belajar perkongsian video:

tutorial video vue)

Bermula dari

v-on juga menyokong mengikat objek pasangan nilai kunci acara/pendengar tanpa parameter. Ambil perhatian bahawa apabila menggunakan sintaks objek, tiada pengubah suai disokong. v2.4.0

Apabila digunakan pada elemen biasa, ia hanya boleh mendengar acara DOM asli. Apabila digunakan pada komponen elemen tersuai, anda juga boleh mendengar peristiwa tersuai yang dicetuskan oleh komponen anak.

Apabila mendengar acara DOM asli, kaedah tersebut mengambil peristiwa sebagai satu-satunya parameter. Jika menggunakan pernyataan sebaris, pernyataan itu boleh mengakses atribut $event: v-on:click="handle('ok', $event)".

Mari kita lihat contoh mudah dahulu

<!-- Template -->
<div id="app">
    <h1 v-on:click="clickMe">点击我</h1>   
</div>

// JavaScript
var app = new Vue({
    el: &#39;#app&#39;,
    methods: {
        clickMe: function() {
            alert("点击我，我就出来了!(^_^)")
        }
    },
    data: {
    }
})

Kesan yang anda lihat adalah seperti berikut:

Dalam templat Vue, kami Gunakan

, mengikat acara v-on (click), dan kemudian mengikat acara v-on:click ke acara click ini. Dalam Vue, kami biasanya meletakkan clickMe ini dalam clickMe, yang bermaksud fungsi methods: {} ditulis dalam clickMe. methods

Melihat

, ia kelihatan sangat serupa dengan v-on:click="clickMe" dalam HTML. Jika dilihat dari rupa, kaedah penulisan mereka berbeza, tetapi hasilnya sama. Dalam Vue, kita juga boleh menggunakan onclock="clickMe" dan bukannya @click. Kemudian mereka memainkan peranan yang sama. v-on:click

Dalam Vue, sebagai tambahan kepada contoh di atas, terdapat juga kaedah penggunaan berikut untuk

: v-on

<!-- 方法处理器 -->
<button v-on:click="clickMe"></button>

<!-- 对象语法 （v2.4.0版本以上才支持） -->
<button v-on="{ mousedown: doThis, mouseup: doThat}"></button>

<!-- 内联语句 -->
<button v-on:click="doThat(&#39;Hello&#39;, $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为， 没有表达式 -->
<form @submit.prevent></form>

<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符， 键别名 -->
<input @keyup.13="onEnter" />

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

Mendengar acara tersuai pada komponen kanak-kanak (Pengendali acara akan dipanggil apabila subkomponen mencetuskan

): my-event

<my-component @my-event="handleThis"></my-component>
<!-- 内联语句 -->
<my-component @my-event="handleThis(123, $event)"></my-component>
<!-- 组件中的原生事件 -->
<my-component @click.native="onClick"></my-component>

Daripada contoh mudah di atas, anda boleh melihat bahawa Vue datang dengan beberapa pengubah dalam proses pemprosesan acara:

• : Call event.stopPropagation().stop

• : Call event.preventDefault().prevent

• : Gunakan mod tangkapan apabila menambah pendengar acara .capture

• : Hanya apabila peristiwa dicetuskan daripada elemen itu sendiri yang mana pendengar terikat Cetuskan panggil balik .self

• : Cetuskan panggilan balik hanya apabila peristiwa dicetuskan daripada kekunci tertentu .{keyCode | keyAlias}

• : Dengar elemen akar komponen Peristiwa asli .native

• : hanya mencetuskan panggilan balik sekali .once

• : hanya mencetus apabila butang kiri tetikus diklik, (v2 .2.0 sahaja) .left

• : Dicetuskan hanya apabila butang kanan tetikus diklik, (v2.2.0 sahaja) .right

• : Dicetuskan hanya apabila butang tengah tetikus diklik, (tersedia dalam v2.2.0) .middle

• : Tambah pendengar dalam mod .passive, (tersedia dalam v2.3.0 ){passive: true}

Tapak web rasmi Vue mempunyai pengenalan terperinci kepada pemprosesan acara dan acara tersuai komponen. Jika anda berminat, anda boleh melihat kandungan yang sepadan:

• Pengendali acara

• Acara penyesuaian komponen

contoh v-on

Jom buat kesan mudah iaitu kaunter Kesannya seperti berikut:

Kesan ini sangat mudah Klik

untuk menambah nombor, dan klik untuk mengurangkan nombor. -

Dalam Vue, templat kami mempunyai tiga elemen, dua butang dan bekas yang memaparkan nombor Butang pertama melakukan pengiraan penambahan dan butang kedua melakukan pengiraan tolak. Struktur ringkas kelihatan seperti ini:

<div id="app">
    <button v-on:click="increase">+</button>
    <span>{{ count }}</span>
    <button v-on:click="reduce">-</button>
</div>

两个按钮上都绑定了一个click事件，点击按钮分别触发increase和reduce两个函数，前者做加法，后者做减法。另外一个元素中我们有一个值{{ count }}。每次点击按钮这个{{ count }}都会做相应的变化。

模板有了之后，需要添加对应的功能。

let app = new Vue({
    el: '#app',
    methods: {
        increase: function() {
            this.count++
        },
        reduce: function() {
            this.count--
        }
    },
    data: {
        count: 0
    }
})

在Vue中，我们在methods中声明了两个函数，分别是increase（加法）和reduce（减法）。另外需要在数据源中声明count。

演示demo地址：https://codepen.io/airen/pen/PJbKNg

对于这么简单的效果，我们也可以直接在v-on中处理完：

<button v-on:click="count += 1">+</button>

比如我们前面的示例，修改下：

  <button v-on:click="count += 1">+</button>
  {{ count }}
  -


// JavaScript
let app = new Vue({
  el: '#app',
  data: {
    count: 0
  }
})

效果一样：

演示demo地址：https://codepen.io/airen/pen/veyeLY

（学习视频分享：web前端开发、编程基础视频）

Atas ialah kandungan terperinci Mari kita bincangkan tentang arahan pemantauan acara Vue secara v-on. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!