25 Ağu 2019

Vue temelleri

Author: strongsoul | Filed under: Teknik

Vue js temellerini tek bir makale de anlatacağım bu yazı da siz okuyucuların temel bir kaç bilgiye ihtiyacı vardır. Nedir bu bilgiler? JS nedir :), Npm, Studio code veya benzeri bir js editör, bu bilgilere ve toollara sahip iseniz haydi başlayalım.

Nedir bu vue dersek aslında günümüz popüler önyüz frameworklerinden sadece birisi, kim bulmuş neetmiş gibi ıvır zıvıra girmeyecem ama tek sayfa önyüz uygulama mimarilerinden bir mimari ayrıca lightweight yani siz türkler nasıl diyor 🙂 hafif, reactive denilen etkileşimli bir yapısı var(popüler tüm diğer önyüz frameworklerinde olduğu gibi), olmazsa olmazlarımızdan virtual domumuz var, işte kendi componentlerimizi falan üretiyoruz, angular falan dense de esnekliği açısından reacta benzetmekteyim hoş çok angular bilmem ama 🙂
He tabii ki en önemlisi takipçisi destekçisi yükselişi böyle çığ ya falan benzetiliyor, ben demiyorum öyle ölçüp biçiyorlar, ben esnekmiş iyimiş dedim sadece :).
Bu yazı da vue nun temel dinamiklerini anlatmaya çalışıcam, vue instance, event binding,one way-two way binding, computed-method-watch mantığı, koşullar, liste ve döngü gibi temel dinamikler üzerinde duracağım konular olacak.

Şimdi, javascript yapılandırıcımızla işe başlayalım.
Kodları çalıştırmak için sadece bir browsera ihtiyacınız var ya lokal yolu olduğu gibi browsera verebilirsiniz yada studio code kullanıyor iseniz live server eklentisini kullanabilirsiniz(Ritwick Dey)
Vue yu kullanabilmek için sadece head tagları arasına
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js“></script>
satırını yazmanız yeterli bu satır ile sayfamıza vue yu yüklemiş oluruz.

sonrasında bundan bir instance üretmemiz lazım ama nasıl ? bunu da body tagını kapatmadan hemen öncesinde yapıyoruz
<script>
new Vue({
})

</script>
</body>

Renkleri göz yormayan hale getirebilmek için vue js kütüphanesini eklediğimiz yerin altına aşağıdaki satırları ekleyelim.

Şimdi ilk adımımızı attığımıza göre reactive olgu penceresi için veri geçişlerinin nasıl olacağına dair incelemelerimize geçelim;

** vue da diğer single page applicationların genelinde olduğu gibi tek bir element altında gerekli view işlemlerimizi yapmamız gerekiyor yani bir div ve o divi kullanan vue instance ı.
şöyle ki;
html ana tagımız <div id=”vueApp”>
ise
new Vue({
el : “#vueApp”, şeklinde olmalıdır.

instance ımızı yukarıdaki durumu da içine alan data işlemleri ile işlemeye başlayalım ki hafızalarımızda şekillenip yer etsin;
basit bir header ile bir variable yazdırarak işe başlayalım
önce kodumuz;

Dikkat edersek instance ımız da el ve data adı altında iki yeni tanımlama görürüz burada el htmlimizdeki hangi elementin ele alınacağını gösterdiğimiz tanımlamadır.
Data ise verilerimizin barındığı kısım(cli da buradaki işlemler biraz farklı)
h3 tagımızda ise iki tane süslü parantez içerisinde verimizi yazdığımızı görebiliriz, kodumuzu çalıştırdığımızda mesajımızı gözlemleyebiliriz
peki bunu başka nasıl yazabilirdik yani süslü parantez yerine ? vue nun kendi nitelidiği başka taglarda var, şu şekilde yazabilirdik;
<h3 v-text=”h3content”></h3> v-text ile yani
peki ya text yerine html gömmek isteseydik zira bu tag da eğer <b> tagı gibi bir tag kullansak tag olduğu gibi yansıyacak ve işlevini yerine getiremeyecekti
onu da <span v-html=”htmlContent”></span> v-html ile yapılandırmamız gerekiyor
yani bu 3 durum şu şekilde olması gerekiyor
(kod yazılımın aynasıdır demiş, obivan)

Çalıştırdığınızda h3contentin tagları işlemediğini görmüşsünüzdür.
peki elimizde çapa elementi gibi bir element var ve href attribute une bir veriyi bağlamak istiyoruz, o da şu şekilde;
<a v-bind:href=”alink” v-bind:data-id=”dataId”>this is link</a>

Burada dikkat edersek farklı nitelikleri bağladık ama aynı direktif ile yaptık bu işi v-bind dedik o kadar 🙂
He bir de bunların kısa yazımları var yani v-bind demiyoruz da : koyuyoruz yetiyor yada actionlarda @ koyuyoruz yetiyor.
Action deyince şimdi bir button koyalım ve bir inputtaki değeri alıp toplayan, buttondan, inputtan falan tetikleyeceğimiz bir kaç aksiyon yapalım yani namı diğer event binding yapalım.
Bir button ekleyip onclick yordamını bağlamak için;
@click=”arttir()” -> <button @click=”arttir()”> sayiyi arttir </button>
Bir input ekleyip keypress yordamını bağlamak için;
@keypress=”keyp($event) -> <input type=”text” @keypress=”keyp($event)”/>
inputtaki yordam çağırımını modifier bir event ile çağırıma örnek olması adına yukarı satırdaki çağırımı şu şekilde de
@keypress.enter=”keypWithmodifier($event)” -> <input type=”text” @keypress.enter=”keypWithmodifier($event)”/>
yapabilirdik bu sayede doğrudan entera basıldığını anlayıp ona göre işlemimizi yapılandırabiliriz.
yukarıdaki bağlamalar ile nesnelerimize bir olay olduğunda tetikleyebilecekleri yordamların ifadesini sunduk peki bu işlenecek method veri tanımını nerede yapıyoruz yani yordam koşumu için tanımlamamız nasıl?
o da vue instanceımız içerisinde methods larda yer alır şu şekilde tanımlarız;
methods:{
ne methodu yapılandıracaksak o mesela
yukarıda örnek için verdiğim methodlardan button için olanı yazacak olursak
arttir(){
},
}

Peki method içerisinden data da tanımladığımız değerlere nasıl erişiyoruz ?
basit this anahtar sözcüğü ile mesela arttir methodunda sayi değişkenimizi bir arttırmak için this.sayi++; yazmamız yeterli olacaktır.
methods:{
arttir(){
this.sayi++
},

Bu bilgiler ışığında kodumuz;

Peki bu vue da two way bindings dedikleri olay nasıl? yani diyelim bir inputa değişkeni bağladık değişkeni değiştirdiğimizde input ta verinin yeni halini görürüz ama ya inputu elle değiştirirsek ne olacak one way durumlarında veri değişmez ama two way olayında inputtaki değişimde veriyi değiştirecektir. Bağlıyım bağlısın bağlılar…

Bu olay için v-model propertysini eklememiz yeterlidir.
v-model=”variable” -> <input type=”text” v-model=”sayi”/>
Bu propertynin veriyi doğrudan işlediğini göreceksiniz inputa veriyi girer girmez herhangi bir aksiyona gerek kalmadan doğrudan biçimlendirecektir.
hadi kodlayalım;

şimdi gelelim computed ve watch durumlarına;
Computed veri aynı ise işlemi değiştirmez rerender durumlarını falan dinlemeyen başına buyruk bir yapısı vardır 🙂 ama methodlar öyle mi ? rerender dedim mi başa sararlar,
watch olgumuz nedir peki ? bir variable daki değişimleri yakalamamızı sağlar.
Bir örnek ile pekiştirelim bu durumu;
öncelikle yazımımız method tanımlamaları gibi
computed: {
},
watch: {
},

myNumber diye bir değişkenimiz olsun random sayı üretip bu değişkene atayalım ve bunu watch ile izleyip computed ve method yapıları ile dolduralım.
kodumuz şu şekilde;

kodu çalıştırdığımızda göreceğiz ki computed tek bir değer üretimi gerçekleştirip diğer çağırımlarda bu değeri gösterecektir, method ise her defasında yeniden değer alımı yapacaktır.
* Watch un işlemlerini browser ın console u üzerinden gözlemleyebilirsiniz.
Burada sonuçlara baktığımızda computed satırlarını işlerken watch’un tek bir kere çalıştığını görebilirsiniz, fakat method da her bir çağırımda aktive olmuştur.

Olmazsa olmazlarımızdan koşullara geldi sıra;
v-if , v-else-if , v-else koşul komutlarımız
doğrudan örnek ile pekiştirelim.

gördüğünüz gibi v-if ile p elementini görünmez kılabiliyoruz showbox sadece 1 olduğunda yada 2 olduğunda yada bunlardan biri olmadığında şeklinde if else if yada else ile tagları betimleyebiliyoruz ve hatta bonus olarak son p doğrudan koşullu işlemeye örnektir hani buttondan bir önceki 🙂

son olarak listelere bakalım, liste tanımlamalarına, döngü işlemlerine;
gene data tanımlamamıza gelip json bir liste tanımlayalım,
data : {
parts : [
{
title : “CPU”,
price : 400,
count : 10
},
{
title : “MAINBOARD”,
price : 300,
count : 6
},
{
title : “RAM”,
price : 100,
count : 5
}
]
},

şimdi bu listeyi öncelikle döngü ile yansıtacağız sonra içindeki count bizim satabileceğimiz parça sayıları olacak ve biz bunlar üzerinde satışı kontrollü bir şekilde gerçekleştirerek bir bir azaltacağız.
şöyle ki ;
<li v-for=”part in parts” :class=”{‘’: part.count>0, ‘red’: part.count<=0}”>
<span>{{ part.title + ‘ — ‘ + part.count }}</span>
<button :disabled=”part.count<1″ @click=”part.count — “>satıldı</button>
</li>
burada döngüyü foreach yapısını bize sunan v-for ile yapılandırıyoruz ve foreach içeriğinde yakaladığımız elementin değerleri üzerinden gerekli elemanlarımızı oluşturuyoruz, burada daha önce anlatmadığım bir nitelik daha kullandım o da :class bu property ile var olan satıra doğrudan dinamik style verebiliyoruz kodumuzun son hali ise şu şekilde olmalıdır;

dikkat edersek acayip esnek ve hızlı bir üretim sağlayabiliyor vue bize.
Cli ile üretim, component kullanımı gibi durumları bir sonraki makalede anlatmaya gayret edeceğim, şimdilik sağlıcakla…

Yorum Bırakın