Rumah > Artikel > hujung hadapan web > 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!
Fungsi: mengikat Pendengar acara yang ditentukan
Singkatan: @
Dijangka: Fungsi (kaedah) | Pernyataan Sebaris (ungkapan dalaman) | >
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
<!-- Template --> <div id="app"> <h1 v-on:click="clickMe">点击我</h1> </div> // JavaScript var app = new Vue({ el: '#app', 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
, 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
: v-on
<!-- 方法处理器 --> <button v-on:click="clickMe"></button> <!-- 对象语法 (v2.4.0版本以上才支持) --> <button v-on="{ mousedown: doThis, mouseup: doThat}"></button> <!-- 内联语句 --> <button v-on:click="doThat('Hello', $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}
Kesan ini sangat mudah Klik
untuk menambah nombor, dan klik
untuk mengurangkan nombor. -
<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
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!