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

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.

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.

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.

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.