Vue merupakan salah satu dari sekian banyak library pada bahasa pemrograman Javascript yang digunakan untuk membangun tampilan antarmuka pengguna dari suatu aplikasi berbasis web.Vue awalnya didesain untuk kebutuhan web, namun seiring perkembangan teknologi yang mendukung Javacript, maka saat ini Vue juga mulai dapat digunakan untuk mengembangkan aplikasi berbasis desktop dan mobile.
Mengapa Memilih Vue ?
- Bukan One Man Show (dikembangkan oleh komunitas)
- Framework Javascript Populer
- Didukung Banyak Pustaka (library)
- Banyak digunakan perusahaan besar
- Mudah Dipelajari
- Mudah Diintegrasikan dengan Pustaka Lain
- Dukungan Official untuk Pengembangan Aplikasi Enterprise
Fitur Utama :
Component Base
Template
Modularity
Reactivity
Routing
State Management
- Virtual DOM
Virtual DOM
DOM singkatan dari Document Object Model merupakan model yang menggambarkan halaman HTML atau XML. DOM berbentuk struktur hirarkipohon yang menghubungkan masing-masing elemen HTML/XML (Node).
Component Base
Vue menggunakan pendekatan berbasis komponen, dimana setiap tampilan atau bagian dari tampilan merupakan komponen.
Dengan menggunakan pendekatan tersebut, tampilan yang kompleks dapat dipecah menjadi beberapa bagian dan setiap bagian itu bisa digunakan kembali pada bagian lainnya. Hal ini akan membuat kode lebih efisien dan bersih.
Kode komponen pada Vue ditulis menggunakan kode Javascript sebagai sebuah object.
Template
Berkaitan dengan poin sebelumnya, template merupakan kode yang dijadikan dasar dari suatu komponen dan biasanya berupa kode-kode HTML biasa.
Penulisan template pada Vue bisa sangat fleksibel dan out of the box.
Kita bisa tuliskan suatu template menjadi satu dengan kode komponennya seperti React, atau dipisahkan menggunakan tag template tag HTML yang id-nya telah didaftarkan, atau bisa juga dipisahkan pada file tersendiri yang umumnya menggunakan ekstensi Vue.
Modularity
Komponen pada Vue bisa dipecah menjadi modul-modul kecil.
Hal ini akan memudahkan developer dalam pengembangan atau pengelolaan kodenya terutama pada proyek aplikasi skala besar.
Reactivity
Secara default, Vue mendukung reactivity.
Reactivity adalah perubahan data pada suatu bagian tertentu yang akan secara interaktif mempengaruhi bagian yang lain.
Fitur ini akan memudahkan developer dalam pengembangan karena cukup dengan fokus pada flow data dan template.
Routing
Meski bukan pada core-nya, namun Vue menyediakan pustaka yang didukung secara resmi untuk menangani routing aplikasi, yaitu Vue router https://router.vuejs.org.
Routing merupakan kebutuhan untuk pembuatan aplikasi enterprise karena menyangkut bagaimana suatu halaman pada aplikasi tersebut diakses oleh pengguna melalui web browser.
State Management
Dikarenakan vue berbasis komponen, maka diperlukan pendekatan terpusat untuk menyimpan state atau data aplikasi yang bisa dibaca dan dimodifikasi oleh semua komponen yang membutuhkannya.
State management juga bukan core pada Vue seperti halnya routing, namun pustaka yang menangani state ini juga didukung secara resmi yaitu vuex https://vuex.vuejs.org.
PRAKTIKUM
Buat halaman yang menampilkan data diri sendiri, menggunakan vue js
Contoh :
Nama : Budi Santoso
Prodi : Teknik Informatika
Tahun Angkatan : 2015
Email : email@email.com
1. Buka kode editor
2. Buat folder seperti dibawah
3. Download vue js di https://vuejs.org/js/vue.js dan simpan pada vue/lib
4. Buat hamalan html dengan nama biodata.html
5. Salin code seperti dibawah ini
setelah itu buka dan tampilkan di browser
0 Komentar untuk "Pengenalan Vue.JS"