Halo Teman-teman, kali ini kita akan membuat sebuah artikel Belajar Vue js untuk Pemula. Nah untuk temen-temen yang belum tau, Vue js merupakan salah satu Framework Frontend yang cukup terkenal saat ini. Tapi, kenapa Vue js? disini kita akan berkenalan lebih dalam dengan Framework Frontend satu ini.
Persiapan Belajar Vue js untuk Pemula
Sebelum teman-teman ingin mendalami Vue js ini, Mimin sarankan kalian belajar Markup Language untuk Pemrograman Web terlebih dahulu yaitu HTML (duniacoding.info/tag/html/) dan CSS, selain itu teman-teman juga bisa berkenalan dengan Javascript dulu disini jgthms.com/javascript-in-14-minutes.
Nah, setelah kenalan dengan beberapa Markup Language diatas, kita akan mulai berkenalan dengan Framework hijau satu ini.
Perkenalan Vue js
Nah di artikel Belajar Vue js untuk pemula #1 ini kita hanya akan terfokus dengan apa itu Vue js ya. Seperti yang kalian sudah tau, Vue js adalah Framework Frontend pada Web Development, berbeda dengan React Js yang di Backup Perusahaan sebesar META, Vue js ini dikembangkan oleh perseorangan (Komunitas).
Apa itu Vue.js?
Menurut Dokumentasi Resmi Vue js di docs.vuejs.id. Vue (cara pengucapannya /vjuː/, seperti view) adalah sebuah kerangka kerja nan progresif untuk membangun antarmuka pengguna.
Vue js ini adalah sebuah Framework yang difokuskan untuk Tampilan dari Web Apps saja, Selain itu Vue js juga merupakan Framework yang sangat mudah dipelajari dan mendukung Single Page Application (SPA).
Sejarah Vue.js
Vue.js Lahir tahun 2013, penemu Vue.js adalah Evan You, seorang Developer yang bekerja di Google dengan Framework Angular. Selama Menggunakan Angular, Evan merasa dia ingin membuat sesuatu yang lebih ringan dan simple, oleh karena itu dia mulai membuat sebuah Framework dengan nama Vue.js.
Yang sedikit unik dari Vue.js ini, dia sering menggunakan judul Anime sebagai penanda Versinya. Seperti Versi 3.0 dia namai One Piece, Versi 2.3 dia namai JoJo’s Bizarre Adventure. Unik juga ya 😀
Memulai Vue.js
Nah, setelah puas berkenalan dengna Vue.js di Artikel belajar Vue js untuk pemula #1 ini kita juga akan mulai untuk “Ngoding” Vue js nih. Tenang saja disini kita tidak akan Ngoding yang Rumit, kita akan memulai Vue.js dengan cara paling sederhana.
Menambahkan Script
Yap, cara paling mudah memulai Vue.js adalah membuat file index.html biasa, lalu menambahkan script seperti kita menambahkan script biasanya, tidak perlu melakukan instalasi terlebih dahulu, karena Fokus kita saat ini adalah perkenalan dengan Framework hijau satu ini.
Ada 2 Jenis Script yang bisa kita tambahkan kedalam file index.html kita
Pertama, Script versi development, berisi peringatan yang sangat membantu.<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Kedua Script versi production, ukuran lebih optimal dan kecepatan yang telah ditingkatkan<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Disini, kita akan memulai dengan Script yang pertama saja, yaitu yang bersi Development. Nah mari kita mulai Ngoding nya. Buat sebuah File index.html lalu tambahkan script diatas.
File index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belajar Vue.js</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>
</html>
Nah, setelah membuat index.html dan menambahkan script vue.js disana,, sekarang kita bisa menambahkan Codingan Vue.js pertama kita. Kita buat yang simple saja, kita tambahkan syntax Hello World untuk Web kita.
<div id="app">
<h1>{{ pesan }}</h1>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
pesan: 'Hello World!'
}
})
</script>
Setelah menambahkan syntax diatas, kalian bisa buka File index.html kalian dan akan muncul tampilan seperti ini
Nah, kita bisa mudah memodifikasi tulisan Hello Wolrd! diatas dengan mengubah pesan: pada Script kita. Lalu kita tampilkan di HTML kita dengan cara memanggilnya yaitu {{ pesan }}.
Nah sekarang kita akan membuat yang sedikit lebih keren, yaitu kita akan mengubah tulisan Hello World! secara langsung dari Website kita. nah disini kita akan mulai menggunakan Directive. Kita akan mempelajari hal ini lebih banyak di Artikel kedepan, tapi sekarang kita akan menggunakan Directive v-model. Caranya simple, cukup tambahkan Input dibawah h1 kita dengan v-model pesan.
File index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belajar Vue.js</title>
</head>
<body>
<div id="app">
<h1>{{ pesan }}</h1>
<input type="text" v-model="pesan">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
pesan: 'Hello World!'
}
})
</script>
</body>
</html>
Nah sekarang akan muncul tampilan seperti ini di Website kita.
Nah sekarang kalian bisa mengubah Tulisan Hello World! secara langsung di Website tanpa perlu merefresh website Kalian, keren bukan?.
Kesimpulan
Nah untuk artikel Belajar Vue js untuk pemula kali ini kita cukupkan sampai disini dulu ya. Di artikel Belajar Vue js untuk pemula kali ini kita telah berkenalan dan praktik sedikit dengan Vue ya teman-teman.
Nah, kedepannya Artikel belajar Vue js untuk pemula ini akan dibuat ber-series ya teman-teman, jadi kalian bisa mengikuti Artikel ini untuk belajar Vue js kalian!.
