1. Getting Start Vue.Js
Chapter ini aku akan belajar Vue.js mulai dari nol. Mulai dari installasi termasuk trooubleshoot saat melakukan pemrograman dengan menggunakan vue.js. Saat memulai vue ini aku menggunakan operating system ubuntu 16.04 LTS. Semua error dan pesan kesalahan serta penyelesaiannya akan aku tulis dalam catatan di mediumku ini.
Catatan Sebelum Memulai :
- Operating System yang aku gunakan saat belajar Vue adalah Ubuntu 16.04 LTS
- Vue tidak kompatible dengan browser IE
- Versi terakhir saat aku belajar vue ini adalah 2.6.10
- Disarankan menginstall add-on Vue Devtool di browser kesayangan Anda
- Untuk Download Vue.js bisa melaui link berikut
- Jika tidak donwload bisa insert kode berikut
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Lets Start
- Pertama aku buat projek baru, sederhananya dengan 3 file : index.php, vue.js, dan main.js
- Untuk file Index.php diisi dengan pemrograman sederhana seperti berikut :
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8">
<title>Belajar Vue</title><! — Include File Vue.js →
<script src=”vue.js”></script>
</head>
<body>
<div id=”app”>
{{ message }}
</div>
</body><! — Include Main.js →
<script src=”main.js”></script>
</html>
Dimana pada program tersebut kita memanggil file vue.js yang sudah kita donwload atau bisa menggunakan link seperti yang aku share diatas. tampilannya kurang lebih seperti berikut :
- Untuk file main.js diisi dengan pemrograman vue seperti berikut :
var app = new Vue({
el: ‘#app’,
data: {
message: ‘Belajar Vue Pertamakali’
}
})
Pemrograman sederhana pada vue yang digunakan untuk mengganti isi message pada halaman index.php dengan menggunakan vue.
pemrograman sederhana tersebut akan mengambil id App (#app) pada halaman index.php, kemudian merubah isi parameter {{message}} sesuai dengan keinginan kita. maka ketika di jalankan dan dibuka di web akan muncul tampilan seperti berikut :
