Popüler

2022/08

Vue js v-on kullanımı


 v-on  ne için kullanılır ?

 Dom da  gerçekleşen  olayları  tetiklemek  ve veri almak için kullanılır.Kullanım olarak  ;

2 farklı yazım şekli ile kullanılabilir.

<button v-on:click="showAlert">Alert Göster</button>
<button @click="showAlert">Alert Göster</button>

Aşağıdaki örnekte  buton ile  ekrana uyarı verme ve  uyarı içinde değer gösterme işlemleri ile  v-on kulllanımına beraber bakalım .


 

<head>
<meta charset="UTF-8">
<title>Vue v-bind </title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="showAlert">Alert Göster</button>
<button v-on:click="counter++">Arttır</button>
<button v-on:click="increaseCounter">Arttır</button>
<p>{{ counter }}</p>
</div>



<script>
new Vue({
el: "#app",
data: {
counter : 1
},
methods: {
showAlert: function () { // ekrana uyarı vermek için
alert(this.counter); // uyarının içerisinde ne olsun ?
},
increaseCounter: function () {
this.counter++;
}
}

})
</script>
</body>
</html>