Di latihan ini kita hanya akan membuat aplikasi Vue dengan file vue.js yang di-unduh, bukan yang di-install via Vue-CLI (baca: cara instalasi Vue.js). Pertama-tama, buat folder baru terlebih dahulu, misal dengan nama latihanvue/ atau bisa juga dengan nama lain. Letakkan file vue.js yang telah di-unduh ke dalam folder latihanvue/, kemudian buat file baru bernama latihan001.html di folder yang sama (editor menggunakan Visual Studio Code).

dasar pembuatan aplikasi vue.js

Copy paste baris kode berikut ke file latihan001.html :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Latihan Vue 001</title>
</head>
<body>
    <div id="app">
        <p>Makanan khas-nya Jogja adalah {{ jogja }}</p>
        <p>Makanan khas-nya Makassar adalah {{ makassar }}</p>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue ({
            el: '#app',
            data: {
                jogja: 'Gudeg',
                makassar: 'Coto'
            }
        });
    </script>
</body>
</html>

Vue membuat instance baru yang akan digunakan untuk mengontrol aplikasi Vue pada halaman HTML :

new Vue ({

})

Selanjutnya, kita perlu memberi tahu Vue, elemen mana di halaman HTML yang akan dijadikan target. ID elemen yang saya pilih pada contoh ini adalah #app, tetapi Anda bebas mengganti ID #app dengan nama apa saja. Jangan lupa, karakter # wajib ada di depan ID elemen.

new Vue ({
    el: '#app',
})

Elemen di halaman HTML yang menjadi target Vue diwakili oleh <div id="app"></div>. Aplikasi Vue yang kita buat nantinya hanya bisa bekerja di dalam elemen tersebut.

<div id="app"></div>

Vue segera mengecek, apakah ada data (property dari objek Javascript) yang akan ditampikan ke halaman HTML. Pada contoh di bawah, objek Javascript saya memiliki 2 (dua) property, yaitu :

  • key: jogja , value: ‘Gudeg’
  • key: makassar , value: ‘Coto’
new Vue ({
    el: '#app',
    data: {
        jogja: 'Gudeg',
        makassar: 'Coto'
    }
})

Sebagai alternatif, data juga dapat diteruskan dengan cara seperti di bawah, hasilnya akan sama dengan cara sebelumnya.

var makananKhas = { 
    jogja: 'Gudeg',
    makassar: 'Coto' 
};

new Vue ({
    el: '#app',
    data: makananKhas
})

Terakhir, data akan ditampilkan di halaman HTML melalui expression {{ jogja }} dan {{ makassar }} , seperti pada kode berikut :

<div id="app">
    <p>Makanan khas-nya Jogja adalah {{ jogja }}</p>
    <p>Makanan khas-nya Makassar adalah {{ makassar }}</p>
</div>

Proses mengikat property dari objek Javascript ke elemen <div id="app"></div> pada halaman HTML dikenal dengan istilah data binding. Di contoh ini data binding masih berjalan searah.

dasar pembuatan aplikasi vue.js

Melalui Inspect Elements di atas, kita dapat memastikan bahwa objek Javascript dari Vue ditampilkan ke halaman HTML melalui elemen <div id="app"></div>.

Di materi selanjutnya Prinsip Data Binding pada Vue.Js, saya akan menunjukkan cara agar data binding dapat berkomunikasi dua arah sehingga menjadi dinamis.