Pada artikel kali ini saya akan membahas tentang front end framework javascript yaitu Vue JS, jika sebelumnya kita telah membahas tentang  Cara Menggunakan Contains Method Di Laravel Collections pada laravel sekarang kita akan membahas fitur collections laravel yaitu Memahami Two Way Data Binding Pada Vue Js.Bagaimana sih konsep Two-Ways data binding ? Singkatnya seperti ini setiap perubahan yang kita lakukan di Javascript kita akan berpengaruh terhadap tampilan (view layer) yang terdapat di dalam kode HTML kita , dan sebaliknya perubahan yang terjadi pada tampilan (view layer) akan berpengaruh juga terhadap value yang terdapat di dalam Javascript nya.

Misal kita meiliki HTML seperti ini :

<!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>
    
</head>
<body>
    <div id="vue-app">
        <h1>Keyboard Event</h1>
        <form action="">
            {{ name }}<input type="text" v-model="name" > <span>Name</span>
            {{ email }}<input type="text" v-model="email" > <span>Email</span>
        </form>
    </div>
    </body>
    
    </html>

Bagi teman-teman untuk mempelejari tentang two way data binding ini di harapkan telah tau basic dari vue js khususnya tentnag data propeties dan string interpolation.

Untuk menggunakan two way data binding kita menggunakan yang namanya MODEL,  FUNGSI DARI MODEL AKAN MELAKUKAN BINDING SECARA DUA ARAH TERHADAP DATA PROPERTIES, APA BILA DATA PROPETIES NILAINYA BERUBAH MAKA SECARA TAMPILAN JUGA AKAN BERUBAH SECARA LANGSUNG .

Pada kode HTML di atas kita menerapkan fungsi model pada 2 buah inputan dimana di sebelahnya kita juga menampilkan data properties dengan menggunakan string interpolation,  Sekarang kita akan buat kode javascript menggunakan vue

const vue = new Vue({
    el: '#vue-app',
    data: {
        name: '',
        email: '',
    }, 
});

Jika di jalankan pada browser maka hasilnya akan seperti ini :

Oke cukup untuk artikel kali ini tentang Memahami Two Way Data Binding Pada Vue Js semoga bermanfaat untuk teman-teman semuanya, sampai bertemu pada artikel selanjutnya.

WhatsApp chat