Pengenalan Framework JavaScript Vue.js
Perkembangan halaman Web dari sisi client-side yang semakin dinamis atau powerfull/interaktif tidak terlepas dari penggunaan bahasa pemrograman JavaScript melalui Web Browser--dimana sebelumnya jika halaman Web dinamis dapat dikatakan bergantung dari sisi server-side seperti menggunakan bahasa pemrograman PHP untuk berinteraksi dengan database.
Membangun halaman Web yang dinamis dan iteraktif menggunakan JavaScript, tentunya tidak akan terlepas dari kebutuhan untuk membuat berbagai fungsi. Bisanya fungsi tersebut dituliskan atau dipangging kembali secara berulang-ulang. Untuk mengefisensikan pengerjaan pembuatan fungsi tersebut, dibuatlah kedalam komponen-komponen yang terstruktur agar dapat digunakan kembali (reuse-components) yang disebut dengan Framework.
Why Vue.js so popular
Sumber: https://www.excellentwebworld.com/what-is-vue-js-used-for/
Beberapa Framework JavaScript yang populer digunakan untuk membangun halaman Website seperti, Angular, React,dan Vue. Namun pada pembahasan kali ini akan berfokus kepada framework Vue.js untuk men-develop halaman Web yang dinamis dan interaktif.
Framework Vue (dibaca /vju;/ atau seperti view) adalah sebuah progressive framework, yaitu pendekatan pengimpelentasian pembuatan halaman Web, dimulai dari sesuatu yang kecil dan dilakukan secara bertahap untuk menghasilkan halaman Web yang cukup powerfull (interaktif dan dinamis).
A. Menggunakan Vue
Sebagai persiapan awal, versi Vue.js yang digunakan yaitu Versi 2. Pastikan menggunakan Vue.JS Versi 2, agar dapat mengikuti tahapan berikutnya. Sebagai catatan, bahwa Vue tidak mendukung Web Browser Internet Explorer versi IE8 dan di bawahnya, karena menggunakan fitur ECMAScript 5.
Tahap-1. Membuat Folder Projek pada Web Server
Sama seperti pada tahapan pembuatan tugas sebelumnya, Pastikan telah menginstall aplikasi XAMPP. Kemudian buatlah folder dengan nama hello-vue pada sub folder C:\xampp\htdocs\ (Direktori XAMPP pada OS Windows).
Tahap-2. Menjalankan Vue.js
Cara cepat dan mudah untuk menjalakan Vue.js yaitu di-import melalui tag script melalui alamat URL CDN (content delivery network) yang berisikan framework Vue.js itu sendiri. Untuk memastikan bahwa framework Vue.js dipanggil/load pertama kali sebelum menjalangkan fungsi atau DOM dari Vue.js, maka hendaknya dilakukan didalam tag head pada dokumen HTML.
Untuk tahapan protoype atau belajar dapat menggunakan URL CDN berikut ini.
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
Sedangkan jika untuk tahapan produksi, direkomendasikan menggunakan Vue.js dengan nomer versi yang spesifik untuk menghindari hal yang tidak terduga jika terdapat versi terbaru.
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>
</head>
Berikut ini contoh template dokumen html yang disimpan kedalam file index.html untuk menjalankan framework Vue.js dengan mudah.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello VueJS</title>
<style type="text/css">
.message {
color: orange;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 class="message">{{ message }}</h1>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
});
</script>
</body>
</html>
Penjelasan mengenai source-code pada file index.html diatas sebagai berikut.
id="app": Mendefenisikan elemen HTML yang akan dikaitkan (bind) oleh objek Vue untuk memanipulasi DOM dokumen HTML.{{ message }}: Inti dari Vue.js yaitu memungkinkan merender (membentuk/menampilkan) data secara deklaratif (ringkas dan jelas) ke dalam halaman/dokumen Web--disebut template--dengan mudah.var app = new Vue: Membuat instansiasi dari objek Vue kedalam variabelapp(dapat diganti dengan nama apapun) untuk memanipulasi DOM dokumen HTML yang dibangun.el: '#app': Propertiel(element) untuk menentukan elemen HTML yang akan dijadikan sebagai output/keluaran dari variabelappsebagai objek Vue.data: { message: 'You loaded this page on ' + new Date().toLocaleString() }: Properti yang digunakan untuk mengorganisir data yang terdiri darivariabledanvalue, agar dapat diakses serta dimanupulasi dalam template Vue. Untuk pengerjaan tugas, cukup gantivaluevariablemessagemenjadi, 'Selamat Pagi Tutorial Online!'.
Dari proses instansiasi objek Vue.js, maka DOM dokumen HTML dan berbagai data yang didefenisikan melalui variabel app menjadi saling terhubung dan reactive. Arti reaktif pada Vue.js yaitu memungkinkan memanipulasi elemen HTML secara live/nyata tanpa harus memuat ulang (refresh) halaman Web. Contoh sederhana dapat diuji melalui konsol pada Web Browser.
B. Demo Implementasi Vue.js
Berikut ini demonstrasi implementasi Vue.js untuk mengetahui bagaimana framework JavaScript ini berkerja untuk memanipulasi dokumen HTML dengan mudah.
Pada video demonstrasi aplikasi Vue.js sederhana diatas, dapat dimanfaatkan untuk mengerjakan tugas yang diberikan. Sebagai catatan, meskipun untuk menjalakan Vue.js tidak diperlukan Web Server, namun untuk tugas tetap dijalakan pada Web Server. Oleh karena itu pada saat pembuatan video tugas, jika tidak menggunakan XAMPP, harap menjelaskan Web Server yang digunakan.
Warning!
We are not responsible for any loss whatsoever due to this site, also if you want to take this article please read terms of use or touch us via contact page.
If there is question, please discuss below. Very welcome and expected to provide corrections, criticisms, and suggestions.
Be the first :D
