VueJs Öğreniyorum : VueJs Directives

VueJs Öğreniyorum : VueJs Directives

Herkese tekrardan merhaba arkadaşlar. VueJs Öğreniyorum eğitim ve öğrenme serimize devam ediyoruz. Bu sefer ki yazımızda VueJs Directives komutlarını göreceğiz. Vue.js’de directives’ler DOM (Document Object Model) tarafında kullanılır.

VueJs Directives Nedir? Nerede Kullanılır?

VueJs Directives kullanım alanlarını özetlemek gerekirse en basit örnek ile bir haber sitesi düşünün ve haber sitesinde yer alan haber manşetleri slider örnekleri verilebilir. Yada aynı şekilde bir blog içerisinde yer alan tab yapıları da örnek gösterilebilir. Tabii ki bu örnekler kullanım alanlarına göre çoğaltılabilirler. Zaten VueJs’de ki en güzel özellik bence Directives ile Component’lerin birbirinden ayrılması olmuş aslında.

Peki nedir bu VueJs Directives komutları?

Bizim bu dersimizde birlikte bakacağımız örnekler; v-text, v-html, v-if, v-else, v-show olacak. Dikkat ederseniz hepsinin başında v- ibaresi her almakta. Bu v-, kodun VueJs’den geldiğini göstermektedir.

Ek olarak bahsetmişken DOM’un da açılımını yapalım ki akıllarımız da soru işareti kalmasın değil mi? DOM, en basit ile javascript gibi dillerin HTML’den bilgi alıp HTML’e bilgi vermesine imkan sağlar. Yani bizim arayüz kısmında gördüğümüz işlemler de diyebilirim.

v-text Kullanımı ve Örneği

v-text komutu ile oluşturmuş olduğumuz DOM elementimiz içerisine text eklememize yaramaktadır. Aslında bu demek istediğimi aşağıda ki örnek ile daha kolay anlayabiliriz.

Yazdığımız kodu birlikte inceleyecek olursak eğer; VueJs Öğreniyorum : Giriş dersinden de hatırlayacağınız gibi eklemiş olduğumuz datamızı süslü parantezlerin {{ .. }} yarımı ile ekrana yazdırabiliyorduk. Bunun yerine v-text komutunu kullanarak da aynı işlemi gerçekleştirebiliriz.

Daha açıklayıcı olması için aynı mesajı iki farklı şekilde de ekrana yazdırarak görmek istedim.

VueJs Directives v-text örneği

v-html Kullanımı ve Örneği

Bu sefer de v-html kullanımına birlikte bakalım. Aslında v-html’in v-text’ten tek farkı zaten adı üstünde HTML komutlarını göstermeye yaramaktadır. Yani biz v-text içerisine HTML komutu yazarsak bunu HTML değil de text olarak algılar ve düz metin olarak ekrana yazar. Ama v-html komutu ile bunun içerisinde HTML olduğunu belirtmiş oluruz.

Gelin örnekte birlikte inceleyelim.

Ekran çıktısı da aşağıda ki gibi olacaktır.

VueJs Directives v-html örneği.

Görmüş olduğunuz gibi ilk iki directive içerisinde yazmış olduğumuz HTML kodları düz text yani metin olarak çıkarken, v-html directives’ini kullandığımız h1 içerisin de HTML kodlarını çalıştırmış olduk.

v-show Kullanımı ve Örneği

Evet, aslında bu v-show özellğini HTML arayüzünde göstermek yada saklamak istediğimiz alanlarda kullanabiliriz. Zaten show kelimesinden de anlayacağımız üzere “göstermek” anlamına gelmektedir. Daha iyi anlamak için basit bir örnek ile birlikte bakalım.

Ne yaptığımıza gelin birlikte bakalım. Vue.js’nin içine goster ve gosterme olarak iki data ekledik ve bunlara true ve false değerlerini atadık. Yani koşulladık. Şimdi de HTML içerisinde ki iki adet h1 tagımız mevcut fakat ekranda sadece v-goster directives’ini alan h1 tagı ekran gözükmekte. Bunun aksine v-gosterme directives’i false değerini aldığı için ekranda bize gösterilmemektedir.

Ama aslında olan şey şudur. Yazdığımız iki h1 tagı da bizim HTML komutlarımız içerisinde yer almaktadır. Fakat ekrana yansıtılmamaktadır. Gizlenmiştir. Yani “display=none” özelliğini almıştır. Eğer yapmış olduğunuz örnekte F12 tuşuna basarak devtools açarsanız HTML komutları içerisinde iki h1 tagını da göreceksiniz.

VueJs Directives v-show kullanımı.

v-if / v-else Kullanımı ve Örneği

v-if direcrives kullanımının kısa tanımını da koşullu direktif diyebiliriz.Bu örnekte de v-show örneğine benzer bir örnek verebiliriz. Yalnız burada dikkat etmemiz gereken bir nokta var. Hatırlarsanız v-show’da false değeri verdiğimizde h1 tagı kodlarımız içerisinde yer alsa da ekranda gözükmüyordu. Bu durum v-if’te tam tersi. Eğer v-if kullanıp değerini false yaparsak HTML içerisinden h1 tagını direk kaldıracaktır. Bunu örnek ile açıklayacak olursak.

Bu yapmış olduğumuz örnekte de goster datasına true değerini verdiğimiz de ekrana “Bu yazıyı göster” yazılı h1 tagımız gözükecek ve diğer h1 tagı da gözükmeyecektir. F12 ye basıp devtools açtığımız zaman da elements içerisin de ilk h1 tagını görebilirsiniz. Ama ikinci h1 tagı kaynak kodlarımız da yer almamaktadır.

VueJs Directives v-if kullanımı.

Yukarı da ki resimde de demek istediğimi görebilirsiniz. İlk h1 tagı ekranda ve kaynakta yer alırken ikinci h1 tagu ekran ve kaynakta yer almamaktadır. Değeri false yaparsak bu işlemin tam tersini görmüş oluruz.

VueJs Directives v-else kullanımı.

Bu dersimize de fazla uzatmadan ve akılları karıştırmadan burada kesmek istiyorum arkadaşlar. Bir sonra ki dersimiz de v-cloak ve v-bind directiveslarını öğreneceğiz birlikte.

Görüş, soru ve önerileriniz için lütfen yorumlar kısmını kullanın arkadaşlar.

Bir sonra ki yazımızda görüşmek üzere. 🙂

 

Ahmet Kaplan

1987, İstanbul doğumlu. Front-End Developer.

Son Yazılar
Yorum ( 2 )
  1. AHMET ASLAN
    7 Nisan 2017 at 19:39
    Cevapla

    Türkçe yapılan tutorıallarda anlamadığım en azından bir jsfıddle linki versenız ınsanlar oynasa ne guzel olur. bu kafayla bız hıcbıryere gelemeyız. ayrıca bu yorum bolumunda yazının uppercase olması zorunlu mu allah aşkına…

    • Ahmet Kaplan
      7 Nisan 2017 at 19:56
      Cevapla

      Öncelikle yorumunuz için teşekkür ederim. İlk olarak diğer dersleri de inceleyip gezseydiniz codepen.io kullandığımı görebilirdiniz. Bu dersimde bilerek kullanmadım. Şahsi düşünceme göre elle yazmak dil öğrenmek için daha etkili diye düşünüyorum.

Bir cevap bırakın