Saturday, February 10, 2018

Belajar Dasar Event di Vuejs

Jadi disini kita punya kerangka vuejs kek gini :
Tampilannya :
Selengkapnya bisa dilihat di github disini
Naah... jadi dalam kode diatas kita punya 2 biji button trs 1 biji div buat nampilin angka. Dari title buttonya udh klihatan klu button yg add itu nantnya buat nambah/naikin angka, trs subtract buat ngurangin angkanya daan buat ngelakui itu semua kita butuh ngedetect event pas ngeklik button di vuejs. Carana kek gini ajjah :
Jadi klu pengen ngedetek event di vuejs kita cuma make 'v-on:event_yg_mau_didetect'. Karena kita pengen yg click button berarti 'v-on:click'. Trs v-on:click = add itu maksdnya pas diklik kita manggi fungsi 'add' seperti yg terlihat pada property methods, disitu ada fungsi add() {this.myInt++;} yg intinya naikin 1 biji angka buat myInt. Selse daaah... :D
v-on itu sebenarnya bisa diganti pake @ ajjah biar lbih simpel. So untuk yg substract kita pake @ ajjah daah... :D kek gini...
Hasilnya :
Trs event lain yg bisa dicoba yg double click. Kodenya kek gini :

Siipss... sy pikir sama ajjah kekna sm yg sebelumnya... :D
Naah... event berikutnya yg pengen dicoba adalah hover mouse. Pertama-tama kita bikin div kosong dl sama style cssnya kek gini :

Hasilnya :
Di dalam div ini kita akan ngedetek posisi mouse hover terus nampilin koordinatnya ketengah2...

Hasilnya :
Siiipss.. cukup demikian contoh2 event di vuejs. Untuk event event yg lain silahkan liad official dokumentasinya disini....


No comments:

Post a Comment