Konsep SFC

Single File Component / SFC / file khusus untuk Vue yang berekstensi “.vue”, adalah sebuah source file dimana kita dapat mendeklarasikan sebuah komponen yang entah itu untuk digunakan kembali atau untuk digunakan sebagai laman pada target router. Berisi 3 komponen utama; script, template, dan style.

<script />

States

Data 

Bersifat reaktif, dapat dimanipulasi menggunakan function, digunakan untuk inisiasi data awal.

1. Buka TestView.vue
2. Tambahkan object array berikut ke dalam data
3. 
   
4. semua yang ada di property data tersebut bisa langsung ditampilkan di template menggunakan template mustache "{{ input.name }}"

Methods

Berisi daftar function yang siap dipanggil melalui event atau lifecycle hooks.

1. Buka TestView.vue
2. Tambahkan code methods berikut di script di dalam "export default {}"
3. 
   
4. semua function yang ada di dalam methods tersebut bisa dipanggil ke template langsung, atau dipanggil dari function yang lain
5. sesuaikan kode di dalam tag template sesuai dengan kode berikut
6. 
   
7. bungkus semua inputan ke dalam tag "form"
8. cermati directive v-on:submit / @submit pada tag form tersebut
9. @submit.prevent digunakan untuk mencegah aksi default ketika event submit dipanggil, lalu diarahkan ke method submit
10. silahkan isi inputannya lalu tekan submit, cek pada console apakah json inputan tersebut tampil di console atau tidak

Computed

Bertugas untuk memanipulasi data tanpa menduplikatnya ke variabel baru.

Props

Bertugas untuk mengirimkan data tertentu dari parent ke children melalui attribute khusus.

1. buka BaseInput.vue yang telah kita buat hari sebelumnya
2. cermati deklarasi props pada tag script, digunakan untuk menerima data apa saja yang bisa diterima oleh children
3. cermati pemanggilan props tersebut pada tag template, semua props tersebut menggunakan v-bind / ":" didepan nama attribute nya, agar data yang diterima sesuai dengan format nya; contoh Object tetap ditampilkan Object. Boolean tetap Boolean, bukan string nama props nya.

Emits

Bertugas untuk mengirimkan event tertentu dari children ke parent melalui listener khusus.

1. buka BaseInput.vue
2. tambahkan emit baru di tag script dan tag template
3. 
   
4. cermati v-on directive @keyup.esc, digunakan untuk listen event keyboard untuk tombol Escape
5. cermati nama 'escaped' beserta $event yang dilemparkan ke parent melalui emit
6. nama 'escaped' tersebut yang akan kita listen di parent
7. buka TestView.vue lalu tambahkan attribute baru berupa "@escaped" untuk menerima event dari children
8. 
   
9. 
   
10. buka browser dan coba ketikkan text bebas ke input name & email, lalu pencet tombol Escape pada keyboard,
11. muncul log berupa 'fromEmits, KeyboardEvent'
12. cermati bagaimana methods "logEmits" dipanggil di parent komponen
13. penambahan listener @escaped untuk kemudian dilemparkan ke method logEmits

Watch

Bertugas untuk memonitoring data tertentu, jika ada perubahan dari data tersebut bisa di-handle menggunakan function.

1. buka TestView.vue
2. tambahkan kode berikut ke dalam object watch
3. 
   
4. 'input.name' adalah target dari data yang dimonitoring
5. lalu "val" adalah value baru dari target data tersebut
6. cermati penggunaan target tersebut dengan cara menggantinya dengan 'input.class'

Lifecycle Hooks

contoh kasus dari lifecycle hooks adalah ketika kita mempunyai halaman yg didalamnya ada table yang selalu tampil data nya ketika komponen tersebut terpasang / terrender. nah inisiasi method untuk get data dari api tersebut dipanggil di lifecycle ini.

created

function di dalamnya akan dipanggil ketika sudah selesai memproses semua state di instance tersebut.

1. buka TestView.vue
2. tambahkan object created didalam export default {}
3. isi dengan function baru atau dengan memanggil function didalam methods menggunakan "this.namaMethods"

beforeMount

function di dalamnya akan dipanggil sebelum komponen didalam instance tersebut terpasang.

mounted

function di dalamnya akan dipanggil setelah komponen didalam instance tersebut terpasang.

unmounted

function di dalamnya akan dipanggil setelah komponen didalam instance tersebut terlepas.

<template></template>

Studi Kasus

menampilkan daftar anggota kelas, menambahkan anggota kelas, menghapus anggota kelas

1. buat properti "data: []" dalam tag export default { data }
2. ubah methods submit seperti berikut ini
3. 
   
4. tambahkan array bernama 'dummyData' diluar 'export default'
5. tambahkan juga created() di dalam 'export default'
6. 
   
7. cermati function created diatas, forEach digunakan untuk looping tiap isi array didalamnya, lalu ditambahkan ke array "data: []" kita, function created hanya dijalankan sekali ketika semua state pada instance tersebut telah berhasil terinisiasi
8. kita coba render list data tersebut ke template
9. 
   
10. cermati baris ke 87 - 89, v-for digunakan untuk melakukan perulangan tergantung berapa banyak item yg ada pada data
11. {{ member }} digunakan untuk menampilkan isi tiap item pada data tersebut, ganti menjadi {{ member.name }}
12. ubah methods untuk submit dan reset, sesuaikan dengan kode dibawah ini
13. 
    
14. sekarang buat utils untuk helper, buat file dan folder baru pada /src/utils/helper.js
15. 
    
16. lalu import helper tersebut ke file TestView.vue
17. kurang lebih codingan pada tag script di file TestView.vue tersebut akan seperti ini
18. 
    
19. pertama; cermati submit function tersebut, ketika submit dipanggil, maka object yg ada pada input akan ditambahkan ke array data,
20. lalu cermati reset function tersebut, ketika reset dipanggil, maka object yg ada pada input akan direset menjadi ''. sedikit catatan untuk helper reset object nya tidak berlaku untuk nested object
21. maka hasil akhir tampilan tersebut kurang lebih seperti ini
22.