18
Mar
2018

VueJs Nedir ve İlk Örnek

VueJs Nedir?

VueJs nedir ? Evet bir framework daha, sıkılan framework yazıyor. Merhaba arkadaşlar bu aralar VueJs adında başka bir javascript framework duymaya başladım, tabi bende dedim nedir bu VueJs? Geliştiricisi Evan You. Tek başına geliştirmiş ve öyle devam etmekte. Framework’ün sitesine buradan ulaşabilirsiniz. İşin aslı inceleyip, denemeye başladığımda angular’dan farklı gelmedi bana. (Sonuçta ne kadar farklı olabilir ki 🤔) Eeee o zaman sizlerle hemen bir örnek yapmaya başlayalım.

VsCode da bir html5 sayfası açarak başlayalım. Malum kütüphanemizi eklemeliyiz isterseniz sitesinden indirerek ederek kullanabilir veya kasmayıp benim aşağıda yaptığım gibi cdn ile devam edebilirsiniz.

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

Kütüphanemizi ekledikten sonra ekrana bir datanın nasıl bastırılacağının bir örneğini yapalım. Bunun için önce id değeri olan div oluşturmamız gerekiyor. ve datanın gösterileceği yere de çiftli süslü parantezimizi açıp içine key’imizi yazıyoruz.

<div id="myApp">
   <h3>{{ user }} Merhba!</h3>
</div>

Şimdi sayfanın sonuna bir script bloğu daha açarak VueJs ile tanışmaya başlıyoruz.

<script>
    const app = new Vue({
        el: '#myApp',
        data:{
            user: 'M.Armağan Gültekin'
        }
    })
    </script>

Gördüğünüz üzere data içinde bulunan user anahtarına bağlı değeri ekrana yazdırmayı başardık. Şimdi birden çok data’yı listelemeye bakalım. Bunun için html içeriğimize ekleme yapıyoruz.

<div id="myApp">
   <h3>{{ user }} Merhba!</h3>
   <div>
      <ul>
         <li v-for="task in tasks">
            {{task }}
         </li>
      </ul>
   </div>
</div>

Html düzenledik, gördüğünüz üzere bir yığın içinde dönmek için kullanılan v-for kelimesini kullandık ve elimizdeki data anahtarının adını c# daki foreach mantığıyla yazıyoruz. Şimdi datamızı VueJs tarafında oluşturup ekrana basma adımını tamamlayalım.

<script>
    const app = new Vue({
        el: '#myApp',
        data:{
            user: 'M.Armağan Gültekin',
            tasks:['Alınacaklar','Yapılacaklar','Diğer']
        }
    })
    </script>

Yapılacaklar listelerinin ana gruplarını alt alta dizmiş olduk. Şimdide elimizde bir json nesnesi ile data’nın kullanımına bakalım. Json ile data aldığımız aslında çokta bir şey değişmeyecek ama özellikle html tarafında ufak bir değişiklik yaparak data içinden neyi yazdırması gerektiğini söyleyeceğiz.

<div id="myApp">
   <h3>{{ user }} Merhba!</h3>
   <div>
      <ul>
         <li v-for="task in tasks">
            {{task.TaskCount }} - {{task.TaskName }}
         </li>
      </ul>
   </div>
</div>

Nesne içindeki değişken isimlerini belirterek, o nesne içindeki hangi değeri yazdıracağını belirtiyoruz. VueJs buna göre bir json nesnesi döndürelim şimdi.

<script>
    const app = new Vue({
        el: '#myApp',
        data:{
            user: 'M.Armağan Gültekin',
            tasks:[
                    {'TaskName':'Alınacaklar','TaskCount' : 10},
                    {'TaskName':'Yapılacaklar','TaskCount' : 5},
                    {'TaskName':'Diğer','TaskCount' : 6}
                ]
        }
    })
    </script>

Çalıştırdığımızda o listede kaç görev olduğunu ve adını alt alta sıralanmakta olduğunu görmüş oluyoruz. Başka başka örneklerde görüşmek üzere. Herkese bugsız kodlamalar.

Share

You may also like...

Bir cevap yazın

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