Halo teman ngide, kali ini kita akan belajar salah satu framework javascript yaitu Vue. Jadi Vue ini adalah progressive javascript framework yang dikhususkan untuk membuat user interface dari project aplikasi berbasis web atau bisa dibilang juga Vue ini lebih fokus kepada view layer.
Soal ukurannya, Vue ini memiliki ukuran file yang cukup kecil yaitu hanya 20kb saja teman-teman sudah bisa mendapatkan semua fitur-fitur dari Vue yang powerful. Adapun fitur-fitur menarik dari vue js ini seperti:
- Reactive Interfaces
- Declarative Rendering
- Data Binding
- Directives
- Template Logic
- Components
- Event Handling
Daftar Isi
Vue js mendukung fitur component yang berarti kamu bisa memecah project yang sedang kamu buat menjadi beberapa part-part kecil sehingga lebih mudah untuk di maintenance dan di testing. Selain itu masing-masing component juga bisa digunakan di component lainnya sehingga sangat bagus untuk mengurangi pemakaian kode yang berulang-ulang.
Selain menggunakan javascript sebagai codebase utama, Vue juga menggunakan HTML dan CSS dalam pembuatan template di masing-masing component. Jadi buat temen-temen yang memiliki dasar HTML, CSS dan Javascript yang bagus, belajar Vue tidak akan sulit.
Lalu bagaimana cara mengistall Vue?
Pertama dengan mendownload file vue secara langsung atau lewat cdn.
Kamu bisa meng-include Vue secara langsung dengan menambahkan script tag di project yang sedang dibuat. Ini berarti Vue bisa di integrasikan di project yang sedang dibuat tanpa harus membuat project dari awal.
<script src="https://unpkg.com/vue"></script>
Kedua lewat NPM
Jika di laptop/PC teman-teman sudah terinstall npm dan nodejs, maka kita bisa menginstall Vue lewat npm. Kamu hanya memanggil perintah di bawah ini dan vue akan terisntall sebagai salah satu depedency di project kamu.
# latest stable
$ npm install vue
Ketiga Lewat Vue CLI
Vue memiliki sebuah CLI (command line interface) yang sangat membantu kamu untuk men-setup project Vue dengan lebih mudah. Jika kamu ingin membuat sebuah project single page application yang scopenya besar sangat disarankan jika kamu menginstall Vue menggunakan CLI.
Kenapa? Kerena kita akan dibuatkan project dengan structure yang lebih rapi, dan fitur-fitur pedukung proses modern development seperti hot-reloading, lint, testing, dan otomatis build file baik itu untuk development atau production.
Contoh penggunaaan Vue CLI seperti berikut:
# install vue-cli
$ npm install --global vue-cli
# create a new project using the "webpack" template
$ vue init webpack my-project
# install dependencies and go!
$ cd my-project
$ npm install
$ npm run dev
Mencoba Vue
Sekarang saatnya kita mencoba Vue js tapi dengan cara yang paling sederhana yaitu meng-include file vue js lewat script tag dan mencoba salah satu fitur dari view js yaitu reactive data binding.
**1. Buat file index.html **dan isi seperti dibawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Kenalan Vue</title>
</head>
<body>
<div id="app">
</div>
</body>
<script src="https://unpkg.com/vue"></script>
</html>
2. Buat Vue instance
Caranya dengan menambahkan sebuah script baru di bawah script untuk menginclude Vue
....
<script>
new Vue({
el: '#app',
data: {
message: 'Belajar Vue'
}
});
</script>
Sedikit penjelasan dari kode diatas adalah kita membuat sebuah Vue instance baru dengan beberapa option.
property el berfungsi untuk memberi tahu Vue element mana yang akan menjadi DOM untuk menapilkan data dari Vue js instance tersebut.
Property data berfungsi untuk menampung data object apa saja yang dimikili oleh instance tersebut, contoh diatas kita mempunyai sebuah data message dengan nilai ‘Belajar Vue’.
Selanjutnya tambahkan kode {{ message }} di dalam div #app dan kamu coba buka file index.html tersebut di browser.
Jika tidak terjadi kesalahan maka kamu akan melihat text ‘Belajar Vue’ di browser kamu.
Nah file diatas adalah salah satu contoh paling simple bagaimana cara menampilkan sebuah data dari Vue kedalam sebuah view.
3. Reactive Data Binding
Selanjutnya kita akan mencoba ketika data di dalam Vue berubah maka tampilan di view juga akan berubah secara live atau tanpa harus mereload halaman.
Bagaimana caranya?
Kita coba tambahkan sebuah input type text di dalam div #app seperti di bawah ini.
....
{{ message }}
<br>
<input type="text" v-model="message">
Sekarang kamu coba ubah value di dalam text input itu maka secara otomatis viewnya juga ikutan berubah mengikuti nilai dari data message yang baru. Hal seperti inilah yang disebut dengan reactive data binding. Sangat keren bukan?
Kamu bisa melihat contohnya di fiddle berikut ini:
https://jsfiddle.net/t5f2f5x0/embed/
Jadi seperti itulah sedikit perkenalan dengan Vue. Ada banyak fitur menarik dari Vue seperti reactive data binding dan components yang sangat bermanfaat untuk kalian yang mau membuat single page application. Selain itu dengan kombinasi antara HTML, CSS dan Javascript membuat Vue lebih mudah dipelajari untuk kalian para frontend developer atau yang sudah memiliki basic dan kenal dengan HTML, CSS, dan Javascript.
Sudah siap untuk belajar Vue? Kita akan membuat beberapa series video tutorial Vue js di youtube. Stay tune.
