1

Kata Pengantar

Assalamu’alaikum Warahmatullahi Wabarakaatuhu. Salam untuk para pembaca sekalian,

semoga selalu dalam lindungan Allah SWT.

Pada kesempatan kali ini, saya akan menyampaikan sebuah pembahasan mengenai
framework VueJS dalam sebuah buku. Pembahasan dalam buku ini dimulai dari konsep
yang sangat dasar sampai pada tahap siap untuk melakukan pengembangan.

Buku ini dibuat dengan tujuan untuk membantu teman-teman yang sedang mencari
referensi belajar VueJS berbahasa Indonesia dan menambah dokumen IT berbahasa
Indonesia sehingga dapat menjadi bagian dari usaha membangun IT di Indonesia.

Doa dan impian yang begitu tinggi menyertai buku ini.

Terima kasih telah membaca buku ini. Semoga bermanfaat.

D. I. Yogyakarta, 10 Januari 2019

Penulis

2
 Persiapan

Berikut ini merupakan tahap persiapan yang harus Anda lakukan sebelum membaca buku
ini lebih lanjut. Halaman ini dibuat agar penyampaian pada pembahasan selanjutnya dapat
diterima dengan maksimal.

Perlengkapan
Anda harus memiliki:
- Laptop, Komputer, atau Smart Phone
- Text Editor, seperti SublimeText, Visual Studio Code, Atom, dll
- Web Browser terbaru, seperti Google Chrome, Firefox,dll

Pengetahuan
Anda harus mengetahui:
- Dasar pemrograman
- Dasar pengembangan perangkat lunak
- Dasar HTML
- Dasar Javascript
- Dasar CSS (disarankan atau tidak wajib)

3
 Daftar Isi

#1 Berkenalan dengan Vue .......................................................................................... 5

Cerita Singkat ......................................................................................................... 5
#2 Konsep di Balik Vue ................................................................................................ 6
Konsep MVVM ....................................................................................................... 6
Konsep Virtual DOM .............................................................................................. 6
#3 Penggunaan Vue ..................................................................................................... 8
Pemasangan ......................................................................................................... 8
Struktur Dasar ........................................................................................................ 9
Data Binding ........................................................................................................... 10
Methods ................................................................................................................. 12
Computed Properties ............................................................................................. 13
#4 Komponen pada Vue ............................................................................................... 14
Dasar Komponen ................................................................................................... 14
#5 Penutup .................................................................................................................... 16
Vue VS React VS Angular ..................................................................................... 16
Penutup .................................................................................................................. 16

4
#1
Berkenalan dengan Vue

Cerita Singkat

Vue yang secara bahasa dibaca /vju:/ dalam bahasa Inggris (seperti ketika menyebut
view) merupakan sebuah framework Javascript yang digunakan untuk mempermudah
pembuatan halaman web. Seperti yang kita ketahui, dalam aplikasi web, bagian yang
menampakkan tampilan seperti halaman web dan sebagainya disebut dengan istilah
frontend. Karena hal tersebutlah yang menyebabkan ada yang menyebutnya framework
Javascript dan ada pula yang menyebutnya framework frontend. Kedua sebutan tersebut
bisa dibenarkan, karena Vue memang untuk itu. Yang salah adalah kalau Vue disebut
sebagai framework Python untuk membuat game.

Kelebihan dari framework ini adalah ukurannya yang super mini, tetapi kemampuan dan
kecepatannya yang sangat luar biasa. Vue dibuat dengan mengadopsi gabungan konsep-
konsep yang digunakan pada framework-framework lainnya, seperti konsep MVVM (dari
AngularJS) dan konsep Virtual DOM (dari ReactJS). Istilah-istilah tersebut akan dibahas
pada bagian-bagian berikutnya.

Kelebihan lainnya adalah dokumentasi sangat lengkap dan dukungan komunitas yang
sangat besar di seluruh dunia. Hal ini yang membuat Vue sangat hebat bahkan dapat
menandingi framework lain yang didukung secara resmi oleh perusahaan besar.

Kemudian, yang membuat Vue sangat disukai adalah penggunaan yang sangat mudah
sehingga siapapun dapat mempelajari Vue dengan cepat.

5
#2
Konsep di Balik VueJS

Konsep MVVM
Konsep MVVM atau Model-View-ViewModel merupakan sebuah konsep yang membagi
sebuah halaman depan menjadi 2 bagian, yaitu Model dan View. Model adalah bagian
yang menyimpan data-data. View adalah bagian yang menampilkan sesuatu, baik data
yang tersimpan pada model, maupun selain itu. ViewModel adalah bagian yang
mengontrol Model dan View, bisa dikatakan juga ini adalah controller.

Sebetulnya, Vue hanya berfokus ke Model dan View saja, tidak sampai di ViewModel,
karena Vue sendiri lah yang menjadi ViewModel. Konsep yang sangat unik dan menarik
untuk dipelajari.

Konsep Virtual DOM

Sebelum berbicara mengenai Virtual DOM, kita harus mengetahui apa itu DOM terlebih
dahulu. DOM adalah semua elemen HTML yang dapat dimanipulasi melalui Javascript.
Pada halaman web, terdapat banyak tag HTML, semua tag tersebut apabila dipanggil
melalui Javascript, maka disebut DOM.

Gambar 1: Elemen HTML.

Gambar 2: DOM pada Javascript.

Lalu, Virtual DOM adalah teknik yang dilakukan untuk membuat DOM secara virtual
dengan merepresentasikan DOM dalam sebuah objek biasa (bukan DOM). Biasanya,

6
teknik ini dilakukan dengan membuat sebuah objek dengan data nama, properti, dan
anak-anaknya.

Gambar 3: Virtual DOM.

Ketika Virtual DOM masih dalam tahap definisi, ini belum mempengaruhi tampilan sama
sekali, dibutuhkan satu tahap untuk menggambar semua DOM ke dalam dokumen HTML,
yaitu tahap render. Tahap ini merupakan bagian yang sangat vital, karena apabila Virtual
DOM tidak dilakukan render, maka Virtual DOM yang sudah dibuat tidak akan ditampilkan.

Gambar 4: Elemen HTML pembungkus Virtual DOM.

Gambar 5: Virtual DOM dan bagian yang melakukan render.

7
#3
Penggunaan Vue

Pemasangan
Sebagai sebuah framework, pemasangan Vue pada halaman HTML dilakukan seperti
pemasangan library, yaitu dengan memanggilnya menggunakan tag script. Alamat file Vue
dimasukkan dalam atribut src.

Sebelum dilakukan pemasangan, pastikan Anda sudah mendownload file Vue. Apabila
belum, Anda dapat mengunduhnya di …

Gambar 6: Pemasangan Vue pada halaman HTML.

Pada Gambar 6, pada bagian kiri, dapat dilihat bahwa file index.html terletak pada direktori
yang sama dengan vue.js sehingga pemanggilan file Vue pada halaman HTML dilakukan
seperti pada baris ke-4.

Apabila file index.html dijalankan pada web browser (misalkan Google Chrome), maka
pada bagian console di developer tools akan tampil pesan dari Vue.

8
 Gambar 7: Menjalankan file index.html dan melihat isi console.

Console terdapat pada bagian developer tools. Anda dapat membukanya dengan
mencarinya pada menu di web browser. Apabila pada console sudah tampil seperti pada
Gambar 7, ini artinya Vue sudah siap untuk digunakan.

Struktur Dasar
Vue menggunakan konsep Model-View-ViewModel sehingga langkah selanjutnya adalah
membuat Model, View, dan ViewModel. Anda dapat membuat View, Model, atau
ViewModel lebih dahulu, tergantung selera Anda. Yang paling utama adalah Anda dapat
menghubungkan keduanya.

Gambar 8: Membuat View, Model, dan ViewModel.

9
Pada Gambar 8, dapat dilihat bagian View terletak pada baris ke-9, bagian Model pada
baris ke-17, dan ViewModel pada baris ke-14. Sebetulnya, pada framework Vue, MVVM
hanyalah konsep dasar dan bukan cara untuk menyebut bagian-bagian tertentu. Bagian
dari konsep ini memiliki sebutan masing-masing, seperti Model disebut Data, View disebut
Template, dan ViewModel disebut Vue Instance.

Ketika Anda membuat template, pastikan Anda memberikan atribut id pada elemen
tersebut dan sangat disarankan untuk menggunakan elemen div, seperti pada Gambar 8
baris ke-10.

Kemudian dapat dilanjutkan dengan membuat bagian script sebelum penutup body. Pada
bagian ini, Anda dapat membuat Vue Instance seperti pada Gambar 8 baris ke-15.
Pastikan Anda memberi parameter berupa object yang berisi kunci el untuk
menghubungkan antara Template dengan Vue Instance.

Setelah itu, Anda dapat mendefinisikan Data melalui object yang dikirim pada Vue
Instance, yaitu melalui kunci data dan berisikan fungsi (disarankan menggunakan arrow
function) yang mengembalikan sebuah object.

Data Binding
Ini adalah cara Vue untuk mengirimkan data ke template, maupun sebaliknya. Hal ini
sangat sering, bahkan pasti dilakukan ketika menggunakan Vue.

Langkah yang harus dilakukan untuk mengirim data ke template (One Way Data Binding)
adalah dengan membuat datanya terlebih dahulu. Pembuatan data ini dilakukan dengan
menambah properti object di bagian data pada Vue Instance.

Gambar 9: Menambah data baru pada bagian data.

10
Setelah data dibuat, maka selanjutnya adalah mengambil nilainya pada template. Hal ini
dilakukan dengan menggunakan teknik yang disebut interpolation. Teknik ini secara
dilakukan pada bagian template, kemudian menggunakan simbol kurung kurawal sebagai
pembungkusnya dan nama dari data yang sudah ditambahkan tadi sebagai isinya.

Gambar 10: Melakukan interpolation, mengambil nilai dari data.

Sampai tahap ini, apabila Anda jalankan kembali file index.html, maka akan tampil nilai
dari data yang ditampilkan melalui template tadi.

Gambar 11: Tampilan index.html setelah dilakukan interpolation.

Teknik selanjutnya adalah bagaimana cara Vue untuk mengirim data dari template ke
bagian data (Two Way Data Binding). Hal ini dilakukan dengan cara membuat tampilan
untuk memasukkan data pada template, akan kita coba dengan menggunakan input text.

Setelah itu, Anda dapat menambahkan atribut v-model yang berisi nama dari data yang
akan menyimpan nilai dari elemen input text tersebut.

Gambar 12: Membuat elemen input text dengan atribut v-model.

Sampai tahap ini, apabila Anda menambahkan interpolation di dalam template ini, maka
Anda dapat melihat perubahan ketika Anda mengetikkan sesuatu pada input text.

11
 Gambar 13: Menambah interpolation

Gambar 14: Hasil dari Two Way Data Binding.

Methods
Singkatnya, methods adalah kumpulan fungsi/method yang dapat digunakan dalam
sebuah aplikasi Vue. Deklarasi method dilakukan dengan menuliskannya pada bagian vue
instance.

Gambar 15: Deklarasi methods.

Fungsi-fungsi yang terdapat dalam methods, dapat digunakan dan dipanggil langsung
pada aplikasi. Penggunaannya dapat dilakukan di lakukan di bagian template melalui
interpolation maupun sebagai event handler, dapat juga dipanggil melalui fungsi lain
(sebuah fungsi memanggil fungsi lainnya).

Gambar 16: Pemanggilan fungsi.

Ketika fungsi dipanggil melalui interpolation, maka pada bagian template akan ditampilkan
nilai balik (return value) dari fungsi tersebut.

12
 Gambar 17: Hasil pemanggilan fungsi melalui interpolation.

Computed Properties
Computed Properties merupakan bagian yang mirip dengan data, tetapi nilainya didapat
dari sebuah fungsi. Pendeklarasiannya pun mirip dengan data, tetapi kali ini menggunakan
kunci computed. Pastikan fungsi yang digunakan pada setiap computed property memiliki
nilai yang di-return, karena ini akan menjadi nilai dari sebuah computed property.

Gambar 18: Deklarasi computed properties.

Ketika sebuah computed propery sudah didefinisikan, maka selanjutnya dapat digunakan
pada bagian template maupun di dalam method.

Gambar 19: Menggunakan computed property pada template.

Gambar 20: Menggunakan computed property pada sebuah method.

Ketika menggunakan sebuah computed property, yang harus diperhatikan adalah

penggunaannya yang mirip dengan data, bukan dengan fungsi sehingga tidak perlu
menggunakan tanda kurung buka dan tutup.

13
#4
Komponen pada Vue

Dasar Komponen
Pada sebuah aplikasi Vue, terdapat beberapa bahkan sangat banyak komponen yang
digunakan. Komponen ini merupakan bagian-bagian yang membangun sebuah aplikasi.
Dengan Vue, sebelum sebuah komponen dapat digunakan, wajib untuk dibuat lebih
dahulu. Pembuatan komponen dilakukan dengan menggunakan perintah
Vue.component(name, options).

Gambar 21: Membuat komponen dengan nama kiriman.

Gambar 22: Menggunakan komponen.

Sebuah komponen juga dapat memiliki data, method, dan computed properties, seperti
yang sudah kita pelajari sebelumnya.

14
 Gambar 23: Komponen dengan struktur lengkap.

15
#5
Penutup

Vue VS React VS Angular

Vue yang terlahir sebagai sebuah library, saat ini sudah bertumbuh dengan sangat pesat.
Bahkan popularitasnya menandingi library lain yang sudah ada lebih dulu.

Dengan konsep MVVM-nya yang merupakan sebuah konsep yang diadaptasi dari
AngularJS sehingga ada kemiripan pada pendefinisian data, directive, dan banyak lagi.

Kemudian Vue menggunakan konsep virtual DOM yang merupakan sebuah konsep yang
diadaptasi dari React sehingga memiliki kecepatan yang sangat powerful.

Penutup
Framework hanyalah sebuah alat bantu untuk programmer agar dapat membuat aplikasi
dengan lebih cepat dan mudah. Bukan hanya cepat dalam hal pengerjaan, tetapi juga
kecepatan dalam performa aplikasi. Bukan hanya kemudahan dalam pengerjaan, tetapi
juga kemudahan dalam perawatan aplikasi. Hal ini menjadikan framework menjadi sangat
wajib dikuasai seorang programmer yang mulai berkeinginan untuk masuk ke dunia
industri perangkat lunak.

Memilih framework sama persis seperti memilih bahasa pemrograman, semua tergantung
pada kebutuhan masing-masing sehingga tidak sepantasnya perbedaan framework
menjadi sebuah jarak dan saling sindir satu sama lain.

Mari kita berkompetisi untuk prestasi!

Mari kita bersatu kembangkan dunia IT Indonesia!

Mari berkolaborasi!

16
Lampiran: Full kode
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="vue.js"></script>
<title>VueJS - Framework dengan Kekuatan Super</title>
</head>
<body>

<!-- VIEW / TEMPLATE -->

<div id="app">
<!-- <input type="text" v-model="judul"> -->
<!-- {{ judul }} -->
<!-- Memanggil method/fungsi -->
<!-- <br> -->
<!-- {{ hitung(1, 2) }} -->
<!-- Menggunakan nilai computed property -->
<!-- {{ nama }} -->
<!-- {{ panggilNama() }} -->
<!-- Memasang komponen -->
<kiriman></kiriman>
</div>

<script type="text/javascript">
// Membuat komponen
Vue.component('kiriman', {
template: `
<div>
<h2>{{judul}}</h2>
<p>{{ambilIsi()}}</p>
</div>
`,
data: () => {
return {
judul: 'Hari ini.',
};
},
methods: {
ambilIsi() {
return 'Siang yang cerah. Ini adalah percobaan.';
},
},
});
// ViewModel / Vue Instance
new Vue({
el: '#app',
// MODEL / DATA
data: () => {
return {
judul: 'Aku bisa VueJS',
};
},
// METHODS
methods: {
hitung(a, b) {
return a + b;
},
panggilNama() {
window.alert(this.nama);
},
},
computed: {
nama() {
return "Hadi Hidayat Hammurabi";
},
},
});
</script>
</body>
</html>

17