Vue.js data ve methods
 |
| Vue.js data ve method 'lar |
Klasik bir Vue uygulamasının nasıl oluşturulduğunu öğrenmiştik. Şimdi tekrar Vue örneğini bir hatırlayalım.
var vm = new Vue({
// özellikler
})
Daha sonra verilerimizin tamamını içerisinde barındıracağımız data nesnesini ekleyelim.
var vm = new Vue({
data {
veri:" "
}
})
Data ve Method 'lar
Yukarıda data içerisinde veri adında bir değer oluşturduk ve şimdi bu örneğe bazı veriler eklemeye çalışalım.
vm.veri = 2;
Bu şekilde veri 'ye "2" değerini verdik. Vue reaktif olduğu için hemen tepki verecektir. Örneğin bir önceki derste de anlattığım gibi {{ veri }} şeklinde sayfanın herhangi bir yerinde bu data 'yı kullanacak olsaydık anlık olarak sayfada da "2" yazdığını görecektik.
Aynı şekilde bir Vue uygulaması içerisinden bir data 'ya ulaşmak isterseniz aşağıdaki örneği de kullanabilirsiniz.
vm.$data.veri
Ayrıntılara ilerde değineceğiz. Bu uygulamaya dışardan bir değer almak istersek de aşağıdaki gibi bir örnek uygulayabiliriz.
var deger = "Merhaba";
var vm = new Vue({
data {
veri: deger
}
})
Değer değişkenini veri içerisine attık.
Şimdi ise method 'lara değinelim. Bildiğimiz onclick ve onfocus gibi olayları Vue 'da methods olarak kullanırız ve klasik olarak JS ile yaptığımız işlerin aynısını Vue örneği içerisinde yaparız. Bir onclick olayı örneği yapalım.
Vue JS
var vm = new Vue({
el:"#uygulama",
data {
veri:"Merhaba"
}
})
HTML
<div id="uygulama">
<p>{{ veri }}</p>
<button v-on:click="veri = 'Selam'">Değiştir</button>
</div>
Yukarıdaki örnekte "Değiştir" tıklanınca bir event tetiklenecek ve method kullanmış olacağız. Böylece veri değişkenine "Selam" değerini vermiş olacağız.
Şimdi daha detaylı olarak onclick içerisinde bir fonksiyon devreye sokalım. Bunun için Vue içerisine data 'nın hemen altına methods:{ } nesnesini ekliyoruz ve nesne parantezlerini açıyoruz. Bundan sonra fonksiyonlarımız burada oluşturacağız. Bir örnek:
Vue JS
var vm = new Vue({
el:"#uygulama",
data {
veri:"Merhaba"
},
methods:{
degistir() {
this.veri = "Selam ben Gökhan";
}
}
})
HTML
<div id="uygulama">
<p>{{ veri }}</p>
<button v-on:click="degistir()">Değiştir</button>
</div>
Şimdi de butona tıkladığımızda "Selam ben Gökhan" yazacaktır ve aynı işlemi bu sefer bir fonksiyon(method) tanımlayarak yaptık. Burada son olarak dikkat etmişsinizdir, data içerisindeki verilere ulaşmak için uygulama içerisinde her zaman this.veri şeklinde ulaşırız.
Bu dersimizde burada bitmiş bulunuyor. Görüşmek üzere...
2013 yılında geniş hayaller ile önce tasarım sonra da yazılım alanında çalışmalar yapmaya başladım. Sıfırdan başlayarak pek çok MVC tabanlı sistemler ve Web Sayfaları tasarladım.