Prosesor metode
Anda dapat menggunakan perintah V-On untuk mendengarkan acara DOM:
<div id = "example"> <button v-on: click = "salam"> salam </button> </div>
Kami mengikat penangan acara klik ke metode salam. Berikut ini adalah metode yang didefinisikan dalam vue instance:
var vm = vue baru ({el: '#example', data: {name: 'vue.js'}, // mendefinisikan metode dalam objek `metode`: {salam: function (event) {// dalam metode` `` `}` `event` `event` `` `` `` `` `` dapat juga memanggil metode vm.greet () dalam kode javascript // -> 'halo vue.js!'Ujilah sendiri
Prosesor pernyataan inline
Selain mengikat secara langsung ke suatu metode, Anda juga dapat menggunakan pernyataan inline JavaScript:
<div id = "example-2"> <tombol v-on: click = "say ('hai')"> say hai </aton> <tombol v-on: klik = "katakan ('apa')"> Say What </button> </div> vue baru ({el: '#example-2', Metode: {say: function (msg) {alert (msg)}}})Mirip dengan ekspresi inline, event handler terbatas pada satu pernyataan.
Terkadang juga perlu untuk mengakses acara DOM asli dalam prosesor pernyataan inline. Anda dapat menggunakan acara $ variabel khusus untuk meneruskannya ke dalam metode:
<Tombol V-On: Klik = "Say ('Hello!', $ Event)"> Kirim </button>
// ... Metode: {say: function (msg, event) {// Sekarang kita dapat mengakses acara objek acara asli Event.preventDefault ()}}Pengubah Acara
Di Prosesor Acara, Event.PreventDefault () atau Event.StopPropagation () sering diperlukan. Meskipun kita dapat dengan mudah melakukannya dalam suatu metode, akan lebih baik untuk memiliki metode ini menjadi logika data murni tanpa menangani detail acara DOM.
Untuk mengatasi masalah ini, Vue.js menyediakan V-on dengan dua pengubah acara: .prevent dan .stop. Apakah Anda ingat bahwa pengubahnya adalah akhiran instruksi yang dimulai dengan titik?
<!-Cegah Acara Klik dari Bubbled-> <a v-on: click.stop = "dothis"> </a> <!-Kirim acara tidak lagi membebani halaman-> <form v-on: submit.prevent = "onsubmit"> </Form> <!-Modifiers dapat disatangkan-<a v-on: click. V-On: Kirim.prevent> </form>
1.0.16 Menambahkan dua pengubah tambahan:
<!-Gunakan mode Capture saat menambahkan pendengar acara-> <div v-on: click.capture = "dothis"> ... </div> <!-Callback dipicu hanya ketika acara dipicu pada elemen itu sendiri (bukan elemen anak)-> <Div V-on: klik. Sendiri = "dothat"> ... </div>
Pengubah kunci
Saat mendengarkan acara keyboard, kita sering perlu mendeteksi kode kunci. Vue.js memungkinkan penambahan pengubah kunci ke v-on:
<!-vm.submit () dipanggil hanya saat kode ke 13-> <input v-on: keyup.13 = "kirim">
Ingatlah bahwa semua kode kunci sulit, Vue.js menyediakan alias untuk kunci yang paling umum digunakan:
<!-Sama seperti di atas-> <input v-on: keyup.enter = "kirim"> <!-sintaks singkatan-> <input @keyup.enter = "Kirim">
Semua alias kunci:
•memasuki
• tab
•menghapus
• ESC
•ruang angkasa
•ke atas
•turun
•kiri
•Kanan
1.0.8+: Mendukung alias kunci huruf tunggal.
1.0.17+: Anda dapat menyesuaikan alias kunci:
// Anda dapat menggunakan @keyup.f1vue.directive ('on'). KeyCodes.f1 = 112Mengapa mendengarkan acara di HTML?
Anda mungkin telah memperhatikan bahwa metode pemantauan acara semacam ini bertentangan dengan konsep tradisional "pemisahan keprihatinan". Jangan khawatir, karena semua metode penanganan acara Vue.js dan ekspresi terikat dengan viewmodel dari tampilan saat ini, dan itu tidak akan menyebabkan kesulitan pemeliharaan. Bahkan, ada beberapa manfaat untuk menggunakan V-on:
1. Pindai templat HTML dan Anda dapat dengan mudah menemukan metode yang sesuai dalam kode JavaScript.
2. Karena Anda tidak perlu mengikat peristiwa secara manual di JavaScript, kode ViewModel Anda bisa menjadi logika yang sangat murni, sepenuhnya dipisahkan dari DOM, membuatnya lebih mudah untuk diuji.
3. Ketika viewmodel dihancurkan, semua prosesor acara akan dihapus secara otomatis. Anda tidak perlu khawatir tentang cara membersihkannya sendiri.
Artikel ini telah dikompilasi ke dalam tutorial pembelajaran komponen front-end vue.js ", dan semua orang dipersilakan untuk belajar dan membaca.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.