Dalam membuat website ataupun aplikasi, umumnya pembuatan dibagi menjadi dua bagian, yaitu back end dan front end. Di dalam front end ini terdapat banyak program yang dijalankan, mulai dari jQuery, CSS ataupun Vue JS. Secara singkat, VueJS digunakan untuk membuat tampilan user interface maupun single page application (SPA).
Pengertian Vue JS
Vue merupakan salah satu kerangka yang masuk dalam keluarga Javascript dengan sifat progresif dan termasuk open source. Berbeda dari kebanyakan Javascript lainnya, Vue dirancang mulai dari dasar dengan tujuan untuk memudahkan adopsi secara bertahan. Library yang dimiliki difokuskan untuk tampilan layer saja.
Belajar Vue JS
-
Persiapan Tools
Seperti halnya belajar pemrograman lainnya, kali ini Anda juga membutuhkan tools Vue untuk pembelajaran. Beberapa tools yang perlu Anda persiapkan adalah teks editor, NPM dan Node.JS, browser dan Vue CLI. Teks editor disesuaikan dengan style masing-masing, boleh menggunakan Notepad++, Visual Studio Code ataupun sejenisnya.
-
Latihan Membuat Aplikasi
Latihan pembuatan aplikasi ini menggunakan script code di bawah ini dan nantinya akan di bahas satu per satu komponen yang terdapat di dalamnya. Persiapkan teks editor terlebih dahulu, lalu copy dan paste code berikut 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>Aplikasi Vue #1</title>
<script src=”https://cdn.jsdelivr.net/npm/vue”></script>
</head>
<body>
<div id=”app”>
{{ message }}
</div>
<script>
var app = new Vue({
el: “#app”,
data: {
message: “Selamat Datang!”
}
})
</script>
</body>
</html>
Jangan lupa untuk menyimpan script di atas ke dalam bentuk .HTML. Selanjutnya, bukalah file tersebut menggunakan browser Anda. Halaman baru akan terbuka dan terdapat tulisan “Selamat Datang!”. Teks “Selamat Datang!” bisa Anda edit sebebasnya.
-
Struktur Dasar Vue
Pembahasan struktur dasar Vue kali ini akan diambil dari contoh script di atas. Secara garis besar, ketika Anda menggunakan Vue, Anda harus melakukan impor atau menyisipkannya ke dalam kode HTML. Contohnya struktur di atas dimulai dari code CDN berikut :
<script src=”https://cdn.jsdelivr.net/npm/vue”></script>
Setelah code tersebut ditulis, tentunya Anda membutuhkan elemen kontainer lainnya yang digunakan Vue agar dapat menampilkan data. Elemen yang digunakan disini adalah <div> yang dikombinasikan dengan id=”app”. Sehingga source code di bawahnya menjadi :
<div id=”app”>
{{ message }}
</div>
Setelah menambahkan elemen tadi, Anda harus membuat objek “app” yang berasal dari class vue( ). Ini digunakan untuk menentukan elemen dan data yang ditampilkan nantinya. Pada kasus ini bisa menggunakan atribut “el” yang ditujukan sebagai kata ganti “elemen”. Ada juga atribut “data” yang digunakan sebagai tempat penyimpanan variabel berisi data. Script code yang ditampilkan menjadi :
<script>
var app = new Vue({
el: “#app”,
data: {
message: “Selamat Datang!”
}
})
</script>
Baca juga : Rekomendasi Bahasa Pemrograman Terbaik
-
Mengenal Data Binding di Vue
Kata “binding” dapat diartikan sebagai ikatan atau diterjemahkan menjadi mengikat data. Adapun yang dimaksud data binding disini adalah teknik Vue untuk mengikat atau menyambungkan data yang sudah ada di Javascript dengan HTML. Umumnya data binding ini terbagi menjadi 2 macam, yaitu one way binding (satu arah) dan two way binding (dua arah).
Contoh
<!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>Percobaan Vue #2: One Way Binding</title>
<!– Menyisipkan Vuejs dari CDN –>
<script src=”https://cdn.jsdelivr.net/npm/vue”></script>
</head>
<body>
<!– elemen kontainer untuk aplikasi –>
<div id=”app”>
<input type=”text” v-bind:value=”message”>
<p>{{ message }}</p>
</div>
<!– aplikasi Vue Hello –>
<script>
var app = new Vue({
el: “#app”,
data: {
message: “Selamat Datang!”
}
})
</script>
</body>
</html>
Simpan script code di atas dalam bentuk .HTML dan bukalah di browser masing-masing. Hasil yang ditemukan adalah terdapat sebuah kotak di atas tulisan “Selamat Datang!”. Cobalah untuk mengetikkan tulisan lain di dalam kotak tersebut. Data tulisan di bawahnya tidak akan berubah atau tidak terpengaruhi.
Inilah yang dimaksud dengan binding satu arah, yang artinya adalah Anda bisa merubah value dari “message” input field tadi. Pada binding satu arah ini code yang digunakan adalah v-bind: yang terdapat pada atribut value yang digunakan untuk mengambil data “message”.
Sekarang cobalah ganti line code <input type=”text” v-bind:value=”message”> menjadi <input type=”text” v-model:value=”message”>. Jangan lupa untuk menyimpannya terlebih dahulu dan lihat hasilnya.
Hasilnya adalah ketika Anda mengetikkan tulisan apapun pada kotak yang ada, maka tulisan di bawahnya akan diganti. Inilah yang dinamakan sebagai binding dua arah. Perbedaannya hanya terletak pada direktif v-model untuk binding dua arah, sedangkan binding satu arah menggunakan v-bind.
-
Berkenalan Dengan Direktif
Ketika mempelajari Vue JS, direktif ini sangat wajib untuk dipelajari dan dipahami. Secara umum, direktif diartikan sebagai petunjuk, perintah atau arahan. Umumnya direktif pada Vue ini diawali dengan code “v-“. Ada beberapa direktif yang perlu Anda ingat yang terbagi menjadi 4 bagian, yaitu :
- Direktif Data Binding
v-model – direktif yang digunakan pada binding data dua arah.
v-bind – direktif yang digunakan pada binding data satu arah.
v-text – direktif yang digunakan untuk menampilkan data dalam bentuk plain text.
v-html – direktif yang digunakan untuk menampilkan data HTML.
v-once – direktif yang digunakan untuk menampilkan data satu kali, perlu dicatat bahwa data berubah, tidak bisa dirender ulang.
- Direktif Conditional Rendering
v-else-if – digunakan apabila memiliki lebih dari dua kondisi atau bahkan banyak.
v-if – digunakan apabila terdapat satu kondisi saja.
v-else – digunakan apabila memiliki dua kondisi.
- Direktif Pengulangan
Berbeda dari direktif lainnya, direktif pengulangan digunakan apabila data tersaji dalam bentuk list dan jumlahnya banyak. Hanya terdapat satu direktif pada direktif pengulangan ini, yaitu v-for. V-for ini bisa digabungkan dengan fungsi direktif v-if.
- Direktif Event
Sama seperti direktif pengulangan, pada direktif untuk event ini hanya terdiri atas v-on atau penulisannya disingkat menjadi “@” saja. Direktif ini berfungsi untuk mengatasi event, contohnya seperti ketika tombol disentuh, scroll halaman, klik halaman tertentu dan sebagainya.
Nah demikian pembahasan mengenai apa itu Vue JS untuk pemula dan contoh-contohnya. Untuk Anda yang tertarik belajar Angular JS dan React JS, bisa langsung saja buka pada pembahasan artikel sebelumnya.
Perlu Anda ketahui bahwa Qwords selaku penyedia domain dan hosting murah di Indonesia selalu berupaya memberikan layanan terbaik untuk para Sahabat Qwords semuanya. Nah jika tertarik Anda bisa langsung pesan saja di Qwords.com dan temukan promo-promo menariknya.
Terima kasih
