#vueogreniyoruz: If, For, Show, Bind, On Kullanımı
Merhaba Arkadaşlar,
Öncekilere göre çeşit fazlalığı olan ve buna bağlı olarak uygulamaların da çok olacağı bir makale ile devam ediyoruz. Bu makalede vue’nun basit güzelliklerine dalacağız. Her biri isteğe göre vue isminden gelen ‘v-‘ ön eki kullanacaklar veya ön ek kullanmadan da bazı operatörler ile çalışabilecekler. Vakit kaybetmeden başlıklara ayırıp uygulamalarımızı yapalım.
v-if
Tüm yazılım dillerinde olduğu gibi burada da v-if kullanmak için bize true/false değeri dönen bir seçici gerekmektedir. Bir alanın görünürlüğünü v-if ile belirleyebiliriz. App.vue sayfası template’ini şu şekilde düzenleyelim:
<template>
<div id="app">
<div class="if-kullanimi" v-if="ifControl">Bu alan ifControl isimli seçicinin true/false değerine göre görüntülenebilir.</div>
</div>
</template>
v-if=”ifControl” olarak eklediğimiz alan bizim için ilgili div’in sayfadaki varlığının kontrolünü yapıyor. ifControl seçicisini script tagleri arasında data() fonksiyonu içerisinde tanımlayacağız. Bu değeri true gönderirsek ‘if-kullanimi’ class’ına sahip div sayfada görüntülenecek, false gönderirsek ilgili div sayfaya hiç eklenmeyecek. Script tag’i içeriğini şu şekilde güncelliyoruz:
<script>
export default {
data () {
return {
ifControl: true
}
}
}
</script>
Bu senaryoya göre ‘if-kullanimi’ class’ına sahip div sayfada görünecektir.
v-for
Farklı yazılım dillerinde olduğu gibi bir diziye veya belirli bir sayıya kadar döngü içerisine girip ekrana yazdırılacak veriler için v-for kullanırız. Biz küçük bir dizi yaratalım ve v-for ile dizi elemanlarını ekrana yazdıralım.
App.vue sayfasında bir üst başlıkta tanımladığımız ‘ifControl’ seçicisinin altına ‘forArray’ isminde bir array oluşturalım ve içerisinde bir kaç adet değer girelim. Düzenleme sonrasında script tag’imizin içeriği şu şekilde olmalıdır:
<script>
export default {
data () {
return {
ifControl: true,
forArray: [
{
id: 1,
name: 'Ahmet',
surname: 'CAN'
},
{
id: 2,
name: 'Veli',
surname: 'KARA'
},
{
id: 3,
name: 'Fatma',
surname: 'NUR'
},
{
id: 4,
name: 'Mamadou',
surname: 'Niang'
}
]
}
}
}
</script>
Daha sonra template içerisinde ‘for-kullanimi’ isimli bir div ekleyelim ve v-for kullanımını görelim:
<div class="for-kullanimi" v-for="item in forArray" :key="item">
{{item.id}} - {{item.name}} {{item.surname}}
</div>
v-for=”item in forArray” alanında tanımladığımız ‘item’ değeri ‘forArray’ içerisinde yapılan döngüde seçilen her elemanı temsil ediyor. Altında yazdığımız id, name, surname değerlerinin sonrasında tarayıcı üzerinden kontrol ettiğimizde sırasıyla tüm elemanların ekrana yazıldığını görebiliriz.
v-show
Kullanımı v-if ile aynı olan v-show’un çıktısının v-if’e göre bir farklılığı bulunuyor. v-if için false değeri gönderdiğimizde ilgili alan ekrana hiç basılmazken v-show ile false değeri gönderirsek etkilediği alan ekrana basılır ve inline olarak display: none; değeri verilir. İkisi arasından verinin ekrana hiç basılmamasının mı yoksa görünürlüğünün kapatılmasının mı daha performanslı olduğuna projelerinizin durumuna göre karar verebilirsiniz.
Template içerisinde
<div class="show-kullanimi" v-show="showControl">Bu alan showControl isimli seçicinin true/false değerine göre görüntülenebilir.</div>
Script içerisinde forArray sonrasına
showControl: false
tanımlamamızı yapıp test edebiliriz.
v-bind
View’da tanımlanmış bir değeri import edilmiş component’lara göndermek için kullanırız. Bu değer string bir değer olabileceği gibi bind edilen alanın kapsayıcısının stillendirilmesine yarayan bir class veya data nesnesi de olabilir. Örneğimizde App.vue içerisine bir component import edeceğiz ve bu component’a bir dizi içerisinde veri göndereceğiz.
/components/ klasörü altına BasicComponent.vue isimli bir sayfa oluşturalım. Sayfa kodlarını şu şekilde düzenleyelim:
<template>
<div>
<div :key="item" v-for="item in list">
{{item.id}} - {{item.name}} {{item.surname}}
</div>
</div>
</template>
<script>
export default {
data () {
return {
}
},
props: {
list: { type: Array, required: true }
}
}
</script>
<style scoped>
</style>
‘props’ altındaki ‘list’ alanı bu component’ın Array tipinde ve adı list olan bir veri grubunu alması gerektiğini yazıyor. ‘required: true’ bilgisini de yazarak bu verinin gelmemesi durumunda component’ın doğru çalışmayacağını da yazmış olduk.
Template içerisinde de v-for kullanarak gelen ‘list’ için döngü oluşturduk ve id, name, surname değerlerini ekrana yazdırdık.
Şimdi bu component’ı App.vue içerisine import edeceğiz ve içerisine ‘list’ değerini bind edeceğiz. App.vue sayfasında script tag’lerinin en üstüne şu satırı ekleyelim:
import BasicComponent from './components/BasicComponent.vue'
components içerisine BasicComponent’ı ekleyelim:
components: {
BasicComponent
}
Daha sonra data() fonksiyonu içerisine bir adet ‘bindArray’ tanımlayalım ve içerisini dolduralım(evet adından da anlaşıldığı gibi bir array hazırlıyoruz):
bindArray: [
{
id: 1,
name: 'Ahmet',
surname: 'CAN'
},
{
id: 2,
name: 'Veli',
surname: 'KARA'
},
{
id: 3,
name: 'Fatma',
surname: 'NUR'
},
{
id: 4,
name: 'Mamadou',
surname: 'Niang'
}
]
Son olarak template içerisinde BasicComponent’ı tanımlayalım ve BasicComponent içerisinde belirtilen ‘list’ nesnesine bindArray’i bind edelim.
<basic-component v-bind:list=bindArray />
App.vue içerisinde yaptıklarımızı genel olarak tanımlarsak:
– BasicComponent’ı import edip components içerisine yazdık.
– data içerisine bindArray adında dizi tanımlayıp içerisini doldurduk.
– template içerisine BasicComponent’ı yazıp v-bind ile bindArray’i gönderdik.
Bu arada v-bind:list olarak yaptığımız işlemi ‘:list’ olarak da yapabiliyoruz. Vue ile geliştirme yaparken tüm v-bind gerektiren alanlar ‘:’ ile kullanılabiliyor.
v-on
Pure javascript kullandığımızda ihtiyacımız olan click, mouseover gibi işlemler için ‘v-on’ ön ekini kullanırız. v-on içerisinde bir fonksiyon belirtiriz ve ilgili aksiyon gerçekleştiğinde bu fonksiyonun çalışmasını sağlamış oluruz. Küçük bir click örneği ile hem anlaşılması en basit konulardan brisi olan bu başlığı hem de yazıyı noktalayalım.
App.vue template’i içerisine ‘on-kullanimi’ class’ına sahip bir div ve içerisine buton ekleyelim:
<div class="on-kullanimi">
<button v-on:click="helloFunc('deneme mesajı')">Click Me!</button>
</div>
bir önceki başlıkta yazdığıma benzer olarak ‘v-on:click’ olarak yazdığımız alanı daha kısa kullanmak istersek ‘@click’ olarak yazabiliriz. Tüm ‘v-on’ özelliği kullanacak işlemlerde ‘@’ işareti ile aynı sonucu alabiliriz.
Eklediğimiz buton içerisine ‘helloFunc’ isminde bir fonksiyonun çalışmasını ve string bir değer göndermesini istediğimiz aksiyonu yazdık. Bu butona tıklama işlemi sayfa yüklendikten sonra DOM üzerinde bir kullanıcının isteğiyle olacak bir durum ve biz bununla ilgili fonksiyonu ‘methods’ içerisine yazmalıyız. Script tag’leri içerisinde methods oluşturup fonksiyonu ve aldığı parametreyi çağırıp alert ile ekrana yazdırıyoruz:
methods: {
helloFunc: function (parameter) {
alert(parameter)
}
}
Tarayıcıdan açıp butona tıkladığımızda alert ile ‘deneme mesajı’ yazısını görebiliriz.
—
Uzuuun bir makale sonunda vue’nun template içerisinde en çok kullanılan özelliklerinden bir kaçını işlemiş olduk. Her başlık için tek bir örnek verdim. Bu da yeterince anlaşılmamaya yol açmış olabilir. Daha fazla pratik yapabilmek için bu eğitim serisi sonrasında minik bir seri içerisinde ‘x’ bir konu üzerinde uygulama yapacağız. Bu uygulama içerisinde birden fazla component, view olması sebebiyle aynı işlemi birden fazla şablon üzerinde uygulayarak pratik yapabileceğiz.
Not: Bu ders içeriğinde kullanılan dosyaları görüntülemek için tıklayınız
Tüm Yorumlar