VUE.JS

Vue.js Filtreler

Yayın:
Vue.js Direktifler (Directives) ve Interpolations yazılarında hem anlatılar hem de örnekler içerisinde, temel bir şekilde filtreleri nasıl kullanabileceğimize değinmeye çalışmıştım. Bu yazıda konuyu biraz daha ...
GÖRSEL
Vue.js Direktifler (Directives) ve Interpolations yazılarında hem anlatılar hem de örnekler içerisinde, temel bir şekilde filtreleri nasıl kullanabileceğimize değinmeye çalışmıştım. Bu yazıda konuyu biraz daha detaylandırmaya çalışacağım.

Vue Filter

Vue.js içerisinde local ve global olarak filtreler oluşturabilmekte ve oluşturulan filtreleri mustache interpolations ve v-bind expressions içerisinde kullanabilmekteyiz. Bu arada, Vue’nun yayınlanan ilk sürümlerinde capitalize, lowercase, currency, pluralize, orderBy gibi ön tanımlı olarak oluşturulan filtreler de mevcut imiş ve v1 ile bu hazır filtreler kaldırılmış. Filtreler, önceki örneklerde de görülebileceği üzere pipe (|) ile entegre edilirler. Örneğin;
// mustache içerisinde filtre işlemi
{{ message | capitalize }}
 
// v-bind içerisinde filtre işlemi
<div v-bind:id="rawId | formatId"></div>
Kullanımın ardından, nasıl filtre oluşturabileceğimize bakalım ve örnek olarak, edindiğimiz string değerlere çeşitli işlemler uygulayalım.
var app = new Vue({
  el: '#app',
  data:{
    titles: ['First Level', 'SECOND LeveL', 'ThIrD leVel', 'fourth level']
  }
});

titles: ['First Level', 'SECOND LeveL', 'ThIrD leVel', 'fourth level'] içeriğinde büyük-küçük harflerin bir arada kullanıldığını görüyoruz. Bu kullanımların hepsini tek bir formatta görüntülemek istediğimizi varsayalım ve sırasıyla şu işlemleri uygulayalım: Capitalize ilk harf büyük), UPPERCASE (tüm harfler büyük).

capitalize işlemi için oluşturu local filter oluşturacağım:

  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString().toLowerCase()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
Görüldüğü üzere pipe ile gönderilen değer (value) bir dizi işlemden geçirilip return ile döndürülüyor. Bu sayede pipe öncesindeki tanımlama işlenerek ilgili filtrenin çağırıldığı alana yansıtılıyor. Şimdi, filtre tanımlama işlemini bir de global olarak gerçekleştirelim:
Vue.filter('uppercase', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.toUpperCase()
});
Aynı konu global filter için de geçerli. Pipe ile çağırılmasının ardından pipe öncesindeki değeri işleyip yansıtmaktadır. Bu akış oldukça önemli. Çünkü, bu sayede birden fazla Vue filter kullanabilmekteyiz. Yukarıda tanımladığımız filtreleri bir arada kullanmaya ne dersiniz?
{{ title | uppercase | capitalize }}

Çoklu filter kullanımında unutmamamız gereken, pipe ile önceki değerin bir değer olarak pipe sonrasına aktarılacağı. Yani, yukarıdaki kullanımda uppercase filtresi title değerlerine müdahale etmekte, capitalize ise uppercase filtresinden dönen sonuca müdahale etmekte.

Bir diğer hatırlatma da filtrelerin birer JavaScript fonksiyonu olmaları ve bu sayede argüman tanımlanabildiği.

{{ title | filterA('arg1', arg2) }}
Yukarıdaki argüman kullanımında title‘ın ilk argüman, arg1’in 2. ve arg2’nin de 3. argüman olduğunu unutmamalısınız.

Örnek Filtreler

Aşağıda, basit bir şekilde oluşturulmuş bazı filtreleri örnek olarak iletiyorum:

Reverse

Vue.filter('reverse', function (value) {
  return value.split('').reverse().join('')
})

Wrap

Vue.filter('wrap', function (value, begin, end) {
  return begin + value + end
})
Daha farklı örnekler için How to Create Filters in Vue.js with Examples ve Using Filters to Format Data in Vue.js yazılarına da göz atabilirsiniz.

HABERDAR OL

Yeni eklenen projeler, eğitimler, içerikler ve yayınlanan videolar e-posta adresine gelsin.