Artikel yang menganalisis secara ringkas beberapa pengubah acara vue

Artikel ini membawakan anda pengetahuan yang berkaitan tentang bahagian hadapan terutamanya mengenai beberapa pengubahsuai acara dalam Vue. Rakan-rakan yang berminat boleh melihatnya di bawah.

Saya menemui acara papan kekunci vue semasa pembangunan projek Coretan kod:

<div class="query-form-left">
   <i-Form :model="formItem" inline>
       <form-item  >
           <i-input style="width:200px"  placeholder="名称" v-model="formItem.name" @keyup.enter.native="queryTableDataByAction"></i-Input>
       </form-item>
       <form-item>
           <i-input placeholder="负责人" v-model="formItem.ownerUserName" @keyup.enter.native="queryTableDataByAction"></i-Input>
       </form-item>
       <form-item>    
           <i-Button type="ghost" @click="queryTableDataByAction">查询</i-Button>
       </form-item>
   </i-Form></div>

Dalam coretan kod, saya mendapati bahawa sentiasa ada .naitvie selepas acara papan kekunci saya tidak faham sebabnya pada mulanya vue menggunakan Sediakan mekanisme penghantaran acara anda sendiri Contohnya, acara seperti @click dirangkumkan oleh vue. Jika anda ingin mendengar peristiwa asli pada elemen akar komponen, anda perlu menggunakan pengubah suai v-on .native

Dalam coretan kod di atas, @keyup.enter ditulis dalam komponen terkapsul (komponen iView yang digunakan dalam projek), oleh itu, pengecam tambahan .native perlu ditambahkan pada beberapa yang sebenarnya mengendalikan acara asli DOM Jika ia digunakan secara langsung pada input, ia tidak akan Perlu untuk ditambah.

Selain itu, vue menyediakan banyak pengubah suai .

1. Pengubah suai acara

.stop Halang acara klik daripada terus disebarkan
.prevent Penyerahan acara tidak akan memuatkan semula halaman
.capture Gunakan mod tangkapan acara apabila menambah pendengar acara, iaitu peristiwa yang dicetuskan oleh elemen itu sendiri diproses di sini dahulu, dan kemudian diserahkan kepada elemen dalaman untuk diproses
.self Pemprosesan hanya dicetuskan apabila event.target ialah elemen semasa itu sendiri, iaitu, peristiwa tidak dicetuskan daripada elemen dalaman
.once Acara klik hanya akan dicetuskan sekali
.passive Gelagat lalai acara tatal (iaitu menatal tingkah laku) akan dicetuskan serta-merta, termasuk event.preventDefault() Dalam kes

Nota: pengubah suai boleh digabungkan Apabila menggunakan pengubah suai, kod yang sepadan adalah penting 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 itu sendiri.

2. Pengubah suai utama

boleh digunakan terus sebagai kod kunci, tetapi sukar untuk mengingati kesemuanya, jadi Vue menyediakan alias kunci yang biasa digunakan

.enter Masukkan
.tab Tab Bar Ruang
.delete (menangkap kekunci "Padam" dan "Backspace")
.esc Keluar
.space Bar Ruang
.up Kekunci atas
.down Kekunci bawah
.left Kekunci kiri
.right Kekunci kanan

3. Kekunci pengubah suai sistem

Anda boleh menggunakan pengubah suai berikut untuk melaksanakan pendengar yang hanya mencetuskan peristiwa tetikus atau papan kekunci apabila kekunci yang sepadan ditekan.

.ctrl .alt .shift .meta

Hanya beberapa pengubah acara vue disenaraikan di sini Untuk pengenalan lebih terperinci kepada pengubahsuai, sila semak Dokumen rasmi vue

Ringkasan sedikit setiap hari... Tuai sedikit setiap hari... Buat kemajuan sedikit setiap hari... (＾－＾)

Pembelajaran yang disyorkan: "tutorial video vue.js"

Atas ialah kandungan terperinci Artikel yang menganalisis secara ringkas beberapa pengubah acara vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!