v-model: Bagian Internal Binding Dua Arah
v-model dikompilasi menjadi :modelValue + @update:modelValue, nama v-model khusus, v-model pada komponen.
v-model: Bagian Internal Binding Dua Arah adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.
Apa Sebenarnya v-model Itu
v-model tampak seperti pengikatan dua arah yang ajaib, tetapi sebenarnya hanya singkatan dari pengikatan nilai dan pendengar peristiwa. Dengan memahami perluasannya, Anda dapat menggunakannya baik pada elemen masukan maupun komponen khusus.
v-model pada Elemen Masukan Teks
Pada elemen masukan bawaan, v-model mengikat nilai dan mendengarkan peristiwa masukan. Kedua baris ini setara.
<!-- shorthand -->
<input v-model="text" />
<!-- expanded -->
<input :value="text" @input="text = $event.target.value" />Dua Bagian: Mengikat dan Mendengarkan
:value menyalurkan keadaan ke dalam elemen; @input menyalurkan perubahan pengguna kembali ke keadaan. Keduanya menciptakan efek dua arah.
Perbedaan v-model pada Komponen
Pada komponen kustom, v-model menggunakan properti dan peristiwa yang berbeda: modelValue dan update:modelValue. value/input bawaan hanya digunakan untuk elemen bawaan.
<!-- on a component -->
<MyInput v-model="text" />
<!-- expands to -->
<MyInput :model-value="text" @update:model-value="text = $event" />Menerapkan v-model pada Komponen Anak
Untuk mendukung v-model, komponen anak mendeklarasikan properti modelValue dan memancarkan update:modelValue saat nilainya perlu diubah.
<script setup>
defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
function onInput(e) { emit('update:modelValue', e.target.value) }
</script>Templat Komponen Anak
Komponen anak mengikat properti yang masuk ke kolom masukan dan memancarkan peristiwa saat terjadi perubahan. Komponen induk tidak pernah mengetahui detail internalnya.
<template>
<input :value="modelValue" @input="onInput" />
</template>Argumen v-model Bernama
Anda dapat menargetkan properti tertentu dengan memberi nama pada model: v-model:title menggunakan properti title dan peristiwa update:title.
<!-- parent -->
<MyDialog v-model:title="pageTitle" />
<!-- expands to -->
<MyDialog :title="pageTitle" @update:title="pageTitle = $event" />Mendeklarasikan Model Bernama pada Komponen Anak
Komponen anak cukup mendeklarasikan properti dan peristiwa yang sesuai dengan nama tersebut.
<script setup>
defineProps(['title'])
const emit = defineEmits(['update:title'])
</script>Beberapa v-model pada Satu Komponen
Karena setiap model memiliki namanya sendiri, Anda dapat mengikat beberapa model sekaligus. Komponen formulir pengguna mungkin menyediakan v-model:first dan v-model:last secara bersamaan.
<UserName
v-model:first="firstName"
v-model:last="lastName"
/>Mengapa Rancangan Ini Sangat Bermanfaat
Karena v-model hanyalah gabungan properti dan peristiwa, komponen kustom terasa persis seperti kolom masukan bawaan bagi penggunanya. Beberapa model bernama memungkinkan satu komponen mengelola beberapa pengikatan dua arah dengan rapi.
Kesalahan Umum
Jangan mengubah properti modelValue secara langsung di dalam komponen anak—tindakan itu merusak alur properti satu arah. Selalu pancarkan peristiwa pembaruan dan biarkan komponen induk memiliki statusnya.
Pemeriksaan Singkat
Uji pengetahuan Anda tentang cara kerja internal v-model.
Ringkasan
Anda telah memahami cara kerja v-model:
- Pada elemen masukan, v-model diperluas menjadi
:value+@input. - Pada komponen, v-model menggunakan
modelValue+update:modelValue. - Model bernama (
v-model:title) menargetkan properti/peristiwa tertentu. - Anda dapat menggunakan beberapa v-model pada satu komponen.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “v-model: Bagian Internal Binding Dua Arah” gratis?
Ya — teks lengkap “v-model: Bagian Internal Binding Dua Arah” 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 “v-model: Bagian Internal Binding Dua Arah”?
v-model dikompilasi menjadi :modelValue + @update:modelValue, nama v-model khusus, v-model pada komponen. 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 1 dari 4.
Berapa lama pelajaran “v-model: Bagian Internal Binding Dua Arah” 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
- v-model: Bagian Internal Binding Dua Arah
- Pengubah Peristiwa v-on
- Binding Dinamis dan Banyak Binding dengan v-bind
- Menulis Direktif Khusus