Pada materi sebelumnya, kita telah belajar tentang Dasar Pembuatan Aplikasi Vue.js yang melibatkan prinsip data binding searah (one-way data binding). Nah kali ini, saya akan menunjukkan kepada Anda cara melakukannya secara dua arah (two-way data binding). Menurut saya, ini adalah salah satu fitur paling menarik yang ditawarkan oleh framework Vue.js.

One-Way Data Binding

Silahkan buat file latihan002.html terlebih dahulu, lalu copy paste baris kode berikut :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Latihan Vue 002</title>
</head>
<body>
    <div id="app">
        <p>Value dari property pesan : {{ pesan }}</p>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue ({
            el: '#app',
            data: {
                pesan: 'Apa Kabar'
            }
        });
    </script>
</body>
</html>

Sebelum data (property yang ada di objek Javascript) ditampilkan di expression {{ pesan }} , value atau nilai property pesan dari aplikasi Vue dikaitkan ke elemen HTML <div id="app"></div>. Interaksi yang terjadi di sini bersifat searah atau one-way data binding, alur komunikasi yang terjadi masih terbatas dari aplikasi Vue ke halaman HTML saja dan belum bisa dari arah sebaliknya.

Two-Way Data Binding

Masih di file latihan002.html yang sama, copy paste baris kode :

<input type="text" v-model="pesan">

ke baris yang ditandai dengan <!-- SISIPKAN DI SINI -->

<body>
    <div id="app">
        
        <!-- SISIPKAN DI SINI -->

        <p>Value dari property pesan : {{ pesan }}</p>
    </div>
    <script src="vue.js"></script>

Pada kode di atas, saya menggunakan salah satu core dari Vue Directives, yaitu v-model untuk melakukan listening terhadap DOM events (Document Object Model). Apapun yang diketikkan di dalam tag <input> pada halaman HTML, hasilnya akan langsung direfleksikan ke property pesan yang ada di sisi aplikasi Vue. Agar lebih jelas, mari kita lihat hasil eksekusi dari file latihan002.html :

prinsip data binding pada vue js

Sekarang, tidak hanya aplikasi Vue saja yang dapat mengirim / meneruskan nilai property Javascript ke halaman HTML, tetapi kita juga bisa merubah nilai property yang ada di objek Javascript dari halaman HTML. Nilai property pesan yang awalnya adalah ‘Apa Kabar’, dapat terus diganti secara instan setelah tag <input type="text"> dikaitkan dengan property pesan melalui v-model="pesan". Sangat menarik bukan ?

Anda bisa membaca materi saya selanjutnya Apa Itu Vue Directive untuk penjelasan lebih lengkap tentang Directives berikut contohnya, seperti : v-for, v-if, v-else, v-show, v-bind dan v-on.