Jika kamu sudah belajar dasar javascript, maka selanjutnya adalah belajar framework. Show Pada tutorial ini, kita akan belajar tentang Vuejs. Mulai dari mengenal apa itu vuejs, hingga membuat aplikasi sederhana dengan Vuejs. Baiklah, tanpa banyak basa-basi.. Mari kita mulai! Apa itu Vuejs?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
( 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 VuejsVue 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 ( Selengkapnya bisa kamu lihat di tabel ini:
Keterangan versi lainnya dapat juga dilihat di Release Notes Vuejs Saat ini Vuejs dikelola oleh Tim inti yang terdiri dari Envan You dan komunitas. Ini bisa kamu lihat di: https://vuejs.org/v2/guide/team.html 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 VuejsAda beberapa peralatan yang harus kamu siapkan untuk mulai belajar Vuejs:
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 VuejsSilahkan buka Teks editor, lalu buatlah file baru bernama Kemudian isi dengan kode berikut:
Setelah itu, coba buka Maka hasilnya: Selamat 🎉 kamu sudah membuat aplikasi pertama dengan Vuejs. Berikutnya, saya akan coba jelaskan maksud dari kode di atas. Memahami Struktur Dasar kode VuejsSetiap kita akan menggunakan Vuejs, kita harus mengimpor atau menyisipkannya ke dalam kode HTML. Pada contoh di atas, kita menggunakan Vuejs yang dari CDN dengan kode ini:
Kemudian setelah itu, kita membutuhkan elemen kontainer yang akan digunakan oleh Vue untuk menampilkan data. Pada contoh di atas, kita menggunakan elemen
Terakhir, kita harus membuat objek
Atribut Lalu atribut Data ini bisa juga nanti kita dapatkan dari server maupun local storage. Pada Vuejs, kita menggunakan tanda kurung Oh iya, ini bersifat reaktif. Artinya: Jika isi variabel berubah.. maka Vue akan melakukan render ulang. Mari kita coba buktikan. Silahkan buka Inspect Element, kemudian pilih Console. Setelah itu, ubah isi variabel Contoh:
Maka hasilnya: Lihat! benar ‘kan? Data Binding di VueBinding secara bahasa artinya mengikat. Jadi Data Binding = Mengikat Data. Kok data diikat? Memangnya bisa lepas ya? Hehe 😄, bukan itu maksudnya.. Data binding di Vue adalah cara vue untuk menyambungkan data yang ada di kode Javascript dengan HTML. Nah, di Vuejs ada dua macam data binding:
Binding satu arah artinya, binding yang dilakukan hanya dalam satu arah saja (dari Javascript ke HTML). Contoh:
Hasilnya: Inilah yang disebut binding satu arah, meskipun kita mengubah nilai Coba
perhatikan kode aplikasinya, di sana kita menggunakan
Mengapa tidak pakai Seperti ini:
Dulunya kita bisa pakai ini pada vue versi lama, tapi untuk vue versi terbaru.. ini tidak bisa berlaku lagi. Kita disarankan menggunakan direktif Nah sudah paham kan yang binding satu arah? Berikutnya kita akan coba binding dua arah, silahkan buat kode aplikasinya seperti ini:
Hasilnya: Saat kita mengubah nilai dari input field, maka nilai yang ada di kode javascript-nya juga akan berubah. Inilah yang disebut two way binding. Sebenarnya kita hanya menggunakan direktif Penjelasan tentang direktif, akan kita bahas di tutorial berikutnya. Apa selanjutnya?Pada tutorial ini, kita sudah mengenal apa itu Vue dan juga belajar cara membuat aplikasi dengan Vue. Yang perlu diingat adalah:
Karena itu, selanjutnya silahkan pelajari tentang:
|