0Pricing
Vue Academy · Pelajaran

Pengubah Peristiwa v-on

.stop, .prevent, .self, .once, .capture, .passive — kapan dan mengapa menggunakan setiap pengubah.

Pengubah Peristiwa v-on adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Penanganan Peristiwa yang Lebih Rapi

Direktif v-on (singkatan @) memasang pendengar peristiwa. Pengubah peristiwa adalah akhiran yang menangani tugas rutin DOM, seperti menghentikan propagasi atau mencegah perilaku bawaan, sehingga fungsi penangan Anda tetap berfokus pada logika.

Masalah yang Diselesaikan Pengubah

Tanpa pengubah, Anda harus menambahkan kode rutin DOM ke dalam fungsi penangan: memanggil event.preventDefault() atau event.stopPropagation(). Pengubah memindahkan pekerjaan tersebut ke templat secara deklaratif.

.stop untuk stopPropagation

.stop menghentikan peristiwa agar tidak bergelembung ke elemen induk—setara dengan memanggil event.stopPropagation().

<!-- inner click will not reach the outer handler -->
<div @click="onOuter">
  <button @click.stop="onInner">Click</button>
</div>

.prevent untuk preventDefault

.prevent memanggil event.preventDefault(). Penggunaan klasiknya adalah mencegah formulir memuat ulang halaman saat dikirim.

<form @submit.prevent="onSubmit">
  <button type="submit">Save</button>
</form>

Menggabungkan Pengubah

Anda dapat menggabungkan beberapa pengubah. Urutan penting—pengubah diterapkan dari kiri ke kanan.

<a @click.stop.prevent="onClick">Link</a>

.self: Hanya Elemen Itu Sendiri

.self hanya menjalankan fungsi penangan jika target peristiwa adalah elemen itu sendiri, bukan elemen anak yang propagasinya bergelembung ke atas. Pengubah ini sangat cocok untuk latar belakang lapisan penutup.

<!-- closes only when the backdrop itself is clicked -->
<div class="backdrop" @click.self="close">
  <div class="modal">...</div>
</div>

Pengubah Tombol

Untuk peristiwa papan ketik, Anda dapat mendengarkan tombol tertentu. @keyup.enter hanya berjalan saat tombol Enter dilepaskan.

<input @keyup.enter="search" />

Pengubah Tombol Lainnya

Vue menyediakan alias untuk tombol umum: .enter, .esc, .tab, .delete, .space, serta tombol panah seperti .up dan .down.

<input @keyup.esc="cancel" @keyup.up="previous" />

.once: Jalankan Fungsi Penangan Hanya Sekali

.once menjalankan fungsi penangan paling banyak satu kali, lalu menghapus pendengarnya. Pengubah ini berguna untuk tindakan satu kali, seperti menutup pesan sambutan.

<button @click.once="initialize">Start</button>

.passive untuk Kinerja Pengguliran

.passive memberi tahu peramban bahwa fungsi penangan tidak akan memanggil preventDefault(). Dengan begitu, peramban dapat menggulir dengan lancar tanpa menunggu, sehingga kinerja peristiwa sentuhan dan pengguliran meningkat.

<div @scroll.passive="onScroll">...</div>

Memilih Pengubah yang Tepat

  • .stop — hentikan propagasi.
  • .prevent — blokir perilaku bawaan.
  • .self — abaikan peristiwa anak yang bergelembung.
  • .once — jalankan sekali.
  • .passive — jangan pernah mencegah perilaku bawaan; pengguliran menjadi lebih baik.

Catatan: jangan pernah menggabungkan .passive dengan .prevent—keduanya saling bertentangan.

Pemeriksaan Singkat

Pilih pengubah yang tepat.

Ringkasan

Pengubah peristiwa membuat fungsi penangan tetap rapi:

  • .stop = stopPropagation, .prevent = preventDefault.
  • .self hanya berjalan pada elemen itu sendiri.
  • Pengubah tombol seperti .enter menargetkan tombol tertentu.
  • .once menjalankan fungsi penangan satu kali; .passive meningkatkan kinerja pengguliran.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pengubah Peristiwa v-on” gratis?

Ya — teks lengkap “Pengubah Peristiwa v-on” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Pengubah Peristiwa v-on”?

.stop, .prevent, .self, .once, .capture, .passive — kapan dan mengapa menggunakan setiap pengubah. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Pengubah Peristiwa v-on” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. v-model: Bagian Internal Binding Dua Arah
  2. Pengubah Peristiwa v-on
  3. Binding Dinamis dan Banyak Binding dengan v-bind
  4. Menulis Direktif Khusus
← Kembali ke Vue Academy