#vueogreniyoruz: data, methods, computed, created, props Kullanımı

Merhaba Arkadaşlar,

Sıradaki makale içeriğinde vuejs ile çalışırken en çok içli dışlı olacağımızı düşündüğüm konuları göreceğiz. Başlıkta yazan tüm değerleri kullanacağız ve bir modülün/sayfanın ilk oluşturulma anından herhangi bir olay sonrası(örn: click) çalıştıracağımız komutlara kadar bu başlıklar altında işleyeceğiz. Hepsini sırasıyla anlatıp birer örnek ile devam edelim:

data

Api tabanlı çalıştığımız projelerimizde her modül için api’den aldığımız array veya object tipinde veriler olacaktır. Bu verileri işleyebilmek için bir değişken ile eşleştirmemiz, o değişkene değer olarak atamamız gerekir. Tam bu noktada ‘data’ devreye girer. Sayfa ilk yüklendiğinde ilgili değişkenleri, tiplerini ve ilk değerlerini ‘data’ içerisinde tanımlarız. Tanımladığımız değişkenkerin aşağıda işlediğimiz başlıklar vasıtasıyla içeriği değiştirilebilir ve değişim sonrasında data içerisinde yeni değerleri ile barındırılmaya devam ederler. Sonraki başlıkların örneklerinin içerisinde ‘data’ kullanımı yapacağımız için bu başlıkta geniş bir örnek yerine yalnızca tanımlamaların nasıl yapılacağını göstereceğim. App.vue sayfasındaki script tag’leri arasına ‘data()’ fonksiyonunu açıyoruz ve içerisinde return{} kullanarak ‘message’ isminde string tipinde bir veri döndürüyoruz:

export default {
  data () {
    return {
      message: 'Hello World!'
    }
  }
}

Daha sonra message değişkenimizi template tag’leri arasında çağırıyoruz:

<div id="app">
  {{message}}
</div>

return ile dönderdiğimiz değer olan message değişkeni sayfayı açtığımızda ekranda yazacaktır.

methods

Modül/sayfa yüklendikten sonra durumlara göre çalıştıracağımız javascript komutlarını methods kapsayıcısı içerisinde yazabiliriz. İçerisine fonksiyonlar oluşturup her birini farklı durumlara göre istediğimiz yerden(computed, created vs.) çağırabiliriz. Örnek için bir önceki başlıkta oluşturduğumuz data ile aynı hizada bir methods kapsayıcısı oluşturuyoruz. Altına alertFunc isminde bir fonksiyon oluşturalım ve ‘Hello World!’ yazılı alert mesajı vermesini sağlayalım.

methods: {
  alertFunc () {
    alert('Hello World!')
  }
}

alertFunc gibi alt alta yapacağımız işlemlere göre bir çok fonksiyon oluşturabiliriz. Şu an sadece nasıl oluşturabileceğimizi görmemiz yeterlidir diye düşünüyorum. Çalışması gereken yerde alertFunc() şeklinde çağırırsak(computed başlığında addNewItem’ı çağırdığımız gibi) sayfamızda Hello World! yazılı alert’i görebiliriz.

computed

Bir değere veya veriye bağlı olarak başka bir alanın anlık değişimlerinin yapılması için dinleme işlemlerini gerçekleştirdiğimiz yerdir. İlgili alanları anlık olarak dinler ve değişim yapılması gereken kısma gerektiği yerde bilgi verir. Yapacağımız örnekte 1 adet toplam ürün sayısının yazılı olduğu alan ve 1 adet farklı ürünü sepete eklemeyi temsil eden buton kullanacağız. Sayfa ilk yüklendiğinde ürün sayısı 1 olacak ve SEPETE EKLE yazılı butona tıklandıkça bunu arttıracağız.

Template içerisine html yerleşimlerini yapalım:

<hr>
<span>Toplam Ürün Sayısı: {{productTotal}}</span>
<button @click="addNewItem()">SEPETE EKLE</button>
<hr>

data fonksiyonu içerisine başlangıçta 1 ürüne sahip olan products isimli array’i ekleyelim.

data () {
  return {
    message: 'Hello World!',
    products: [
      {
        name: 'Ürün 1'
      }
    ]
  }
},

methods içerisine butonun ‘click’ aksiyonunda çalıştıracağımız ‘addNewItem()’ fonksiyonunu ekliyoruz. Bu fonksiyon çalıştırıldığında bir adet item değişkeni tanımlayacağız. İçerisine object tipinde veri ekleyeceğiz ve data içerisinde tanımladığımız products’a göndereceğiz.

addNewItem () {
  let item = {
    name: 'Ürün x'
  }
  this.products.push(item)
}

Şimdi sıra uygulamanın ana noktası olan computed’a geldi. Template içerisinde eklediğimiz kod bloğunda aşağıdaki gibi bir satır bulunuyordu:

<span>Toplam Ürün Sayısı: {{productTotal}}</span>

Burada yazdığımız productTotal fonksiyonu dinamik bir değeri ifade ediyor. Browser üzerinden sayfayı görüntülediğimizde ilk olarak “1” ve sonrasında butona her tıkladığımızda 2,3,4,5 şeklinde artarak bu değerin değişmesi gerekir. Computed nesnesini oluşturup içerisine producttotal fonksiyonunu yazıyoruz. Fonksiyon bize products array’inin içerisindeki veri sayısını dönmelidir.

computed: {
  productTotal () {
    return this.products.length
  }
}

Browser üzerinden sayfayı görüntülediğimizde fonksiyonun çalıştığını görebiliriz. Sürekli olarak değeri dinleyen productTotal fonksiyonu, çalışması gereken her anda ürün sayısını arttırmaktadır.

created

Methods ve computed gibi object tipinde değil, fonksiyon tipindedir. Sayfanın yüklendiği anda çalışması gereken fonksiyonları kapsar. Direkt olarak içerisinde çalışılabildiği gibi diğer kapsayıcılar altında yazılan fonksiyonlar da burada tetiklenebilir.

created() {
  alert("sayfa yüklendi");
}

Bu şekilde çalıştırılabilir.

props

Modül içerisine dışarıdan gönderilen modelleri tanımlarız. Modelin tipi(string, object vs.) , zorunluluk durumu gibi tanımlamalar yapabiliriz. Statik ve dinamik değerler gönderilebilir.

<deneme-component title="Deneme Title" /> // statik değer
<deneme-component v-bind:title="item.Title" /> // dinamik değer

Yukarıda gördüğünüz gibi dinamik değer için v-bind komutunu kullanıyoruz.

Minik bir uygulama yapmak için components klasörü altına BasicComponent.vue isminde bir sayfa oluşturalım ve kod yapısını aşağıdaki şekilde hazırlayalım:

<template>
  <div>
    {{ itemTitle }}
    <hr>
    {{ itemContent }}
  </div>
</template>

<script>
  export default {
    props: {
      itemTitle: { type: String, required: true },
      itemContent: { type: String }
    }
  }
</script>

<style scoped>
</style>

props kapsayıcısı altına object tipinde iki adet değer ekledik. Her ikisinin de string tipinde olacağını ve bir tanesinin zorunlu olacağını belirttik. Zorunlu olan itemTitle değeri gönderilmediği zaman konsol hatası alacağız. Template içerisinde de bir değişkeni çağırır gibi değerlerimizi çalıştırdık.

App.vue içerisine BasicComponent.vue sayfasını import edelim. script altına önce import satırını yazalım:

import BasicComponent from './components/BasicComponent.vue'

Daha sonra components kapsayıcısıno oluşturup altına BasicComponent’ı ekleyelim:

components: {
  BasicComponent
}

Artık sayfamızda kullanabiliriz. Template içerisine basic-component component’ını çağıralım ve içerisinde tanımladığımız itemTitle ve itemContent değerlerini string tipinde yazalım:

<basic-component itemTitle="Başlık Alanı" itemContent="İçerik Alanı" />

Browser üzerinden kontrol ettiğimizde gönderdiğimiz iki değerin alt alta yazılı olduğunu görebiliriz. Zorunlu olduğunu belirttiğimiz itemTitle’ı kaldırırsak konsolda hata alırız.

Not: Bu ders içeriğinde kullanılan dosyaları görüntülemek için tıklayınız