Penggunaan Method dan Event Pada Vue Js

Masih belajar tentang Vue js kali ini kita akan belajar tentang penggunaan method dan juga event. Method event ini sering kita gunakan terutama bila kita ingin membuat website yang interaktif. Sama seperti event-event pada javascriptnya yaitu misalnya event terjadi ketika diklik, ketika formnya disubmit, ketika user mengetikan sesuatu dikeyboard atau pun event-event lainnya. Untuk contohnya sendiri misalnya disini saya punya sebuah tag <button> sebagai berikut

Penggunaan-Method-dan-Event-Pada-Vue-Js-21-04-2017-1

Lalu didalam tag <button> saya berikan attribute v-on artinya v-on ini adalah cara untuk melakukan atau mendengarkan event-event yang akan kita jalankan.

Penggunaan-Method-dan-Event-Pada-Vue-Js-21-04-2017-2

Setelah titik duanya adalah nama eventnya pada kasus ini adalah click artinya event jika diclick dan selanjutnya kita bisa menentukan nama method apa yang akan kita panggil. Jadi ketika method getCountnya di panggil kita mau melakukan sesuatu dimetodenya.

Penggunaan-Method-dan-Event-Pada-Vue-Js-21-04-2017-3

Tentu untuk membuat metode kita simpan di key methods lalu di ikuti dengan block kurung kurawalnya dimana didalamnya teman teman bisa memiliki banyak method yang ingin kita buat. Salah satunya yang belum kita buat adalah method getCount. Bentuk penulisannya seperti berikut

Penggunaan-Method-dan-Event-Pada-Vue-Js-21-04-2017-4

Jadi getCount ini adalah fungsi atau metode yang isinya sendiri kita akan melakukan increment atau penambahan satu ketika buttonnya itu diklik. Tentu sebelum kita melakukan itu kita harus set nilai count nya mulai dari 0 dibagian object datanya

Penggunaan-Method-dan-Event-Pada-Vue-Js-21-04-2017-5

Lalu dibagian fungsinya kita akan akses property tersebut dengan kata this lalu dikuti dengan nama propertynya dan kita lakukan increment yaitu count++ sebagai berikut

Dan apabila kita jalankan kita akan dapat hasil incrementnya yang dimulai dari angka 0.

Penggunaan-Method-dan-Event-Pada-Vue-Js-21-04-2017-7

Dan bila saya klik bagian buttonnya maka nilai count selalu ditambah satu. Itu dia cukup sederhana penggunaan Method dan Event pada Vue js. Terima kasih

21 April 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat