event.html

<script src="./script/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

  <div class="container">
<div id="app">

<button type="button" class="btn btn-primary" @click="goster('ilker')">goster</button>
<hr>
<button type="button" class="btn btn-primary" v-on:click="artir">artır</button>
<button type="button" class="btn btn-primary" v-on:click="ucerartir(3)">3'er artır</button>
{{counter}}
<hr>
<p v-on:mousemove="guncelleKordinat(2,$event)"> Kordinatlar:{{x}}  , :{{y}}</p>
<hr>
<a :href="link">google</a>
</div>
</div>


<script>

new Vue({
  el:"#app",

data:{
counter:0,
x:0,
y:0,
link:"https://google.com"


},

methods:{
goster:function(isim){
alert(isim);
},
artir:function()
{

this.counter++;

},
ucerartir:function(step)
{

this.counter=this.counter+step;

},

guncelleKordinat:function(step,event)
{
  this.counter=this.counter+step;
this.x=event.clientX;
this.y=event.clientY;


}

}


})

</script>