İçeriğe geç

Vue.js Filtreler

Okuma süresi 2 dakika

Vue.js öğrenim eğrisi oldukça kolay ve güçlü özelliklere sahip bir framework.

Bu yazıda da kullanışlı özelliklerinden olan filters üzerine konuşacağız.

Filtreler nedir?

Vue uygulamalarımızda bulunan veriler kullanıcıya döndürüleceği esnada bazen istediğimiz görünüm formatına sahip olmayabilir. Örneğin backend uygulamanız size bir objenin oluşturulma zamanını datetime formatında dönüyor ve siz direkt olarak böyle bir render işlemini yapmaktansa kullancıya daha anlaşılır görünümler oluşturmak istiyorunuz, bu noktada filtreler devreye girmekte.

Kullanım şekli ise UNIX sistemlerden aşina olacağınız üzere pipeline yazım şekliyle uyuşmaktadır. Örneğin:

Örnek uygulamalar.

Basit bir Vue.js projesi oluşturduktan sonra, bir kaç filtre oluşturalım.Her Vue instance’ı kendi içinde bir filters objesine sahiptir. Bu obje filtreleme işlemlerini yapacak olan metodları barındırır. Bu metodlar default parametre olarak filtrelenecek veriyi kabul eder. Filtreleme işlemlerinin ardından bu veriyi geri döndürür.

Filtreler birbiri ardına zincir olarak bağlanabilir. Zincirdeki her filtre kendi işlemlerini yapar ve kendinden sonra gelen filtreye işlemin sonucunu parametre olarak geçer.

Ayrıca filtrelerinize filtreleme esnasında kullanılmak üzere ekstra parametreler geçebilirsiniz. Örneğin bir dairenin alanına hesaplamak istediğinizde pi sayısının hassasisyetini belirleyerek daha hassas hesaplamalar yapabilirsiniz.

Bunun yanında buraya kadar oluşturuduğumuz tüm filtreler component kapsamında yer almakta. Eğer uygulama genelinde kullanılacak bir filtre oluşturmak istersek:

Global kayıt işlemini tamamladıktan sonra filtremiz uygulamanın herhangi bir kısmında kullanılabilir hale gelecektir.

 

filters-example
Yukarıdaki işlemler sonucunda elde ettiğimiz çıktı.

Filtreler ile alakalı daha detaylı bilgi almak isterseniz.

Son olarak.

Bloğum genel olarak backend development ile alakalı fakat artık aktif kullandığım frontend teknolojileri ile alakalı da ufak trick veya proje geliştirme üstüne yazılar paylaşıyor olacağım. Görüşmek üzere!

 

Tarih:Blog

İlk Yorumu Siz Yapın

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Göster
Gizle