Pada tutorial ini, kita akan belajar tentang Vuejs. Mulai dari mengenal apa itu vuejs, hingga membuat aplikasi sederhana dengan Vuejs.
Apa itu Vue.js?
Vue.js adalah sebuah framework Javascript untuk membuat user interface dan single-page application (SPA).
Vue.js dikenal juga dengan Vue saja dan dieja seperti membaca kata view (/vju:/).
Pada arsitektur MVC (Model–View–Controller), Vuejs hanya akan mengambil peran pada layer View saja.
Sedangkan pada sisi backend, vue nggak perduli mau pakai apa.
PHP, Python, Nodejs… terserah! 😄
Yang penting Vue bisa menerima dan mengirim data, lalu membuat tampilan user interface (UI).
Pada dasarnya, fitur utama Vue lebih fokus pada rendering dan komposisi komponen.
Namun, untuk membuat aplikasi yang lebih kompleks, kita akan membutuhkan routing, state manajemen, template, build-tool, dll.
Lalu pertanyaannya:
Mengapa ada vuejs?
Kan sudah ada framework yang lain seperti Angular dan React?
Untuk menjawab pertanyaan ini, mari kita bahas sejarahnya…
Sejarah Singkat Vuejs
Vue awalnya dibuat oleh Evan You pada tahun 2013.
Evan You sebelumnya bekerja di Google dengan Angularjs. Dia kemudian punya ide untuk membuat sesuatu yang lebih ringan dari Angular.
Dari sanalah ia mulai membuat Vuejs.
Versi pertama (0.6) dirilis pada tanggal 8 desember 2013, selanjutnya berlanjut ke versi 0.7 pada tanggal 24 desember 2013.
Selengkapnya bisa kamu lihat di tabel ini:
Jadi:
“Vuejs hadir untuk memberikan alternatif framework yang lebih ringan dibandingkan yang lainnya”
Nah, sekarang bagaimana cara memulai belajar Vuejs?
Pertama, kita harus menyiapkan semua peralatannya. Barulah kita bisa mulai belajar Vuejs.
Apa saja peralatannya?
Peralatan untuk Belajar Vuejs
Ada beberapa peralatan yang harus kamu siapkan untuk mulai belajar Vuejs:
- Teks Editor (Rekomendasi: VS Code)
- Nodejs dan NPM
- Vue CLI
- Web Browser
- Untuk yang baru pertama belajar, kita akan pakai Teks editor dan web browser saja.
Mengapa?
Karena, kita perlu memahami konsep dasar Vuejs dulu.
Baru setelah itu kita akan menggunakan tools seperti Nodejs dan Vue CLI untuk membuat aplikasi yang kompleks.
Baiklah, kalau sudah siap..
..Mari kita mulai!
Membuat Aplikasi Pertama dengan Vuejs
Silahkan buka Teks editor, lalu buatlah file baru bernama hello.html.
Kemudian isi dengan kode berikut:
<!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>
<!-- Menyisipkan Vuejs dari CDN -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<!-- elemen kontainer untuk aplikasi -->
<div id="app">
{{ message }}
</div>
<!-- aplikasi Vue Hello -->
<script>
var app = new Vue({
el: "#app",
data: {
message: "Hello World!"
}
})
</script>
</body>
</html>
No comments:
Write comments