Vue js? apa itu ?
Pada kesempatan ini admin akan, membagikan pengetahuan admin tentang Vue.js itu sendiri, fitur-fitur pada Vue.js dan sedikit contoh dari Vue.js itu sendiri. Simak baik-baik ya.
Vue.js merupakan salah satu kerangka kerja berbahasa javascript yang digunakan pengembang untuk keperluan antarmuka. Vue js merupakan salah satu kerangak kerja yang cukup populer saat ini karena tidak terlalu rumit atau lebih simpel daripada kerangka kerja lainnya. Vue js diciptakan oleh Evan You yang dulunya kerja di Google, Evan You juga bekerja dalam mengembangkan salah satu kerangka kerja yang dibuat oleh Google yaitu Angular.js. Vue.js ini dirilis pada bulan Februari 2014 dan untuk saat ini sudah banyak diminati dan banyak dikembangkan oleh para pengembang Website.
Fitur Vue.js
Fitur-Fitur yang dimiliki oleh Vue.js antara lain:
- Virtual DOM : Virtual DOM merupakan fitur yang membuat seolah-olah kita membuat sebuah DOM yang nyata, tetapi hanya replika saja yang dibuatnya. Fitur ini juga terdapat pada React dan Ember.
- Data Binding : Fitur ini digunakan untuk memanipulasi value pada atribut HTML seperti mengubah style, dengan bantuan dari binding directive dari Vue.js yaitu v-bind:
- Components : Components ini sangat penting dalam Vue.js, kenapa ?? karena dapat digunakan untuk kostumisasi elemen pada HTML dan dapat digunakan berulang-ulang.
- Event Handling : v-on adalah atribut yang ditambahkan ke elemen DOM untuk event di VueJS.
- Computed Properties : Ini adalah salah satu fitur penting dari VueJS. Membantu untuk melihat perubahan yang diterjadi pada elemen UI dan melakukan perhitungan yang diperlukan. Tidak perlu pengkodean tambahan untuk ini
- Templates: VueJS menyediakan template berbasis HTML yang mengikat DOM dengan data instance Vue. Vue mengkompilasi template menjadi fungsi DOM Render virtual. Kita dapat menggunakan template dari fungsi render dan untuk itu kita harus mengganti templat dengan fungsi render.
- Directives :VueJS memiliki directives bawaan seperti v-if, v-else, v-show, v-on, v-bind, dan v-model, yang digunakan untuk melakukan berbagai aksi di frontend
- Watchers : Watchers diterapkan pada data yang berubah. Misalnya, bentuk elemen input. Di sini,kita tidak perlu menambahkan event tambahan. Watcher menangani perubahan data apa pun yang membuat seolah-olah kode lebih sederhana dan cepat.
- Routing :Digunakan untuk penghubung antar halaman, fitur ini menggunakan vue-router sebagai tambahannya. Fitur ini memungkinkan Vue.js membuat website single page application (SPA) yaitu hanya menggunakan 1 file html yang bisa memanggil semua halaman yang kita punyai.
- Lightweight : Skrip dari Vue.js ini sangat sederhana, tetapi powerfull dan membuat performanya sangat cepat.
berikut adalah contoh penggunaan vue.js
Index.html
<!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>Ayongoding.net</title> </head> <body> <div id="app"> <h1>{{datas}}</h1> </div> </body> <script src="vue.js"></script> <script> new Vue({ el: '#app', data() { return { datas: 'Ayongoding.net', } } }) </script> </html> |
dan hasil dari koding diatas sebagai berikut.
Mungkin hanya ini yang dapat admin sampaikan, apabila masih ingin bertanya bisa tinggalkan dikolom komentar, terima kasih
SALAM NGODING.
Sumber: Tutorialspoint.com