VueJs Öğreniyorum : Array (Diziler)

Merhaba arkadaşlar, bir önce ki VueJs Öğreniyorum : Giriş başlıklı yazımda Vue.js’ye giriş yapmıştık. Bu yazımda VueJs içinde kullanılan Array (diziler) kısmını incelemek istiyorum.

Aslında yapmak istediğim hepsini bir anda incelemek yerine adım adım giderek öğrenmek ve hemde kendime bir yardımcı kaynak kütüphanesi oluşturmak arkadaşlar. Umarım bu oluşturmaya çalıştığım kütüphane sizlere de yardımcı olur.

Dizi Nedir?

Öncelikle dizi nedir onu bir hatırlatmak fayda var. Bilmeyen yada ilk defa derslere başlayan arkadaşlar olabilirler. Dizi aslında bir nevi sıralı listedir demek yanlış olmaz. Bu sıralı listeyi 5 elemanlı da yapabiliriz, 100 elemanlı da. Demem o ki, diziler de bir sayı limiti yoktur. Örnek vermem gerekirse eğer; 0’den 10’a kadar pozitif tek sayıların oluşturduğu bir dizi istersek, bu dizimizin elemanları (1,3,5,7,9) olacaktır. Az çok dizinin tanımını yaptıktan sonra Vue.js ile dizilerin kullanımını öğrenmeye başlayalım.

Bu yazım da dizileri anlatacağımı söyledim fakat yazdığımız kod içerisin de bir adet for döngüsü yer almakta arkadaşlar. Nedeni de Array(diziler)’i okurken içinde ki her sırayı okutmamız lazım bu nedenle bitene kadar okunmasını istediğimiz için bir döngü kullanıyoruz.

Şimdi ilk olarak hazırlamış olduğum örneğe birlikte bakalım.

VueJS’de Array Kullanımı

See the Pen VueJs Öğreniyorum : Array by Ahmet Kaplan (@ahmetkaplan) on CodePen.

Yazmış olduğumuz VueJs kodumuz sorunsuz çalışmakta. Şimdi kod yapımızı baştan sonra doğru inceleyerek gidelim.

İlk olarak vue.js kodlarını inceleyelim.

İlk olarak var app = new Vue ile yeni bir yapı oluşturduk. Bir önce ki yazımda da yine “app” ismini kullanmıştım. Bu sizi yanıltmasın. Birden çok yapı oluşturduğumuz zaman hepsinin adını app yazdığımız zaman hata verecektir. Siz bu kısımlara istediğiniz isimleri verebilirsiniz.

Oluşturduğumuz uygulama altına el: ‘#ikinciDers’ adında bir element oluşturduk. Ve bu elemente kullanmak istediğimiz div’in id değerini vererek uygulamamıza bağladık.

Sonra ki adımda data‘mızı açtık ve içerisine yapılacaklar adında bir dizi oluşturduk. Dizi oluşturğumu zamanda dikkat etmemiz gereken nokta süslü parantez “{ }” yerine köşeli parantez “[ ]” kullanılır.

Sonra ki aşama da dizimizin elemanlarını tanımlıyoruz. Dizi elemanlarının başında kullanmış olduğumuz text yazısı düz bir yazı yazdırdığımız için kullandık. Çeşitlerini derslerimiz ve örneklerimiz ilerledikçe birlikte kullanacağız. Böylelikle vue.js kullanarak basit bir dizi yapımızı hazırladık.

HTML’de kullanımı (Çağrılması)

Şimdi de bu yapıyı HTML içerisinde nasıl kullandığımız bakalım.

Bir div oluşturduk ve id’sinin js’de elemente (el:) vermiş olduğumuz id ile aynı olmasına dikkat edelim. <div id:”#ikinciDers”> div yapımızı oluşturduktan sonra dizimizi listeleyeceğimiz için bir HTML listeleme tagı kullanalım ve <ol> tagımızı açalım. Buraya kadar normal HTML dilini kullandık.

Şimdi gelelim vue.js’yi entegre etmeye.  Listeleme işlem içi <ol> tagları arasına <li> tagımızı da açıyoruz <li> içerisine v-for=”liste in yapilacaklar” şeklinde bir for döngüsü oluşturuyoruz. Döngüler hakkında bir sonra ki yazılarımda daha detaylı değineceğim. Ama şunu şimdiden belirtebilirim ki aklımız karışmasın for’un başında ki v- ibaresi Vue’den geliğini göstermek için kullanılmıştır.

Peki bu komut ile ne yaptık? Biz dedik ki; “yapılacaklar” dizisi içinde ki her bir elemana “liste” adında bir değişken atı. Siz buraya liste değil de başka isim de verebilirsiniz burada ki amaç dizi elemanlarına biz isim atamak. Kullanmış olduğumuz yapılacaklar dizisini biliyorsunuz javascript kısmında dizimizin (array) ismi olarak belirlemiştik.

Bu aşamaları da bitirdikten sonra döngümüzü kullanarak dizi içerisinde ki elemanları ekrana yazdırmak kalıyor. Bunun içinde {{ liste.text }} komutunu kullanabiliriz. Hatırlarsanız dizi içerisinde her elemana “liste” adını vermiştik. Ve dizi içerisinde ki her veriyi “text” içerisine aramıştık. Bu komut ile de dizi elemanlarının içinde ki text değerlerini ekrana yazdırmasını sağlıyoruz. Ne yapana kadar? Döngü bitene kadar. Yani dizimiz içerisinde 3 eleman varsa 3 tanesini ekrana yazana kadar döngü devam etmekte.

Vue.js içerisinde Array kullanımını böylelikle öğrenmiş olduk. Şimdilik daha fazla uzatmadan ve sıkmadan bu yazımı sonlandırmak istiyorum. Bir sonra ki yazımda da vue.js için hazırlanan ve Google Chrome‘a kurulabilen vue.js Devtool eklentisinden de söz edeceğim.

Eklemek, düzeltmek yada sormak istedikleriniz varsa lütfen yorumları kullanmaktan çekinmeyin 🙂 .

Görüşmek üzere arkadaşlar.

 

Bunlar da hoşuna gidebilir

2 yorum

  1. Merhaba vuejs duydum ve dikkatimi çekiyor. Fakat yapmak istediğim vuejs bir yazılım dili ile kullanımı nasıl olur. Örneğin ASP.net webform bu konuda örnekler var mi?

    1. Tabii ki, Vue.js bir javascript kütüphanesi olduğu için herhangi bir programlama dili birlikte çalışabilirsiniz. Asp.Net bilmediğim için size bir örnek sunamam maalesef fakat bunun için internette çeşitli örnekler mevcut.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir