Halo Kawan-Kawan, kali ini kita akan Membikin sebuah artikel Belajar Vue js Demi Pemula. Nah Demi temen-temen yang belum tau, Vue js merupakan salah satu Framework Frontend yang cukup terkenal Demi ini. Tapi, kenapa Vue js? disini kita akan berkenalan lebih dalam dengan Framework Frontend satu ini.
Persiapan Belajar Vue js Demi Pemula
Sebelum Kawan-Kawan Mau mendalami Vue js ini, Mimin sarankan kalian belajar Markup Language Demi Pemrograman Web terlebih dahulu Yakni HTML (duniacoding.info/tag/html/) dan CSS, selain itu Kawan-Kawan juga Pandai berkenalan dengan Javascript dulu disini jgthms.com/javascript-in-14-minutes.
Nah, setelah kenalan dengan beberapa Markup Language diatas, kita akan mulai berkenalan dengan Framework hijau satu ini.
Perkenalan Vue js
Nah di artikel Belajar Vue js Demi pemula #1 ini kita hanya akan terfokus dengan apa itu Vue js ya. Seperti yang kalian sudah tau, Vue js adalah Framework Frontend pada Web Development, berbeda dengan React Js yang di Backup Perusahaan sebesar META, Vue js ini dikembangkan oleh perseorangan (Komunitas).
Apa itu Vue.js?
Menurut Dokumentasi Formal Vue js di docs.vuejs.id. Vue (Langkah pengucapannya /vjuː/, seperti view) adalah sebuah kerangka kerja nan progresif Demi membangun antarmuka pengguna.
Vue js ini adalah sebuah Framework yang difokuskan Demi Tampilan dari Web Apps saja, Selain itu Vue js juga merupakan Framework yang sangat mudah dipelajari dan mendukung Single Page Application (SPA).
Sejarah Vue.js
Vue.js Lahir tahun 2013, penemu Vue.js adalah Evan You, seorang Developer yang bekerja di Google dengan Framework Angular. Selama Menggunakan Angular, Evan merasa dia Mau Membikin sesuatu yang lebih ringan dan simple, oleh karena itu dia mulai Membikin sebuah Framework dengan nama Vue.js.
Yang sedikit Aneh dari Vue.js ini, dia sering menggunakan judul Anime sebagai penanda Versinya. Seperti Versi 3.0 dia namai One Piece, Versi 2.3 dia namai JoJo’s Bizarre Adventure. Aneh juga ya 😀
Memulai Vue.js
Nah, setelah puas berkenalan dengna Vue.js di Artikel belajar Vue js Demi pemula #1 ini kita juga akan mulai Demi “Ngoding” Vue js nih. Tenang saja disini kita Enggak akan Ngoding yang Rumit, kita akan memulai Vue.js dengan Langkah paling sederhana.
Menambahkan Script
Yap, Langkah paling mudah memulai Vue.js adalah Membikin file index.html Biasa, Lampau menambahkan script seperti kita menambahkan script biasanya, Enggak perlu melakukan instalasi terlebih dahulu, karena Pusat perhatian kita Demi ini adalah perkenalan dengan Framework hijau satu ini.
Terdapat 2 Jenis Script yang Pandai kita tambahkan kedalam file index.html kita
Pertama, Script versi development, berisi peringatan yang sangat membantu.
Kedua Script versi production, ukuran lebih optimal dan kecepatan yang telah ditingkatkan
Disini, kita akan memulai dengan Script yang pertama saja, Yakni yang bersi Development. Nah mari kita mulai Ngoding nya. Buat sebuah File index.html Lampau tambahkan script diatas.
File index.html
Nah, setelah Membikin index.html dan menambahkan script vue.js disana,, sekarang kita Pandai menambahkan Codingan Vue.js pertama kita. Kita buat yang simple saja, kita tambahkan syntax Hello World Demi Web kita.
Setelah menambahkan syntax diatas, kalian Pandai buka File index.html kalian dan akan muncul tampilan seperti ini
Nah, kita Pandai mudah memodifikasi tulisan Hello Wolrd! diatas dengan mengubah pesan: pada Script kita. Lampau kita tampilkan di HTML kita dengan Langkah memanggilnya Yakni {{ pesan }}.
Nah sekarang kita akan Membikin yang sedikit lebih keren, Yakni kita akan mengubah tulisan Hello World! secara langsung dari Website kita. nah disini kita akan mulai menggunakan Directive. Kita akan mempelajari hal ini lebih banyak di Artikel kedepan, tapi sekarang kita akan menggunakan Directive v-model. Caranya simple, cukup tambahkan Input dibawah h1 kita dengan v-model pesan.
File index.html
Nah sekarang akan muncul tampilan seperti ini di Website kita.
Nah sekarang kalian Pandai mengubah Tulisan Hello World! secara langsung di Website tanpa perlu merefresh website Kalian, keren bukan?.
Konklusi
Nah Demi artikel Belajar Vue js Demi pemula kali ini kita cukupkan Tamat disini dulu ya. Di artikel Belajar Vue js Demi pemula kali ini kita telah berkenalan dan praktik sedikit dengan Vue ya Kawan-Kawan.
Nah, kedepannya Artikel belajar Vue js Demi pemula ini akan dibuat ber-series ya Kawan-Kawan, jadi kalian Pandai mengikuti Artikel ini Demi belajar Vue js kalian!.