Vue.js Array Data Bindings İşlemi
Hepinize merhaba dostlarım 😊. İnanılmaz hjızlı geçen bir haftanın ardından gelen bir pazar gününü yine yeni bir makale ile taçlandırmak istiyorum ve artık biliyorsunuz neredeyse her pazar (acil ve şehir değiştirme durumlarım hariç) yeni bir makale ile karşınızdayım 😊
Özellikle son zamanlar üzerine çok fazla yoğunlaştığım ve proje geliştirme durumlarımın olduğu bir framework üzerinden yani vuejs konularından birisinden bahsetmek istedim. Şimdi içinizden diyorsunuzdur dostlarım
Oooooo vue.js yenir yenir omega 5 😅
aynen öyle dostlarım konumuz o 😊. Yalnız direkt olarak vue.js nedir şeklinde tabii anlatmayacağım içerisindeki bir konuya değineceğim. Şimdi içinizden diyorsunuz tekrardan
Hocam büyük ihtimalle döngüler konusunu göstereceksiniz galiba öyle seziyoruz
tam üstüne bastınız dostlarım 😊. Özellikle veri tabanına api ile bağlanıp verileri çekeceğimiz durumlarda oldukça sık karşılaştığımız bu işleme gelin bir göz atalım. Ama öne ufak bir şekilde konumuza yani Vue.js Array Data Bindings konumuza girişimizi yapalım 😊
Nedir Bu Array Data Bindings ? Gerekli Mi ?
Eveeeeet dostlarım artık zaman geldi ve konumuza girişimizi yapalım. Diğer programlama dillerinde olduğu gibi aslına bakacak olursak vue.js üzerinde de döngü var. Olmasa zaten absürt bir durum olurdu siz de biliyorsunuz bunu 😊
Dostlarım Array Data Bindings konusu kısaca özetlememiz gerekirse dizi şeklinde gelen veriyi bağlamak olacaktır. Daha öncelerinde hani element içerisine veri yazdırmak için kullandığımız Data Bindings yapısının birebir benzeri ama bunda array şeklinde veri dönüyor 😊. Tabi bizim bunu da bir for döngüsüne bağlayıp getirmemiz gerekebiliyor 😊.
Şimdiiiii gelelim gerekli mi değil mi konusuna dostlarım 😊. Size bu haftaki yaptğımı bir olaydan bahsederek aklınızda daha çok pekişmesini sağlamak istiyorum
Öncelikle dostlarım geliştirdiğim bir sistemde yetkiler kısmını ayarladım. Tabi admin paneline girince yan kısımda sidebar bölümünde kullanıcıların yetkilerine göre menüler vs listeleniyor. Şimdi ben aslında o menü isimlerini ve yetkiye göre görünüp görünmeyeceğini bir döngü üzerinde listeledim. Şimdi 3 adet yetki var totalde
Ben eğer döngü ile yapmayıp her kullanıcı için ayrı ayrı menüyü statik şekilde yapsaydı ne kadar zor olacaktı değil mi 😅. Özellikle de menü adlarını revize edince de 3 kısımdan da düzenleme işlemi. Hadi bunu da geçtim 3 5 menü olsa neyse yaparız dediniz. 20 30 menülü bir panelin olduğunu düşünsenize bi 😅. İnsanı canından bezdirir.
İşte bu yüzden dostlarım hem dinamik ve hem de kodlama performansı açısından döngü kullanmanın ve diğer şekilde dediğim gibi statik yapmamanın avantajını görmüş oldunuz anlattığım olaya bakacak olursak 😊.
Artık daha fazla çenem düşmeden konumuza girişimizi gerçekleştirelim
Kodlama Kısmına Geçelim
Eveeeet artık geldik kodlama kısmımıza dostlarım. Hemen kodlama ekranımızı açalım (editörlerimizi veya idelerimizi) ve aşağıdaki verdiğim kodla proje çatımızı oluşturalım
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js Array Data Binding İşlemi | MFSoftware Blog</title>
<!-- BOOTSTRAP CDN DAHİL ETTİK -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div id="app">
</div>
<!-- VUE CDN DAHİL ETTİK -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
name: "Vue.js Array Binding İşlemi | MFSoftware Blog",
data: {}
});
</script>
</body>
</html>şeklinde kodlarımızı dahil ettik dostlarım 😊. Daha sonrasında ise bir veri dizisi oluşturalım. Bunlara ben şimdilik meyve isimleri koyacağım
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js Array Data Binding İşlemi | MFSoftware Blog</title>
<!-- BOOTSTRAP CDN DAHİL ETTİK -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div id="app">
{{ meyveler }} <!-- BURADA ÇEKTİRDİM -->
</div>
<!-- VUE CDN DAHİL ETTİK -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
name: "Vue.js Array Binding İşlemi | MFSoftware Blog",
data: {
meyveler : ["Kivi","Kayısı","Şeftali"] // buraya tanıttım
}
});
</script>
</body>
</html>şekildeki gibi ayarladım. Ekranımıza gelecek olan çıktı
[ "Kivi", "Kayısı", "Şeftali" ]şeklinde olacaktır. Bu kısma kadar getirdiysek dostlarım cidden çok güzel. Ama client tarafına bu şekilde sunmamız pek iyi olmayacaktır dostlarım 😊. Bunu bir tabloya dökmek istersek nasıl dökeceğiz ? Hemen onu da gerçekleştirelim
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js Array Data Binding İşlemi | MFSoftware Blog</title>
<!-- BOOTSTRAP CDN DAHİL ETTİK -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
<div id="app">
<table class="table">
<thead>
<tr>
<th scope="col">Meyve Adı</th>
</tr>
</thead>
<tbody>
<tr v-for="item in meyveler">
<td>{{ item }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- VUE CDN DAHİL ETTİK -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
name: "Vue.js Array Binding İşlemi | MFSoftware Blog",
data: {
meyveler : ["Kivi","Kayısı","Şeftali"]
}
});
</script>
</body>
</html>şeklinde kodlarımızı yazdık. Bu kodlarımızı yazdıktan sonra ise karşımıza gelecek olan çıktı
şeklinde olacaktır. Bu kısma kadar tamamız. Şimdiiiiii akıllarda bir soru var ve bunu tam ben şu an değinecekken sizin demeniz daha da motive ediyor beni
Hocam normalde hani biz veri tabanıyla vs çalışacak olduğumuzda bunun gibi değil de atıyorum ürün adı, açıklaması ve fiyat konuları geliyor ya birden fazla. Onun gibi verilerimiz olursa nasıl çekeceğiz ?
Dostlarım çok güzel kısım işte burası. Bu şekilde dediğiniz olay dizi içerisinde objelerin yer alma olayıdır. Bu dediğiniz olayda veri tabanından bize şu şekilde veri dönüyor
{
"urun_ad" : "Macbook Pro",
"urun_aciklama" : "Kod yazmaya çok çok elverişli",
"urun_fiyat" : 35000
},
{
"urun_ad" : "Casper Excalibur",
"urun_aciklama" : "Oyunda güç arayanlara özel",
"urun_fiyat" : 19000
},
{
"urun_ad" : "IPHone 8",
"urun_aciklama" : "İdeal Telefon",
"urun_fiyat" : 10000
}Şimdi bu şekilde veriyi tabloya aktarma kısmını kodlayalım hemen hızlıca
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js Array Data Binding İşlemi | MFSoftware Blog</title>
<!-- BOOTSTRAP CDN DAHİL ETTİK -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
<div id="app">
<table class="table">
<thead>
<tr>
<th scope="col">Ürün Adı</th>
<th scope="col">Ürün Açıklama</th>
<th scope="col">Ürün Fiyat</th>
</tr>
</thead>
<tbody>
<tr v-for="item in urunler">
<td>{{ item.urun_ad }}</td>
<td>{{ item.urun_aciklama }}</td>
<td>{{ item.urun_fiyat }} ₺</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- VUE CDN DAHİL ETTİK -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
name: "Vue.js Array Binding İşlemi | MFSoftware Blog",
data: {
urunler : [
{
"urun_ad" : "Macbook Pro",
"urun_aciklama" : "Kod yazmaya çok çok elverişli",
"urun_fiyat" : 35000
},
{
"urun_ad" : "Casper Excalibur",
"urun_aciklama" : "Oyunda güç arayanlara özel",
"urun_fiyat" : 19000
},
{
"urun_ad" : "IPHone 8",
"urun_aciklama" : "İdeal Telefon",
"urun_fiyat" : 10000
}
]
}
});
</script>
</body>
</html>şeklinde kodlarımızı yazdık dostlarım. Fartk ettiyseniz kodlamada her bir dönen değer obje tipinde olduğu için o objenin içerisindeki değerleri yazdırdık. Karşımıza gelecek sonuç ise
şeklinde olacaktır. Şimdi diyorsunuz siz içinizden
Hocam çok güzel değindiniz çok sağolun 😊. Yalnız bu kısımda sıra numaralarını da getirmek istiyoruz bunu nasıl yapabiliriz
bunun için ise yapacağımız kısacık bir işlem var. Dikkat ettiyseniz item diye bir değişkene döngü içindeki verileri alıyoruz ya buraya (item,index) yazarsak index değişkenine sıra numaralarını alabiliriz. Hemen o kısmı da kodlayalım
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.js Array Data Binding İşlemi | MFSoftware Blog</title>
<!-- BOOTSTRAP CDN DAHİL ETTİK -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
<div id="app">
<table class="table">
<thead>
<tr>
<th scope="col">Sıra No</th>
<th scope="col">Ürün Adı</th>
<th scope="col">Ürün Açıklama</th>
<th scope="col">Ürün Fiyat</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in urunler">
<td>{{ index }}</td>
<td>{{ item.urun_ad }}</td>
<td>{{ item.urun_aciklama }}</td>
<td>{{ item.urun_fiyat }} ₺</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- VUE CDN DAHİL ETTİK -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
name: "Vue.js Array Binding İşlemi | MFSoftware Blog",
data: {
urunler : [
{
"urun_ad" : "Macbook Pro",
"urun_aciklama" : "Kod yazmaya çok çok elverişli",
"urun_fiyat" : 35000
},
{
"urun_ad" : "Casper Excalibur",
"urun_aciklama" : "Oyunda güç arayanlara özel",
"urun_fiyat" : 19000
},
{
"urun_ad" : "IPHone 8",
"urun_aciklama" : "İdeal Telefon",
"urun_fiyat" : 10000
}
]
}
});
</script>
</body>
</html>şeklinde kodumuzu düzenledik dostlarım. Ekranımıza gelecek çıktı ise
şeklinde güzel bir şekilde çıktı bizi karşılayacaktır dostlarım 😊. Basit bir şekilde her işlemimizi gerçekleştirdik
Eveeeet dostlarım bu yazımda sizlere elimden geldiğince dilim döndüğünce Vue.js Array Data Bindings konusundan elimden geldiğince dilim döndüğünce bahsettim. Umarım faydalı olmuşumdur. Konu başlarda biraz karmaşık gelebilir. Hani her ne kadar da her yazımda basit dememin yanısıra karmaşık olan yanları illa ki vardır yeni öğrenen dostlarım için. Aynı yollardan geçtiğim için biliyorum anlıyorum 😊. Bu aşamada yapmanızı istediğim tek şey her yazımda da dediğim gibi "İstikrarlı ve Azimli Olmalısınız, Bolca Pratik Yapmalısınız 😊". Bu dediklerimi hayat felsefeniz yaptığınız sürece başarı sizler için kaçınılmaz olacaktır.
Aynı zamanda 25 Aralık 2022 de kurmuş olduğum seyyaryazilimci.com soru cevap sitesi de yayında dostlarım haberiniz olsun. Her zaman dediğim gibi sorular ve cevaplar belirli bir süre admin onayından geçerek sistem üzerinde yayınlanmaktadır dostlarım bilginiz olsun😊.
Hayallerinizi gerçekleştirmeniz ve güzel yerlere gelmeniz dileklerimle... İyi çalışmalar dilerim 😊
Yazar Hakkında
Kendi Halinde Bir Backend Developer