Belajar VueJs

Daftar isi Belajar vuejs 101

Perkenalan vuejs 101

Perkenalan kelas belajar vuejs, library javascript yang tidak kalah populer Link: Vue.JS

Vue instance dan property

Mulai belajar Vue js dengan membuat instance Vue dan mendeklarasikan propery-propertynya

Data binding vue

Mengenal konsep data binding, untuk menggabungkan property yang ada pada DOM agar mudah memanipulasinya secara langsung

Computed properties

Membuat satu propery selalu tergantung dengan property lainnya dengan computed properties dari vue

Conditional directives

Mengenal apa itu directive pada vuejs dan juga melihat contoh penggunaan conditional directive pada template html

Loop list directive

Mengenal apa itu loop/list directive pada vuejs dan juga melihat contoh penggunaan list directive pada vue js

Loop list methode

Metode metode pada javascript bisa kita gunakan seperti biasa pada list directive vue js

Menggunakan filter

Di vue.js 2 fungsi filter sudah berbeda dari video ini Cek filter di Vue v2 Belajar menggunakan filter pada vue js, baik pada single property atau property yang kita loop dengan orderBy atau filterBy

Methods vuejs

Belajar menggunakan methods pada vue js, dan juga menggabungkannya dengan event melalui v-on directive

V bind directive

Belajar lebih banyak tentang penggunaan v-on dan juga v-bind sebagai property pada vuejs

Input binding

Membuat input dari user bersatu dengan konsep data-binding. Sehingga apapun yang dimasukkan oleh user, kita langsung bisa melihat hasilnya

Componenets vuejs

Salah satu feature dari vue js yaitu component, membuat sistem template untuk bagian-bagian html yang ingin kita tampilkan berkali-kali

Componenets vuejs part 2

Salah satu feature dari vue js yaitu component bagian 2, membuat sistem template untuk bagian-bagian html yang ingin kita tampilkan berkali-kali

Dynamic component

Masih tentang component, kali ini kita akan berkenalan dengan konsep dynamic component pada Vuejs, yang bisa kita manfaatkan sebagai sistem routing sederhana untuk membuat SPA (Single Page Application)

Transition VueJS

Melakukan transisi (transition) css dengan mudah melalui attribut di vuejs

Daftar isi Komentar dan Vote Vuejs

Intro komentar dan vote Vue

Perkenalan kelas membuat komentar dan vote pada vuejs, untuk latihan setelah belajar dasar-dasar dari vuejs

Komentar dan vote

Mulai membuat siste komentar dan vote pada vuejs. Kita akan menggunakan semua yang telah kita pelajari pada dasar-dasar vuejs disini

Komentar baru

Menambahkan komentar baru beserta votenya pada sistem yang sudah ada dengan menggunakan v-model, v-on dan menggabungkannya dengan methods dari vue js

Daftar isi Vue JS todolist dan API

Membuat todolist vuejs

Belajar bagaimana cara membuat todolist pada vuejs, dengan memanfaatkan apa saja yang sudah kita pelajar pada dasar vue js

Todolist localstorage

Belajar menggunakan localstorage pada html dan javascript untuk menyimpan data sementara pada sisi browser untuk data todolist yang dibuat

Membuat API dan mengeluarkan data

Belajar membuat API sederhana dengan PHP, kita juga akan menggunakan vue js resource untuk melakukan AJAX ke API yang dibuat

Post data ke database

Menyimpan data ke database dengan metode post yang sudah disediakan oleh vuejs resource

Update done status

Merubah data yang sudah ada pada database dengan metode patch untuk mengubah status dari todolist yang sudah dibuat

Perubahan pada versi 0.9

Melihat kesalahan yang kita lakukan di video sebelumnya kenapa fungsi post tidak bekerja pada versi 0.9 dari vuejs

Daftar isi Membuat sistem tag dengan Vuejs

Intro vuejs tag sistem

Intro untuk kelas membuat sistem tag dengan vue js, dengan ini kita bisa membuat sistem tag yang bisa diimplementasikan seperti pada forum, blog, dan lain-lain

Todolist dan kerangka html css

Mulai dengan membuat html dan css sebagai kerangka aplikasi yang dibuat. Selain itu kita belajar memecahkan tugas besar menjadi tugas-tugas kecil yang bisa dikerjakan satu per satu dalam bahasa manusia

Toggle data ketika user mengetik

Ketika user mulai mengetik sesuatu pada input, kita akan memunculkan daftar tag yang tersedia, dan akan disembunyikan ketika tidak ada input

Memilih dengan panah bawah

Memilih tag mana yang akan digunakan dengan menggunakan event keyboard pada saat panah ke bawah ditekan

Memilih dengan panah atas

Memilih tag mana yang akan digunakan dengan menggunakan event keyboard pada saat panah ke atas ditekan

Tag berdasarkan input user

karena tidak perlu menampilkan semuanya sekaligus, maka kita akan memunculkan daftar tag berdasarkan apa yang user ketik pada input

Pilih salah satu tag dengan enter

Memilih salah satu tag dengan event keyboard enter, jadi selain sudah bisa terhighlight dengan tanda panah, kita juga sudah bisa memilih tagnya

Menghapus dengan tombol backspace/delete

Bagaimana jika user ingin menghapus tag yang sudah terpilih, kita mulai dengan menggunakan event keyboard backspace ataupun delete untuk menghapus entri terakhir

Menghapus dengan klik

Bagaimana jika user ingin menghapus tag yang sudah terpilih sebelumnya namun bukan entri terakhir, kita lihat cara menghapus berdasarkan yang diklik

Highlight dan milih dengan mouse

selain memilih dengan tanda panah keyboard, kita juga harus bisa memilih berdasarkan mouse, tergantung apa yang dihighlight dan apa yang diklik

Menghapus tag yang sudah digunakan

Jika satu tag sudah dipilih sebelumnya, maka tidak perlu lagi ditampilkan pada entri berikutnya, dengan ini kita mencegah ada tag yang sama pada satu entri

Daftar isi Membuat single page app dengan vuex

Install vue cli vuex dan struktur folder

Kita mulai dengan install vue cli dan juga vuex. Kita juga akan melihat struktur folder yang direkomendasikan untuk aplikasi yang menggunakan vuex

State dan getters

Kenalan dengan state dan juga getter sebagai tempat awal mengambil data pada aplikasi vuex

Membuat component member

membuat component yang akan dipakai di beberapa tempat pada aplikasi member menggunakan vuex

Singleview, action dan mutaiton

Mengenal dan melihat perbedaan antara action dan mutation pada vuex yang bertanggung jawab untuk melakukan manipulasi pada data awal. Kita juga akan membuat singleview pada aplikasi member ini.

Tampilkan semua member dan edit component

Bagaimana cara mengedit component secara langsung melalui aplikasi vuex yang kita buat?

Tambah member baru

Menambah member atau data baru, kita akan mempertajam bagaimana alur pada vuex, ketika kita ingin memanipulasi data yang ada pada state melalui action dan mutation

Menghapus berdasarkan id

Menghapus member atau data, kita akan mempertajam lagi bagaimana alur pada vuex, ketika kita ingin memanipulasi data yang ada pada state melalui action dan mutation

Menambah bumbu css

Bikin aplikasi member yang dibuat dengan vuex ini jadi jauh lebih cantik dengan CSS tentunya

UX yang lebih baik

Ada hal yang bisa kita tambahkan untuk memaksimalkan user experience alias cara user berinteraksi dengan aplikasi ini

Daftar isi NuxtJS membuat aplikasi vuejs universal

Kenalan nuxtjs dan install

Kenalan dengan NuxtJS dan cara menginstall nuxtjs, membuat vuejs universal untuk aplikasi kita berikutnya

Tampilan dan halaman dasar nuxtjs

Kita intip dulu bagaimana halaman dasar dari NuxtJS, dimana starting pointnya, apa aja default yang tersedia buat kita

Load css custom dan framework

Cara load custom css dan framework css dari luar di aplikasi nuxtjs

Install plugin dan akses api dengan axios

Bagaimana cara menginstall plugin di nuxtjs. Kita akan melihat contohnya dengan menggunakan axios di nuxtjs

Merapikan tampilan dengan v for

Cara menampilkan data yang kita terima dari axios dengan v-for pada halaman vue js file

Memindahkan data di vuex store

Memindahkan data yang awalnya di vue file jadi store (Vuex store) pada nuxt.js untuk mengatur state datanya

Membuat component di nuxt

Cara membuat component di nuxtjs, sama seperti membuat component pada vue

Navigasi dengan nuxt link

Navigasi menu yang muncul pada semua halaman di vue nuxt.js

Property di component dan transisi halaman

Mengoper Property di component vuejs agar dinamis dan membuat transisi pada halaman lebih cantik di nuxtjs

Halaman dinamis di nuxt

Bagaimana dengan membuat halaman dinamis pada nuxt.js seperti berdasarkan id user atau slug pada nama blog misalnya

Meta tag dan title dinamis

Salah satu masalah yang sebelumnya kita temukan pada Vue js adalaha SEO, atau bagaimana nanti dia di search engine, seperti title atau meta data linenya agar menjadi dinamis sesuai halamannya

Daftar isi CRUD API di Nuxtjs

Tutorial nuxt js crud api

Trailer menggunakan nuxt js untuk mengakses API dengan axios

bikin api dengan json server

Kita akan membuat API local menggunakan json-server, kamu bisa melihatnya disini Link: Jsonplaceholder

Install axios dan bulma

Bagaimana menginstall plugin seperti axios atau css framework dan menggunakannya di proyek nuxt.js

Memindahkan data di vuex store

Memindahkan data dari .vue file ke vuex store

Submit data ke api

Bagaimana cara menambahkan data ke API menggunakan nuxtjs

Penulisan lain map action di vuex

Selain menggunakan mapaction dan spread syntax, ada penulisan lain untuk mengakses action dan state di vuex store kita dari .vue file

Merapikan tampilan

Kita rapikan dulu tampilan dari proyek ini!

Menghapus data

Menghapus dari dengan API di nuxt.js

Edit dan update data

Mengupdate data dari API di nuxt.js

Sistem search

Membuat sistem search dengan computed property di vuejs