Penanganan Event dan Data pada Vue.js

Penanganan event merupakan bagian penting dalam framework-framework Javascript, demikian juga dengan framework Javascript Vue.js .

Penanganan event dan data pada Vue.js adalah seperti pada penjelasan-penjelasan berikut ini

1. File index.html
   
   Tampak pada file index.html menjalankan main.ts
   
2. File main.ts
   
   Tampak pada main.ts ini menjalankan App dan router. Saat menjalankan app akan dijalankan pada id app yang ada pada index.html
   
3. File App.vue
   
   Pada App.vue ini tampak menjalankan RouterView.
   
4. File router/index.ts
   
   Pada index.ts ini terlihat akan menjalankan HomeView.
   
5. File HomeView.vue
   
   Pada HomeView ini akan menjalankan
   a. TheHeader
   b. SideBar
   c. BuatPost
   d. DaftarPesan
   
6. File TheHeader.vue
   a. TheHeader bagian script dan style:
   
   
   b. File TheHeader bagian template:
   
7. File SideBar.vue
   
   Pada SideBar ini ada penanganan event OnClick selama satu kali saja seperti di atas.
   
8. File BuatPost
   
9. File DaftarPesan.vue
   a. DaftarPesan bagian script:
   
   
   Pada daftar pesan ini ada data posts dan penanganan event klik OnDelete.
   
   b. DaftarPesan bagian template yang ada penanganan data untuk diproses pada komponen PesanSosial:
   
10. File PesanSosial.vue
    a. PesanSosial bagian script dengan penanganan OnDeleteClick yang akan disampaikan ke paret untuk penghapusan suatu post atau pesan:
    
    
    
    b. PesanSosial bagian style:
    
    
    
    c. PesanSosial bagian template yang ada penggunaan IconDelete dan penanganan eventnya:
    
11. File PesanSosialKomentar.vue
    a. PesanSosialKomentar bagian script dan style:
    
    
    b. PesanSosialKomentar bagian template:
    
    
12. Menjalankan npm run dev
    
    
13. Tampilan untuk penghapusan POST
    a. Tampilan awal dilanjutkan dengan menghapus salah satu post:
    
    
    b. Tampilan setelah salah post di hapus:
    
    
14. Tampilan untuk pembaharuan waktu
    a. Tampilan dilanjutkan dengan Update waktu:
    
    
    b. Tampilan setelah pembaruan waktu:
    

Kunjungi www.proweb.co.id untuk menambah wawasan anda.