[ Laravel & Vue.js ] 10.Video: "computed properties" kullanımı ve metodlar ile arasındaki farklar...



2 dakikalık okuma
April 12, 2019

Bu videoda:

  • Vue.js içerisinde “computed properties” kullanımı,
  • “computed properties” ile “metodlar” arasındaki farklar,
  • Ayrıca Basit bir reaktif arama örneği yapıldı.

Buyrun videomuz da burada:


Video Özeti

Computed Properties

Computed properties mevzunu anlamak gerçekten önemli. Çünkü Vue.js içerisinde daha hızlı uygulamalar yazmamız için bilmemiz gereken bir mevzuudur.

Evvela ne olduğunu anlayalım. Computed properties’ler aslında vue.js içerisindeki hafıza(cache) tabanlı değişkenlerdir(variable). Fonksiyonlar gibi çalışır.

Computed Properties’i tanımlamak için ”computed” nesnesini kullanırız. Şöyle:

<div id=“app”>
     <input v-model=“a”>
     <hr>
     a={{a}} --  b={{b}}
</div>


<script type=“text/javascript”>

    vue = new Vue({
    el:’#app’,
    data: {
        a:1
    },
    computed: {
        b: function () {
            return (this.a + 1);
            }
        }
    });

</script>

Computed Properties ve Metodlar Arasındaki Farklar:

Computed Properties ve Metodlar Arasındaki Farklar

Örnek bir reaktif arama, filtreleme uygulaması:

app = new Vue({
    el: '#app',

    data: {
        kitaplar   : [
            {
                kitap_adi: 'Önümüzdeki Yol',
                yazar    : 'Bill Gates'
            },
            {
                kitap_adi: 'İnce Mehmet',
                yazar    : 'Yaşar Kemal'
            },
            {
                kitap_adi: 'Huzur',
                yazar    : 'Ahmet Hamdi Tanpınar'
            },
            {
                kitap_adi: 'Yaban',
                yazar    : 'Yakup Kadri Karaosmanoğlu'
            }
        ],
        searchQuery: ''
    },

    computed: {
        arama: function () {

            if (this.searchQuery) {
                return this.kitaplar.filter(item => {

               if (item.kitap_adi.toLowerCase().includes(this.searchQuery)) {
                 return item.kitap_adi.toLowerCase().includes(this.searchQuery);
                } else if (item.yazar.toLowerCase().includes(this.searchQuery)){
                   return item.yazar.toLowerCase().includes(this.searchQuery);
                }

                })
            } else {
                return this.kitaplar;
            }
        }
    }


});

Computed Properties html kodları

Computed Properties ekran çıktısı


Etiketler: