Memahami Data Binding Pada Vue Js

Hallo teman-teman semuanya kita akan kembali belajar tentang vue js , setelah sebelumnya kita telah mempelajari tentnag Memahami Two Way Data Binding Pada Vue Js yang sebenarnya saya menuliskan artikel tersebut terlalu cepat yang mana seharunya saya menulis artiekel Memahami Data Binding Pada Vue Js 😀 Tetapi tidak apa-apa bagi teman-teman yang terlanjur sudah baca dan praktek artikel yang sebelumnya silahkan di simak.

Oke langsung saja tanpa panjang lebar Apa itu Data Binding? Data Binding adalah teknik yang digunakan untuk melakukan binding (mengikat) data antara model dan view yang disinkronkan setiap terjadi perubahan data. Pada contoh kali ini, kita akan menggunakan directive v-model. Kemudian kita akan membuat data binding, dimana paragraf (value of tag p) akan berubah secara dinamis ketika ada perubahan data didalam teks box (form input).

Oke langsung kita buat contohnya :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script&>
</head>
<body>
    <div id="vue-app">
        <h1>Data Binding</h1>
        <a v-bind:href="website">Dumet School</a>
        <input type="text" v-bind:value="name">
        <p>Name : {{ name }}</p>
        <p v-html="websiteTag"></p>
    </div>




    
    <script src="app.js"></script&>
</body>
</html>

Pada kode HTML di atas jika di lihat untuk menggunakan data binding menggunakan derective v-bind, biasanya di gunakan untuk melakukan binding ke attribute pada DOM HTML. Kita akan melakukan binding pada attribute value dan href .

// Data Binding
const vue = new Vue({
    el : '#vue-app',
    data : {
        name: "Bayli",
        job: 'Ninja',
        website: 'https://dumetschool.com',
        websiteTag: '<a href="https://dumetschool.com">Link Dumet</a>'
    },
});

Jika kita jalankan maka hasilnya akan seperti ini :

Oke seperti itu lah teman-teman untuk Memahami Data Binding Pada Vue Js dan sampai bertemu lagi pada artikel selanjutnya.

Kategori