Tutorial Vue.Js Bagian 5 : Contoh Event Handling pada Vue.js

Setelah sedikit memahami tentang apa itu Vue.JS pada tutorial-tutorial sebelumnya yaitu Tutorial Vue.Js Bagian 1 : Tentang Vue.Js , mengetahui bagaimana cara menginstal atau memasang vue.js , contoh helo world dengan penerapan reactive data binding, Contoh Validasi Input Data dengan V-SHOW, V-IF pada Vue.js sekarang saya akan memberikan contoh event handling pada vue.js .

Berikut adalah contoh tampilan dari event handling apada vue.js

Nah, utnuk source kode serta penjelasannya silahkan simak di bawah ini :

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
<div id="app">
<!-- atribut v-on:submit, v-on:submit.prevent
apa yg terjadi jika di 
submit akan mengacu pada 
method uang telang di uraikan di viewmodel -->
<form action="berhasil.html" v-on:submit="sip">
 <button type="submit">
 Submit!</button>
</form>

<form action="berhasil.html" v-on:submit.prevent="yuhu">
 <button type="submit">
 Submit Me! - With Prevent</button>
</form>
</div>
 
<!-- meload vue js yang berada di satu folder-->
<script src="vue.min.js"></script>
<script>
//viewmodel
new Vue({
  el: '#app', // bind to view
   methods : { //mengunakan method
    sip: function(){
     alert('SIP!'); //alert muncul
    },

    yuhu: function(){
     alert('SIP! - ini di prevent');
    }
   }
 });

</script>
</body>
</html>

Contoh 2

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
<!-- meemanggil id app1 yang sudah dideklarasikan
di  viewmodel -->
<div id="app">
<!-- atribut dari vue js @click untuk
 proses klik yang terbinding dengan vuemodel-->
 <button type="submit" @click="hitung">
 Hitung => {{ count }} </button> 
</div>
<!-- meload vue js yang berada di satu folder-->
<script src="vue.min.js"></script>
<script>
//modelview
new Vue({
  el: '#app', // bind to view
   data : {
    count : 0
   },

   methods: { //metode
    hitung : function(){ //fungsi
     this.count += 1;
    }
   }
  
 });

</script>
</body>
</html>