Penggunaan Method dan Event Pada Vue Js

21/04/2017    Ekky Ridyanto    262     Website

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

Artikel, Web Design, Javascript, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More