Inilah Yang Perlu Anda Ketahui Tentang Data Binding di Vue
Table of content:
Mengikat data di aplikasi web membuat tautan antara instance aplikasi dan UI (antarmuka pengguna). Instance aplikasi mengelola data, perilaku, dan komponen, sedangkan UI merepresentasikan aspek visual yang berinteraksi dengan pengguna. Mengikat data memungkinkan Anda membuat aplikasi web dinamis.
Di sini, Anda akan menjelajahi berbagai binding di Vue, termasuk binding satu arah dan dua arah. Anda juga akan belajar mengimplementasikan binding ini dengan template kumis dan arahan seperti v-bind dan v-model.
Interpolasi di Vue
Interpolasi adalah salah satu jenis pengikatan data Vue yang paling populer. Interpolasi memungkinkan Anda untuk menampilkan nilai data dalam tag Hyper Text Markup Language (HTML) dengan templat kumis, biasanya dilambangkan dengan kurung kurawal ganda ({{ }}).
Baca Juga:
Dengan templat kumis, Anda dapat mengintegrasikan konten aplikasi dinamis seperti properti data dan metode ke dalam HTML Anda. Anda dapat melakukannya dengan menyertakan nama properti data atau metode dari objek opsi di Vue di dalam kurung kurawal ini.
Berikut adalah contoh aplikasi Vue yang menggunakan templat kumis untuk mencapai interpolasi di Vue:
<body>
<div id="app">
<h1>{{ title }}</h1>
<p>{{ text.toUpperCase() }}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
title: "Welcome",
text: "This is your world?",
};
},
});
app.mount("#app");
</script>
</body>
Blok kode di atas menggunakan template mustache untuk menampilkan nilai properti title di objek data aplikasi Vue. Anda juga dapat menampilkan hasil ekspresi JavaScript dengan interpolasi. Misalnya, {{text.toUpperCase()}} ekspresi di P tag menampilkan versi huruf besar dari nilai teks, seperti yang ditunjukkan pada gambar di bawah ini:
Saat Anda memasang aplikasi Vue, Vue mengevaluasi ekspresi dalam template dan merender nilai yang dihasilkan dalam badan HTML. Setiap perubahan pada properti data memperbarui nilai yang sesuai di UI.
Misalnya:
<script>
const app = Vue.createApp({
data() {
return {
title: "Hello",
text: "This is your world?",
};
},
});
app.mount("#app");
</script>
Blok kode di atas mengubah properti judul menjadi “Halo”. Perubahan ini secara otomatis akan terlihat di UI karena aplikasi Vue mengikat properti title ke elemen UI, seperti yang ditunjukkan di bawah ini:
Interpolasi hanya menampilkan data saat tanda kurung kurawal ganda berada di antara tag HTML pembuka dan penutup.
Pengikatan Data Satu Arah Dengan Arahan v-bind
Seperti interpolasi, pengikatan data satu arah menautkan instance aplikasi ke UI. Perbedaannya adalah ia mengikat properti seperti data dan metode ke atribut HTML.
Pengikatan data satu arah mendukung aliran data satu arah, mencegah pengguna membuat perubahan yang memengaruhi properti data pada instance aplikasi. Ini berguna saat Anda ingin menampilkan data ke pengguna aplikasi tetapi mencegah pengguna memodifikasinya.
Anda dapat mencapai pengikatan data satu arah di Vue dengan v-bind direktif atau karakter singkatannya (:):
<input type="text" v-bind:value="text">
<input type="text" :value="text">
Blok kode menunjukkan penggunaan direktif v-bind dan singkatannya untuk mengikat nilai tag HTML input ke properti data teks. Berikut adalah contoh aplikasi Vue yang menggunakan v-bind direktif untuk mencapai pengikatan data satu arah:
<body>
<div id="app">
<input type="text" v-bind:value="text">
<p>{{ text }}</p>
</div> <script>
const app = Vue.createApp({
data() {
return {
text: 'Vue is awesome!'
}
}
})
app.mount('#app')
</script>
</body>
Di atas, kolom masukan dan elemen paragraf menampilkan nilai dari teks Properti. Itu nilai atribut bidang input terikat ke properti teks menggunakan v-bind pengarahan.
Blok kode ini membuat pengikatan satu arah, di mana perubahan ke teks properti akan memperbarui nilai kolom input, tetapi perubahan yang dilakukan pada kolom input tidak akan memperbarui teks properti di instance aplikasi Vue.
Untuk menunjukkan ini, kita bisa mulai dengan nilai awal dari teks Properti, “Vue luar biasa!”:
Setelah mengubah nilai field input menjadi “Halo Dunia!”perhatikan bahwa aplikasi Vue tidak diperbarui, dan teks di tag paragraf tetap sama:
Namun, ketika kita mengubah nilai dari teks properti untuk Halo Dunia! dalam instance aplikasi Vue alih-alih dari kolom input, kolom input diperbarui untuk mencerminkan nilai baru:
Cara pengikatan data ini berguna dalam skenario di mana Anda ingin menampilkan data kepada pengguna tetapi mencegah pengguna untuk memodifikasinya secara langsung. Memanfaatkan v-bind di Vue.js, Anda dapat membuat pengikatan satu arah, dengan mudah menghubungkan data aplikasi Anda ke elemen UI.
Pengikatan Data Dua Arah Dengan Direktif v-model
Pengikatan data dua arah memungkinkan perubahan pada nilai elemen UI secara otomatis tercermin dalam model data pokok dan sebaliknya. Sebagian besar framework JavaScript front-end seperti Angular menggunakan pengikatan dua arah untuk berbagi data dan menangani kejadian waktu nyata.
Vue.js memungkinkan pengikatan dua arah dengan v-model pengarahan. Itu v-model direktif membuat pengikatan data dua arah antara elemen input formulir dan properti data. Saat Anda mengetikkan elemen input, nilainya diperbarui secara otomatis di properti data, dan setiap perubahan pada properti data juga akan memperbarui elemen input.
Berikut adalah contoh aplikasi Vue yang menggunakan v-model direktif untuk mencapai pengikatan data dua arah:
<head>
<title>Two-way data binding in Vue</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="text">
<p>{{ text }}</p>
</div> <script>
const app = Vue.createApp({
data() {
return {
text: 'Vue is awesome!'
}
}
})
app.mount('#app')
</script>
</body>
Blok kode di atas memiliki elemen input dengan v-model direktif mengikatnya ke teks properti data. Itu teks properti awalnya diatur ke “Vue luar biasa!”.
Bidang input memperbarui properti teks saat Anda mengetiknya dan mencerminkan perubahan pada properti teks di P menandai. Vue.js menggunakan direktif v-model dan elemen input untuk mencapai pengikatan data dua arah.
Sementara v-bind memungkinkan komunikasi satu arah dari aplikasi Vue ke UI, v-model menyediakan komunikasi dua arah antara aplikasi Vue dan UI. Karena kemampuannya untuk mengaktifkan komunikasi dua arah, v-model sering digunakan saat bekerja dengan elemen form di Vue.
Perluas Keahlian Anda dalam Membuat Aplikasi Vue
Anda telah mempelajari tentang data binding di Vue, termasuk interpolasi dan directive v-bind dan v-model. Pengikatan data ini sangat penting, karena berfungsi sebagai fondasi aplikasi Vue.
Vue memiliki banyak arahan lain untuk kasus penggunaan, seperti perenderan daftar, pengikatan peristiwa, dan perenderan bersyarat. Memahami arahan Vue membantu Anda membangun front-end yang dinamis dan interaktif untuk aplikasi web Anda.
Artikel Terkait
