Vue.Js Script Yapısı, Data, Methods, Created, Watch

Bu yazıda Vue.Js’in asıl heyecanlı kısımlarına giriş yapacağız. Özellikle de Vue.Js neden jQuery’den daha iyi (kime göre neye göre) konusuna da değinmiş olacağız. Özellikle başlarken söylemem gerekiyor ki bu yazıya göz attıktan sonra daha önceden jQuery kullanan birisi için geri dönülemez bir yola giriş yapabilirsiniz :) Çünkü kod yazma hızınız, kodlarınızın okunurluğu ve takip edilebilmesi bir hayli artacak. Sadece v-for için bile Vue.js kullanmaya başlayabilirsiniz, çok ciddiyim :)

Not: Bu yazıda yaptığımız örnekleri paylaştım. Yazının en sonundaki linkten projeye ulaşabilirsiniz.

Bu yazıda genel olarak bir önceki yazıdaki projemiz üzerinden ilerleyeceğim. Eğer ki o yazıya daha önceden bakmadıysanız, Vue.Js Components bağlantısına tıklayarak hızlıca bir göz atabilirsiniz.

Vue.js Data Object

Bir Vue örneği oluşturulduğunda, veri nesnesinde bulunan tüm özellikleri Vue’nun reaktivite sistemine ekler. Bu özelliklerin değerleri değiştiğinde, görünüm yeni değerlerle eşleşecek şekilde güncellenerek “tepki verecektir”.

The Vue Instance

Vue.js’nin resmi sitesindeki bu ifadeden de anlaşılacağı üzere data objesinin içerisinde yer alan objeler reactivite konusunda bizlere yardımcı olacaktır.

Şimdi gelelim kod yazmaya… Home.vue dosyamızı açarak bir alt kısımdaki gibi güncelleyelim.

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <Deneme></Deneme>
    <hr />
    Data mesaj: {{ mesaj }}
  </div>
</template>
<script>
// @ is an alias to /src
import Deneme from '@/components/deneme.vue'
export default {
  name: 'Home',
  data() {
      return{
          mesaj: "Bu bir data mesajıdır."
      }
  },
  components: {
    Deneme
  }
}
</script>

Burada ne yaptık? Öncelikle:

data() {
      return{
          mesaj: "Bu bir data mesajıdır."
      }
  }

bu kod öbeği sayesinde yeni bir data objecisi oluşturduk. Sonrasında bu data objesi içerisinde mesaj isminde bir property oluşturduk. Bu property’ye değer olarak da “Bu bir data mesajıdır.” ifadesini verdik. HTML kısmında da ise bu mesaj property’sini artık {{ mesaj }} şeklinde kullanabileceğiz.

Eğer Vue.js ile ilk defa karşılaşıyorsanız, data içerisindeki değişkenleri çift süslü parantez arasında yer alan ifadeler sayesinde ekranımıza yazdırabileceğimizi öğrenmiş oluyorsunuz. Çok basit değil mi?

jQuery’de bunu nasıl yapacaktık?

<div id="mesaj"></div>
<script>
    let mesaj = "Bu bir data mesajıdır.";
    $("#mesaj").text(mesaj);
</script>

Şu anda henüz çok fark yok gibi görünse de, kodlar çoğaldıkça ve işler karmaşık bir hale geldikçe farkı daha iyi anlayacağız.

Örneğimizi biraz daha çeşitlendirmeye ne dersiniz?

Şimdi de süslü parantezler içerisinde 2 değeri toplayalım.

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <Deneme></Deneme>
    <hr />
    <p>Data mesaj: {{ mesaj }}</p>
    <p>deger1 + deger2 = {{ deger1 + deger2 }}</p>
  </div>
</template>
<script>
// @ is an alias to /src
import Deneme from '@/components/deneme.vue'
export default {
  name: 'Home',
  data() {
      return{
          mesaj: "Bu bir data mesajıdır.",
          deger1 : 10,
          deger2: 20
      }
  },
  components: {
    Deneme
  }
}
</script>

Yukarıdaki kod sayesinde tanımladığımız iki sayıyı kolaylıkla topladık. Şimdi işleri biraz daha zorlaştırmaya ne dersiniz? Data içerisinde bir array tanımlayıp, bunları v-for ile ekrana getirelim.

Vue.Js Arrayler ve v-for

Yukarıdaki kodlarda data içerisinde şimdiye kadar 1 tane string (mesaj) ve 2 tane de integer (deger1, deger2) değer tanımladık. Şimdi ise bir array tanımlayacağız ve bu arrayi HTML kodlarımız arasında göstereceğiz.

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <Deneme></Deneme>
    <hr />
    <p>Data mesaj: {{ mesaj }}</p>
    <p>deger1 + deger2 = {{ deger1 + deger2 }}</p>
    <hr />
    <p v-for="dizi in dizimiz" :key="dizi.id">{{ dizi }}</p>
  </div>
</template>
<script>
import Deneme from '@/components/deneme.vue'
export default {
  name: 'Home',
  data() {
      return{
            mesaj: "Bu bir data mesajıdır.",
            deger1 : 10, deger2: 20,
            dizimiz: ['Deneme 1', 'Deneme 2', 'Deneme 3']
      }
  },
  components: {Deneme}
}
</script>

Burada dizimiz: [‘Deneme 1’, ‘Deneme 2’, ‘Deneme 3’] şeklinde bir array tanımladık ve <p v-for=”dizi in dizimiz” :key=”dizi.id”>{{ dizi }}</p> kodlarıyla da bu arrayimizi ekrana yazdırdık.

Buradaki <p v-for=”dizi in dizimiz” :key=”dizi.id”>{{ dizi }}</p> kodu sayesinde bir loop oluşturmuş olduk ve arrayin uzunluğu kadar bu loop gerçekleşmiş oldu. Aslında bu kodun html çıktısı şu şekilde oldu.

jQuery ile benzer bir işlemi nasıl yapardık?

<div id="diziler"></div>
<script>
   let diziler = ['Deneme 1', 'Deneme 2', 'Deneme 3']
   $.each(diziler, function(i,item){
      $("#diziler").append(`<p>${item}</p>`)
   })
</script>

Biraz biraz ısınmaya başladık mı? :key=”dizi.id” ne işe yarıyor, merak etmiş olmalısınız? Eğer bu ifadeyi kullanmasaydık şöyle bir hata alacaktık:

Vue.js’in orijinal dökümanında da şu şekilde yer alıyor:

Vue, v-for ile oluşturulmuş bir öğe listesini güncellerken, varsayılan olarak bir "yerinde yama" (in-place patch) stratejisi kullanır. Veri öğelerinin sırası değiştiyse, DOM öğelerini öğelerin sırasına uyacak şekilde taşımak yerine, Vue her öğeyi yerinde yamalar ve söz konusu dizinde neyin oluşturulması gerektiğini yansıttığından emin olur. Bu, Vue 1.x'teki track-by="$index" davranışına benzer.
Bu varsayılan mod etkilidir, ancak yalnızca liste oluşturma çıktınız alt bileşen durumuna veya geçici DOM durumuna (ör. Form giriş değerleri) bağlı olmadığında uygundur.
Vue'ya her bir düğümün kimliğini izleyebilmesi ve böylece mevcut öğeleri yeniden kullanıp yeniden sıralayabilmesi için bir ipucu vermek için her öğe için benzersiz bir anahtar (key) özelliği sağlamanız gerekir.
Yinelenen DOM içeriği basit olmadığı veya kasıtlı olarak performans kazanımları için varsayılan davranışa güvenmediğiniz sürece, mümkün olduğunda v-for ile bir anahtar (key) özellik sağlamanız önerilir. Vue'nun düğümleri (node) tanımlaması için genel bir mekanizma olduğundan, kılavuzda daha sonra göreceğimiz gibi, anahtarın özellikle v-for'a bağlı olmayan başka kullanımları da vardır.
V-for anahtarları (key) olarak nesneler (objects) ve diziler (arrays) gibi ilkel olmayan (non-primitive) değerleri kullanmayın. Bunun yerine string veya sayısal (numeric) değerler kullanın.

Data içerisinde verileri tanımlama ve bu verileri ekranda gösterme konusunda şimdilik yeterli bilgiye sahip olduk. Sıra geldi methodlara. Methodlar için sayfa içerisinde tanımlanan fonksiyonlar da diyebiliriz.

Vue.js Methods — Method Tanımlama

Vue.js’te method tanımlarken datadan farklı olaarak dikkat edeceğimiz konu parantez kullanımıdır. Data kısmından gelen verileri gösterirken {{ mesaj }} şeklinde gösteriyorduk. Methodlarda ise {{ mesajimiz }} şeklinde bir gösterim yapabiliriz.

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <Deneme></Deneme>
    <hr />
    <p>Data mesaj: {{ mesaj }}</p>
    <p>deger1 + deger2 = {{ deger1 + deger2 }}</p>
    <hr />
    <p v-for="dizi in dizimiz" :key="dizi.id">{{ dizi }}</p>
    <hr />
    <p>Method mesajimiz: {{ mesajimiz() }}</p>
  </div>
</template>
<script>
import Deneme from '@/components/deneme.vue'
export default {
  name: 'Home',
  data() {
      return{
            mesaj: "Bu bir data mesajıdır.",
            deger1 : 10, deger2: 20,
            dizimiz: ['Deneme 1', 'Deneme 2', 'Deneme 3']
      }
  },
  components: {Deneme},
  methods: {
      mesajimiz(){
          return this.mesaj
      }
  }
}
</script>

Burada data(), components gibi yeni bir obje elemanıyla tanıştık: methods.

Ardından method ismimiz olan mesajiniz()‘ı yazdık ve bu method / fonksiyon içerisinde ne olması gerektiğini yazdık. Biz burada this.mesaj bilgimizi return ile döndürdük. Siz burada ne olmasını istiyorsanız onu yapabilirsiniz. Örneğin console.log(“asdasd”) ya da console.log(this.mesaj) yazarak bilgilerinizi console’da da yazdırabilirsiniz. Bu kodların ekrandaki çıktısı şu şekilde olacaktır:

Methodları elbette sadece ekrana bir şeyler yazdırırken kullanmayacağız. Başka neler yapacağız? Normal Javascript’teki gibi fonksiyonlar gibi de bunları kullanacağız.

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <Deneme></Deneme>
    <hr />
    <p>Data mesaj: {{ mesaj }}</p>
    <p>deger1 + deger2 = {{ deger1 + deger2 }}</p>
    <hr />
    <p v-for="dizi in dizimiz" :key="dizi.id">{{ dizi }}</p>
    <hr />
    <p>Method mesajimiz: {{ mesajimiz() }}</p>
    <hr />
    <p><button @click="sayacArtir()">Sayacı Artır</button></p>
    <p>Sayaç: {{ sayac }}</p>
  </div>
</template>
<script>
import Deneme from '@/components/deneme.vue'
export default {
  name: 'Home',
  data() {
      return{
            mesaj: "Bu bir data mesajıdır.",
            deger1 : 10, deger2: 20,
            dizimiz: ['Deneme 1', 'Deneme 2', 'Deneme 3'],
            sayac: 0
      }
  },
  components: {Deneme},
  methods: {
      mesajimiz(){return this.mesaj},
      sayacArtir(){this.sayac++},
      sayacAlert(){alert(this.sayac)}
  }
}
</script>

Burada data içerisine bir sayaç ekledik. Ardında da 2 farklı method daha ekledik. Bir tanesinde sayacı birer artırıyoruz, diğerinde ise sayacın o anki değerini alert ile ekrana getiriyoruz.

@click İle Methodları Çalıştırıyoruz

HTML kısmında ise bir buton ve sayacı gösteren bir alan ekledik. Buton içerisinde ise @click ile methodumuzu çağırdık. Yani methodları @click (ya da v-on:click ile de kullanılabilir @click bunun kısaltılmış halidir.) yardımıyla kullanabileceğimizi öğrendik.

Şimdilik methodlar için de bu kadar bilgi yeterli olacaktır. Sonraki aşamalarda nasılsa daha kapsamlı vue.js methodları kullanacağız.

Vue.js Yaşam Döngüsü Hakkında Bir Mola

Vue.js’te created, beforeCreate, mount… vb. ifadeler ne anlama geliyor daha iyi anlayabilmek için şu görsel yeterli olacaktır.

Burada gördüğünüz ifadelere daha kapsamlı değinmek gerekiyor, biliyorum ancak şimdi yüzeysel olarak birkaç tanesinin ne işe yaradığını inceleyelim.

Vue.js Created()

Oluşturulan Vue.js yaşam döngüsünün created() kısmında, reaktif dataya erişebilir durumda olacaksınız. Ancak, henüz Virtual DOM ve templateler oluşmamış olacak.

created() ve mounted() çok benzer yapılar olarak görülse de ince bir çizgi bulunuyor. Sonraki yazılarda bu konuya da değinmeyi düşünüyorum.

Farkındayım tam olarak anlaşılmamış olabilir ancak yine de gelin bir örnek yapalım. Göreceksiniz ki sayfanız hazır olduğunda sayfamızdaki sayfaOlustu verisini güncellemiş ve ekrana yazdırmış olacağız.

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <Deneme></Deneme>
    <hr />
    <p>Data mesaj: {{ mesaj }}</p>
    <p>deger1 + deger2 = {{ deger1 + deger2 }}</p>
    <hr />
    <p v-for="dizi in dizimiz" :key="dizi.id">{{ dizi }}</p>
    <hr />
    <p>Method mesajimiz: {{ mesajimiz() }}</p>
    <hr />
    <p><button @click="sayacArtir()">Sayacı Artır</button></p>
    <p>Sayaç: {{ sayac }}</p>
    <hr />
    <p>sayfaOlustu: {{ sayfaOlustu }}</p>
  </div>
</template>
<script>
import Deneme from '@/components/deneme.vue'
export default {
  name: 'Home',
  data() {
      return{
            mesaj: "Bu bir data mesajıdır.",
            deger1 : 10, deger2: 20,
            dizimiz: ['Deneme 1', 'Deneme 2', 'Deneme 3'],
            sayac: 0,
            sayfaOlustu: null
      }
  },
  components: {Deneme},
  methods: {
      mesajimiz(){return this.mesaj},
      sayacArtir(){this.sayac++},
      sayacAlert(){alert(this.sayac)}
  },
  created(){
      this.sayfaOlustu = "Sayfamız oluştu..."
  }
}
</script>

Kodumuzda data içerisindeki sayfaOlustu‘yu null olarak oluşturduk ancak created hook‘u (hook’un Türkçesi çok anlamlı olmadığı için hook olarak kullanacağım.) içerisinde buna “Sayfamız oluştu…” değerini atayacağız.

Görüldüğü üzere aslında null olarak tanımlamış olsak da created() hook’u içerisinde bunu değiştirdik ve kullanıcı bu durumu fark edemeden ekranda yazımız göründü.

created() içerisinde birçok method çağırabilir ya da data içerisindeki değişkenleri değiştirebiliriz. İlerleyen yazılarda daha komplike yapılar oluşturabiliriz. Örneğin sayfa açılırken, kullanıcı daha önceden login olmuş mu olmamış mı bunu da kontrol edebilir, ona göre farklı işlemler yapabilirsiniz.

Son olarak Vue.js’in en sevdiğim yapılarından bir tanesi olan watch’ı göreceğiz.

Vue.js Watch

Sayfanızda bir input, select ya da herhangi bir değişebilir elementiniz var. Bu değiştiğinde de bir aksiyon almak istiyorsunuz. jQuery’de .change() method’unu kullanmanız gerekiyordu ancak burada watch ile hızlı bir çözüm sağlayacağız.

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <Deneme></Deneme>
    <hr />
    <p>Data mesaj: {{ mesaj }}</p>
    <p>deger1 + deger2 = {{ deger1 + deger2 }}</p>
    <hr />
    <p v-for="dizi in dizimiz" :key="dizi.id">{{ dizi }}</p>
    <hr />
    <p>Method mesajimiz: {{ mesajimiz() }}</p>
    <hr />
    <p><button @click="sayacArtir()">Sayacı Artır</button></p>
    <p>Sayaç: {{ sayac }}</p>
    <hr />
    <p>sayfaOlustu: {{ sayfaOlustu }}</p>
    <hr />
    <input v-model="girdi" /> {{ girdi }}
    <p>girdiDegisti: {{ girdiDegisti }}</p>
  </div>
</template>
<script>
import Deneme from '@/components/deneme.vue'
export default {
  name: 'Home',
  data() {
      return{
            mesaj: "Bu bir data mesajıdır.",
            deger1 : 10, deger2: 20,
            dizimiz: ['Deneme 1', 'Deneme 2', 'Deneme 3'],
            sayac: 0,
            sayfaOlustu: null,
            girdi: "Vue.js muhteşem!!!",
            girdiDegisti: "Girdi henüz değişmedi"
      }
  },
  components: {Deneme},
  methods: {
      mesajimiz(){return this.mesaj},
      sayacArtir(){this.sayac++},
      sayacAlert(){alert(this.sayac)}
  },
  created(){
      this.sayfaOlustu = "Sayfamız oluştu..."
  },
  watch:{
    girdi: function (yeniDeger, eskiDeger) {
        console.log("eskiDeger: " + eskiDeger)
        console.log("yeniDeger: " + yeniDeger)
        this.girdiDegisti = "Girdi değişti!!!"
    }
  }
}
</script>

Burada yeni bir input ekledik ve Vue.js’in en güzel özelliklerinden olan two-way binding (bir alt kısımda açıklamasını yapıyorum) özelliğini v-model (bir ya da birkaç sonraki yazıda detaylı değinmeyi planlıyorum) ile kullandık.

Vue’nun two-way binding sistemi, bir web uygulaması geliştirmenin en zor kısımlarından birini, kullanıcı girişi senkronizasyonunu alır ve v-model ile bunu son derece basit hale getirir. V-model directive (directive’lere ayrı bir yazıda değinmek gerekiyor), model her değiştiğinde template’i günceller ve template her değiştiğinde veri modelini günceller.

Üst kısımdaki kodu kendiniz denediğinizde konuyu daha iyi anlayacağınıza eminim :)

Evet, konu bir hayli uzadı, farkındayım :) Daha da uzayabilir aslında ama şimdilik burada bitiriyorum ve rar olarak projeyi alt kısma ekliyorum. Eğer bir hata ile karşılaşırsanız, kodları kıyaslama fırsatı bulabilirsiniz. Kalan kısımlaraysa sonraki yazılarda değinmeye devam edeceğim.

mustafacagrivueproje-ders5.rar (112 KB)İNDİR

Projeyi ayağa kaldırmadan önce npm install ile projenin gereksinimlerini (node_modules) npm ile indirebilirsiniz.

Kaynak: https://www.mustafacagri.com/vue-js-script-yapisi-data-methods-created-watch