Vue.js Yazıları 3 - Declarative Rendering, Conditionlas, Loops

Merhabalar. Bu yazı içerisinde

Declarative Rendering
Conditionlas
Loops konularına değineceğiz.

Declarative Rendering

Vue.js bizlere declarative yani bildirmeli bir geliştirme imkanı tanıyor. Bizim bir noktada tanımladığımız bir Vue örneğimizin HTML içinde tanımlanan isim ile çağırılıp kullanılmasını sağlıyor bizlere. Bir örnek ile devam edelim.

Bir önceki yazıda oluşturmuş olduğumuz projeyi herhangi bir IDE ya da metin editöründe açalım ve public altındaki index.html dosyasının içeriğini aşağıdaki içerik ile değiştirelim.

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="firstApp">
      
    </div>
    <script>
      var firstApp = new Vue({
        el: '#firstApp',
        data: {
          message: 'Hello Vue!'
        }
      })
    </script>
  </body>
</html>

Şimdi bu dosyası içerisinde head kısmında bir vue.js kaynak dosyası eklenmiş. body tag’i içerisinde firstApp id bilgisine sahip bir div tanımlanmış ve bu div içerisinde de çift süslü parantezler arasında message değişkeni çağrılmış. Bu çift süslü parantez kullanımı terminolojide interpolation olarak geçmekte. Yani bizlerin oluşturduğumuz bir Vue değerinin içindeki bir bilgiyi alıp kullanmamız bu şekilde çift süslü parantezler arasında çağırım ile mümkün oluyor ve buna interpolation deniliyor.

firstApp div’inin altında ise bir script tanımı görüyoruz. Bu script tanımı içerisinde new Vue ifadesi ile bir Vue örneğinin oluşturulduğunu görüyoruz. Bu örneğin oluşturulması sırasında = operatörünün sol kısmında klasik Javascript’ten bildiğimiz değişken isimlendirmesi yer alıyor. Vue örneğinin oluşturulmasının iç kısmında bir el tanımı görüyoruz. el tanımının karşısında yer alan #firstApp bilgisi dikkat edersek div’in id bilgisi ile aynı. İşte bu noktada bir Vue örneğinin HTML içindeki kullanımı için div’in id bilgisi ile el tanımındaki değerin aynı olması gerektiğini söylebiliriz, iki alan birbirine bu el bilgisi üzerinden bağlanacaktır. el tanımının altında ise data tanımı görüyoruz. bu data tanımının içinde yapılan tanımlamalar aslında Vue örneğinin içinden çağırıp kullanabileceğimiz alanları barındırıyor. Örneğin biz div içinde message tanımının değerini ekrana yazdıracağız, data alanının içinde de bu message tanımı yapılıyor.

Ekran Görüntüsü http://localhost:8080/ adresine gittiğimde ekranda message değişkenine atanmış Hello Vue! yazısını görüyorum.

Conditionals and Loops

İsminden de anlayabileceğimiz gibi conditionals koşullu işlemleri, loops da döngüleri niteler. Şimdi biz koşullu ifade ve döngüler Vue.js’de nasıl kullanılır ona bakalım. Önce koşullu ifade için örnekleme yapalım:

Koşullu ifadeler için biz v-if özelliğini kullanabiliriz. v-if özelliğine atanan değer true olduğunda bu özelliğin kullanıldığı element çalışacak iken atanan değer false olur ise çalışmayacaktır.

Şöyle bir örneğimiz olsun:

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="conditionalApp">
  <span v-if="visible">You can see this text!</span>
</div>
<script>
  var conditionalApp = new Vue({
    el: '#conditionalApp',
    data: {
      visible : true
    }
  })
</script>
</body>
</html>

Yukarıdaki kodda conditionalApp id bilgisine sahip bir div’imiz var ve div içerisinde span elementinde v-if özelliği kullanılmış. v-if özelliği de visible adındaki bir değişkenin değeri ile ilişkilendirilmiş. script kısmında ise Vue örneğinin oluşturulması, el özelliğine div ile aynı ismin atanması ve data kısmında visible değişkeninin true başlangıç değeri tanımlanmasını görüyoruz.

Browser’a gidip baktığımızda gördüğümüz şey You can see this text! yazısının ekranda olmasıdır.

Şimdi Browser’da konsol kısmını açalım ve konsola conditionalApp.visible = false yazalım. Bu komutu çalıştırdığımızda ekrandaki yazının görünmez duruma geçtiğini göreceğiz. Vue.js bu şekilde reactive bir geliştirme imkanı sağladığını bizlere göstermiş oluyor.

Döngüler için de şöyle bir örneğimiz olsun:

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="loopApp">
  <ol>
    <li v-for="driver in drivers">
      
    </li>
  </ol>
</div>
<script>
  var conditionalApp = new Vue({
    el: '#loopApp',
    data: {
      drivers : [
        {name: 'Michael Schumacher'},
        {name: 'Felippe Massa'},
        {name: 'Rubens Barichello'}
      ]
    }
  })
</script>
</body>
</html>

Yukarıdaki örneğimizde loopApp isimli bir div’imiz var ve bu div içerisinde bir ordered list tanımı yapılmış. ol içerisinde ise tek bir li tag’i kullanılmış ve bu li tag’inde v-for özelliği kullanılmış. v-for özelliği sayesinde li tag’i kendini çoklayacaktır. v-for özelliğine driver in drivers değeri atanmış. Vue örneğinin oluşturulduğu kısma dikkat edersek data kısmında bir drivers arayı mevcut. driver in drivers ifadesi ile de drivers array’i içerisindeki her bir eleman driver değişkeni ile temsil edilmiş. li tag’inin içerisinde de element’in name özelliği ekrana yazdırılmış.

Browser’dan kontrolümüzü yaptığımızda şöyle bir ekran göreceğiz:

Konsolumuz açık durumda iken conditionalApp.drivers.push({name:’Fernando Alonso’}); komutunu çalıştıralım.

Drivers array’ine yeni bir veri eklendi ve eklenen direkt olarak ekrana yansıdı.

Bu yazıda anlatacağım bu kadar arkadaşlar. Declarative Rendering, conditionals and loops konularını öğrenmiş olduk.

Başka yazıda görüşenece kadar sağlıcakla kalın.