Vue.js Direktifler
 |
| Vue.js Direktifler |
Vue.js ile bir elemente özellik atamak veya kontrol sağlamak için direktifler kullanılır. Mesela önceki dersimizde method 'lardan bahsetmiştim. onclick ve onfocus gibi özellikleri direktif olarak kullanıyoruz.
v-html
Örneğin bir Vue uygulamasında bir data içerisinde bir HTML kodu bulunsun.
Vue JS
var uygulama = new Vue({
el: "#anasayfa",
data:{
veriHTML: "<b>Gökhan</b>"
}
})
Şimdi veriHTML değerini {{ veriHTML }} olarak yazdırabiliriz ancak sayfada HTML olarak değil string olarak görüntülenecektir. Bunun için "v-html" direktifini kullanacağız.
HTML
<div id="anasayfa">
<p v-html="veriHTML"></p>
</div>
Böylece değeri HTML kodu olarak p etiketi içerisinde görüntüledik.
v-show
Bir başka direktif de "v-show" dur. Eğer veri true dönerse etiketi görüntüleyecektir, false dönerse etiket yok olacaktır. v-show ekranda display:block|none; işlemi görecektir. v-if gibi etiketi komple ortadan kaldırmaz.
Vue JS
var uygulama = new Vue({
el: "#anasayfa",
data:{
veri1: "Merhaba",
veri2: true,
veri3: false
}
})
HTML
<div id="anasayfa">
<p v-show="veri1">{{ veri1 }}</p>
<p v-show="veri2">{{ veri2}}</p> <p v-show="veri3">Çalışmayacak</p>
</div>
- veri1 görüntülenecek ve Merhaba yazacaktır.
- veri2 görüntülenecek ve true yazacaktır.
- veri3 ise false olduğu için görüntülenmeyecektir.
v-model
Bir diğer direktif v-model bu direktif ile reaktif olarak input girişi yapılmaktadır.
Bir diğer direktif v-model bu direktif ile reaktif olarak input girişi yapılmaktadır.
var uygulama = new Vue({
el: "#anasayfa",
data:{
inputGiris: "Merhaba"
}
})
HTML
<div id="anasayfa">
<input type="text" v-model="inputGiris" />
<p>{{ inputGiris }}</p>
</div>
v-model input örneği:
v-bind
Son olarak yoğun olarak kullanacağımız v-bind direktifinden bahsedeceğim. v-bind ile bir element içerisinde istediğimiz attribute 'a işlem yapabiliyoruz ve istersek isteğe bağlı attr değeri ekleyebiliyoruz.
Vue JS
var uygulama = new Vue({
el: "#anasayfa",
data:{
sinifAdi: "Merhaba",
idDegeri: "paragrafim"
}
})
HTML
<div id="anasayfa">
<p v-bind:class="sinifAdi" v-bind:id="idDegeri">Gökhan Korul</p>
</div>
İstersek class ataması yaparken bir if koşulu da kullanabiliriz. Mesela 2 adet butonumuz var hangisi tıkalırsa ona aktif(active) sınıfı eklemek istiyoruz.
Vue JS
HTML
Vue JS
var uygulama = new Vue({
el: "#anasayfa",
data:{
btn1:1,
btn2:2
},
methods: {
aktifEt(id) {
if (id == 1) {
this.btn1 = 1
this.btn2 = 0
} else if (id == 2) {
this.btn2 = 1
this.btn1 = 0
}
}
}
})
HTML
<div id="anasayfa" class="p-2">
<a href="#"
v-bind:class="[btn1 == 1 ? 'active' : '']"
v-on:click="aktifEt(1)"
class="btn btn-primary btn-lg">
Anasayfa
</a>
<a href="#"
v-bind:class="[btn2 == 1 ? 'active' : '']"
v-on:click="aktifEt(2)"
class="btn btn-primary btn-lg">
Ürünler
</a>
</div>
Burada btn1 ve btn2 adında iki data verisi oluşturduk ve bunlardan hangisi 1 ise o class içerisinde active yazacak şeklinde a etiketi v-bind:class içerisinde koşul oluşturduk. Tabiiki böyle kullanmayın :) Sadece örnek olsun diye böyle kodladım sizin daha usta örnekler yapacağınızdan eminim.
Butonu akif et örneği:
Butonu akif et örneği:
Bir sonraki yazımda Koşullardan ve Döngülerden bahsedeceğim. Görüşmek üzere...
2013 yılında geniş hayaller ile önce tasarım sonra da yazılım alanında çalışmalar yapmaya başladım. Sıfırdan başlayarak pek çok MVC tabanlı sistemler ve Web Sayfaları tasarladım.