Yazılım

Vue.js Data, Created, Methods, Computed Kullanımı

tarafından yazıldı Mehmet Ali Ayvaz

Vue.js ile uygulama yazarken data, created, methods, computed özelliklerinden yararlanırız. Bu özellikler ne işe yaradığını örneklerle açıklayalım.

Vue.js – Data Kullanımı

Data özelliği, vue componenti içerisinde yer alan verileri tutar. Örnek verecek olursak componentte işlem yapılan bir sayıyı, diziyi, gösterilen bir yazı veya boolean tipinde bir değeri saklayabilir. Data’yı örnekteki gibi fonksiyon tipinde tanımlayabiliriz.

Aşağıdaki örnekte bir metin ve bir sayının data’da tutulduğunu göreceksiniz. Kullanıcıdan bir sayı alıp data’da yer alan “sayi” değişkenine v-model ile bağladık. Girilen sayıyı aynı zamanda ekranda gösterdik. Vuejs’i cdn olarak dahil ettik. Bunun yanında bootstrap kullandık.

Vuejs Data Kullanımı Örnek

Vue.js – Created Kullanımı

Created, Vue.js instance nesnesi yaratıldığında çalışan fonksiyondur. Html kod bloğumuz daha DOM’a yerleştirilmemiştir.  Örnek olarak sayfa çalıştığı anda “alert” kullanarak bir uyarı oluşturalım.

Vuejs Created Kullanımı Örnek

Vue.js – Methods Kullanımı

Vuejs componentinde kullanmak istediğimiz fonksiyonları yazdığımız bir objedir. Örnek olarak ekranda yer alan sayıyı artıran ve azaltan bir uygulama yapalım. Artır butonuna tıkladığımızda sayı bir artacak, azalt butonuna tıkladığımızda sayı bir azalacaktır.

Vuejs Methods Kullanımı

Vue.js – Computed Kullanımı

Computed bir obje olarak tanımlanır. İçerdiği değeri sürekli izler, eğer değerde bir değişiklik olmuşsa fonksiyonu çalıştırır. Computed’ın çalışma mantığı için aşağıdaki örneği inceleyebilirsiniz.


Computed’ın içine “control” adında bir fonksiyon tanımladık. Bu fonksiyon data içerisinde bulunan “sayi” değişkenini return ediyor. Eğer “sayi” değişkeninde bir değişiklik olursa computed çalışacaktır. Computed’ı çağırmak için üst tarafta süslü parantezler içerisine computed içerisindeki fonksiyonumuzun adını yazdık. Böylece “sayi” değişkeni değiştiği an computed çalışacaktır ve ekranda değişikliği gösterecektir.

Vuejs Computed Kullanımı Örnek

Bu yazımızda Vuejs data, created, methods, computed kullanımını gördük. Vuejs Directive Kullanımı adlı yazımızı okumak için üzerine tıklayabilirsiniz.

Yazar Hakkında

Mehmet Ali Ayvaz

Kurgu ve tasarımla uzun süre ilgilendikten sonra yazılımla bu serüveni devam ettiriyorum. İnsanlara faydalı olabilecek içerikler hazırlama uğraşındayım.

Yorum Yap