Dasar Pengenalan Vue JS

Vue JS makhluk apa lagi ni, Vue Js merupakan perkembangan dari javascript yang digunakan untuk mempermudah dalam pengkodean agar lebih reaktif. pembuat Vue JS pertama kali yaitu Evan You pada tahun 2013. prodi TRPL belum lahir ya 🙂 , Evan You sebelumnya bekerja di Google. kemudian mengembangkan JS agar lebih mudah, dengan nama Vue JS. sama seperti JS point yang penting adalah ID dan data yang akan dipanggil.

bagi yang ingi belajar lebih dalam dapat mengunjungi situs. https://vuejs.org/. oke kita coba code sederhana menampilkan 2 pesan dari sebuah ID. misalkan Id diberi nama Coba, kemudain terdapat 2 pesan data. sebagai berikut.

var app = new Vue({
el: “#coba”,
data: {
pesan1: “Selamat Pagi TRPL”,
pesan2: “Semoga Tidak Remedial”,
}
})

adapun code detilnya sebagi berikut: untuk pengaksesan Vue JS menggunakan CDN sehingga diperlukan koneksi internet.

<!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>Latihan Vue JS</title>

    <!-- Vuejs CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="coba">
        {{ pesan1 }},
    {{ pesan2 }}
    </div>
    
    <script>
        var app = new Vue({
            el: "#coba",
            data: {
                pesan1: "Selamat Pagi TRPL",
        pesan2: "Semoga Tidak Remedial",
            }
        })
    </script>
</body>
</html>

sekarang bagaimana membuat data binding, binding itu apa sih? data yang ikut “terikat”/ menggabungkan. misal ketika user memasukkan keyword tertentu maka data tersebut akan otomatis ikut untuk dieksekusi tanpa harus menggunakan button submit.

contoh Binding Two Way

<input type=”text” v-model:value=”pesan”>

code full.

<!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>Latihan Vue Binding </title>

    <!-- Vuejs CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

    <div id="coba">
        <input type="text" v-model:value="pesan">
        <p>{{ pesan }}</p>
    </div>
    
    <script>
        var app = new Vue({
            el: "#coba",
            data: {
                pesan: ""
            }
        })
    </script>
</body>
</html>

ketika user memasukkan inputan maka otomatis ada tulisan dibawahnya mengikuti apa yang diinput oleh user