Pada artikel sebelumnya kita telah mengetahui bagaimana cara install Vue.js baik dengan CDN atau menggunakan NPM dan sedikit cara penggunaannya.
Dan pada artikel kali ini kita akan membahas mengenai salah satu fitur yang ada di dalam Vue.js yaitu Two-way binding. Mari kita mulai pembahasan kita dengan mengenal pengertian dan konsep dari Two-way binding ini.
Two-way Binding
Apa sih Two-way data binding itu? Two-Way data binding adalah sebuah konsep dimana ketika kita melakukan suatu perubahan pada Javascript akan mempengaruhi juga pada tampilan (view layer) yang terdapat di dalam kode HTML. Begitu juga sebaliknya, ketika terdapat perubahan pada tampilan (view layer) akan mempengaruhi juga terhadap value yang terdapat didalam Javascript.
Pada Vue.js Two-way Data Binding dilakukan dengan menggunakan perintah v-model. Sebagai contoh, kita akan mengubah suatu nilai pada elemen HTML berdasarkan nilai yang kita berikan pada sebuah input HTML.
Contoh
Untuk melengkapi penjelasan mengenai konsep Two-Way Data Binding pada Vue, pada contoh dibawah ini kita akan mengupdate nilai pada elemen H1 sesuai dengan value pada input text.
Pada elemen H1 kita menggunakan binding expression dari variable message yang kita deklarasikan pada option data pada saat inisialisasi Vue. Kemudian pada text input, kita akan mengimplementasikan v-model untuk melakukan Two-Way Binding.
<html>
<head>
<title>Hello Javascript</title>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<input v-model="message">
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vue = new Vue({
el: '#app',
data: {
message: 'Hello Javascript'
}
})
</script>
</html>Pada contoh diatas nilai pada elemen H1 dan input dari user saling terkait. Dengan menggunakan tag v-model pada elemen input, kita memberitahu Vue variable mana yang harus di bind dengan elemen input tersebut, dalam contoh diatas adalah variable message.
Hasil dari kode diatas akan terlihat seperti gambar dibawah ini.
Sebagaimana dijelaskan pada pembuka artikel ini, Two-Way Data Binding juga akan mempengaruhi tampilan (view layer) ketika terjadi perubahan pada nilai Javascript. Pada gambar dibawah ini, kita bisa melihat bagaimana perubahan pada tampilan ketika kita merubah value pada Javascript.
Selain menggunakan input text, kita juga bisa mengimplementasikan v-model pada element input lainnya seperti textarea, checkbox, select element dll.
Sekian artikel mengenai konsep Two-way binding dengan Vue.js ini, semoga kita bisa lebih memahami mengenai data binding di Vue.js
No Comments
Leave a comment Cancel