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>
Sosyal