Yazılım

Vue.js Directive Kullanımı (v-text, v-html, v-bind, v-if, v-on)

tarafından yazıldı Mehmet Ali Ayvaz

Bu yazımızda Vue.js Directive kullanımını ve bunlarla ilgili örnekler göreceğiz. Yazımızda küçük örnekler ile Directive çeşitlerini öğrenip pekiştireceğiz.

Vue.js Directive

  • Data Binding
    • Mustache
    • v-text
    • v-html
    • v-model
    • v-once
  • Attribute Binding
    • v-bind,
  • Directive 
    • v-if
    • v-else-if
    • v-else
    • v-show
  • Array Data Binding
    • v-for
  • Event Binding
    • v-on

Bu yazımızda yaptığımız örneklerde Bootstrap ve Vue.js’i CDN üzerinden kullanacağız. Yaptığımız örneklerin kodlarına yazı içerisinden ulaşabilirsiniz.

Data Binding

Mustache

Vue.js Directive “mustache” ile datada tuttuğumuz bir mesajı ekrana yazdırabiliriz. Bunun için html kodlarındaki bir elementin içinde “{{ mesaj }}” şeklinde mesajımızı yayımlayabiliriz. Bu örnekte “Mustache” kullanımını açıkladık.

Vuejs Mustache

Html kısmında “p” elementi içerisinde süslü parantezler kullanarak, vue.js instance içerisindeki data kısmından mesajımızı çekerek ekranda gösterdik.

v-text

Süslü parantezler kullanmak yerine “v-text” Directive’ini kullanarak da mesajımızı ekranda gösterebiliriz.

Vuejs v-text

Vuejs v-text

v-html

Eğer mesajımızın içerisinde html elementi kullanmak istiyorsak bunun için v-html kullanabiliriz. Bu örneğimizde yayımladığımız mesaj içerisindeki bir kelimeyi kalın yazmaya çalışalım. Bunun için <b> elementini kullanalım.

Vuejs v-html


v-model

V-model Directive’i ile form input içindeki değeri data ile bağlayabiliyoruz. Elimizde “mesaj” isminde bir veri olduğu için formdaki input kutucuğunun içinde bu mesajı gösterecektir. Eğer input içindeki değeri değiştirirsek, aynı anda “mesaj” verisi de güncellenecek ve sayfa içerisinde başka bir yerde kullanılıyorsa orası da güncellenecektir.

Vuejs v-model

v-once

V-once Directive’i ile bir veriyi sabit tutabiliriz. Yani datayı ekrana yazdırdıktan sonra, data değişse bile “v-once” kullandığımız için ekranda görünen mesaj sabit kalacaktır.

Vuejs v-once

Attribute Binding

v-bind

V-bind Directive’i ile attribute bind edebiliyoruz. Bu örneğimizde “href”, “title”, ve “id” Attribute’lerini bind ederek çalıştıracağız. Kullanım olarak html Attribute’den önce ‘v-bind:’ yazarak kullanabiliriz. Diğer kullanım şekli ise ‘:’ (iki nokta) kullanarak bind işlemini gerçekleştirebiliriz.

Vuejs v-bind

Directive

v-if | v-else-if | v-else

V-if, v-else-if ve v-else Directive’leri verilen koşulun sağlanıp sağlanmamasına göre elementi dom üzerinde gösterir veya yok eder. Eğer tek koşulumuz varsa sadece “v-if” kullanmamız yeterli olacaktır. Birden fazla koşulumuz varsa ilk “v-if”ten sonra “v-else-if” olarak kullanacağız. Eğer koşullar bittiyse ve geri kalan her şey için elementi dom üzerinde göstereceksek “v-else”i de kullanacağız.

Aşağıdaki örnekte iki farklı koşul verdik. İlk koşul sağlanmadığı için ikinci koşula geçti, ikinci koşul da sağlanmadığı için “mesaj3” gösterildi.

Vuejs v-if

v-show

V-show Directive’i bir elementi gösterip gizlemeye yarar. Eğer v-show değeri “true” ise element gösterilir. Eğer “false” ise elementin “display” özelliğini “none” yaparak ekranda görünmesini engeller. V-if ile farkı ise, v-show’da element dom üzerinde yaratılır, sadece css özelliği ile gizlenir. Ama v-if elementi domdan direk kaldırır.

Vuejs v-show | vue.js directive

Array Data Binding

v-for

Yukarıda “Data Binding” kısmında Vue.js instance içerisinden data bind etmeyi görmüştük. Peki bir dizi içerisindeki elemanları sırayla elde etmek için ne kullanabiliriz? Burada devreye “v-for” Directive’i giriyor. V-for ile bir dizi içerisindeki elemanları sırayla dolaşarak ekranda gösterebiliriz.

Örnek olarak elimizde dört tane öğrenci ismi olsun. Bunları dizi içerisinden “v-for” ile ekrana yazdıralım. Burada öğrencileri “li” elementi içerisinde yazdıracağız. Bu yüzden “li” elementi içinde “v-for” Directive’ini kullanıyoruz. İlk kullandığımız isim herhangi bir adlandırma olabilir. Biz burada “ogrenci” ismini tercih ettik. Tırnak içine önce bir değişken ismi, sonrasında ise dizimizin adını yazıyoruz. Böylece oluşturduğumuz değişken sırayla dizi içerisindeki elemanları dolaşıyor ve ekrana süslü parantezler yardımıyla veriyi yazdırıyor.

Vuejs v-for

Event Binding

v-on

V-on Directive’i ile tanımlanan bir metodu çalıştırabiliriz. Buradaki örnekte “p” elementi içerisinde bir mesaj yayımladık. Buttona tıklandığında ise “degistir” metodu çalışacak ve mesaj değiştirecektir.

Ayrıca farklı eventler de kullanabiliriz. Örnek olarak “v-on:keyup.enter” ile klavyede “enter” tuşuna basıldığında buton tetiklenmiş olacaktır.

Birde “v-on:” yerine “@” işareti de kullanılabilir. Aşağıdaki örnekte gördüğünüz gibi iki farklı buton tanımlaması yaptık. İkisi de aynı işlemi yapacaktır.

Vuejs v-on | vue.js directive

Bu yazımızda Vue.js Directive’leri gördük. Görüşlerinizi bizimle yorum olarak paylaşabilirsiniz.

Yazılım kategorisine giderek yazılım hakkında makalelerimizi okuyabilirsiniz.

Vue.js Directive’leri kendi dökümantasyonundan okumak için buraya tıklayabilirsiniz.

Yazar Hakkında

Mehmet Ali Ayvaz

Kurgu ve tasarımla uzun süre ilgilendikten sonra yazılımla bu serüveni devam ettiriyorum. İnsanlara faydalı olabilecek içerikler hazırlama uğraşındayım.

Yorum Yap