Ana içeriğe geç
Destek Çevrimiçi
MirrorLooking Glass
RabisuRabisu
Müşteri Paneli
RehberlerBilgi BankasıBayi APIBayi Modülü

Vue.js Direktifleri Kullanımı: Yerleşik ve Özel Directive Rehberi

Bu Rehberde Ne Öğreneceksiniz?​

Vue.js, HTML şablonlarını direktifler ile dinamik hale getirir.
Bu rehberde yerleşik ve özel Vue.js direktiflerini öğreneceksiniz.
Gerçek örneklerle temiz, okunabilir ve ölçeklenebilir arayüzler oluşturacaksınız.

Vue.js Direktifleri Nedir?​

Direktifler, HTML üzerinde çalışan Vue’ya özel niteliklerdir.
Tümü v- ön eki ile başlar.
Şablonlara koşul, etkileşim ve veri bağlama yeteneği kazandırır.

Ön Gereksinimler​

  • HTML, CSS ve JavaScript bilgisi
  • Vue.js temel kavramlarına aşinalık
  • Custom directive için Node.js ve Vue CLI

1. Koşullu Render (v-if, v-else-if, v-else)​

Bu direktifler, JavaScript if / else mantığını HTML’e taşır.
Koşul false ise element DOM’a hiç eklenmez.

<p v-if="kullanici.ad && kullanici.soyad">
  Hoş geldin, {{ kullanici.ad }} {{ kullanici.soyad }}
</p>
<p v-else-if="kullanici.kullaniciAdi">
  Hoş geldin, {{ kullanici.kullaniciAdi }}
</p>
<div v-else>
  <button>Giriş Yap</button>
  <button>Hesap Oluştur</button>
</div>
  • v-else ve v-else-if, doğrudan v-if sonrası kullanılmalıdır.

2. Görünürlük Kontrolü (v-show)​

  1. v-show, elementi DOM’da tutar ama gizler.
  2. CSS tarafında display: none uygular.
  3. Sık açılıp kapanan alanlar için daha performanslıdır.

<div v-show="girisYapildiMi">
  <p>Panele hoş geldiniz</p>
</div>
<div v-show="!girisYapildiMi">
  <button>Giriş Yap</button>
</div>

  • v-if ve v-show Farkı

  • v-if: DOM’dan tamamen kaldırır

  • v-show: DOM’da tutar, sadece gizler

3. Olay Yönetimi (v-on)​

  1. v-on, kullanıcı etkileşimlerini yakalar.
  2. Kısayol olarak @ kullanılır.

<button @click.once="tikla">Bana Tıkla</button>

function tikla() {
  alert('Butona tıklandı')
}

Sık Kullanılan Modifier’lar​

  1. .once → Sadece bir kez çalışır

  2. .prevent → Varsayılan davranışı engeller

  3. .stop → Event yayılımını durdurur

4. Veri Bağlama (v-bind ve v-model)​

v-bind (Tek Yönlü Bağlama)​

  1. HTML özelliklerini dinamik hale getirir.
  2. Kısayolu : karakteridir.

<a :href="wikiLink">{&#123; sehir &#125;}</a>

import &#123; computed &#125; from 'vue'

const sehir = 'İstanbul'
const wikiLink = computed(() => `https://tr.wikipedia.org/wiki/$&#123;sehir&#125;`)
v-model (Çift Yönlü Bağlama)
  • Form elemanları için kullanılır.
  • Veri ve arayüz senkron çalışır.

<input v-model="sehir" placeholder="Şehir giriniz" />
<p>Seçilen şehir: {&#123; sehir &#125;}</p>

5. Ham HTML Render (v-html)​

  1. String içindeki HTML’i doğrudan render eder.

<div v-html="htmlIcerik"></div>

const htmlIcerik = '<p>Bu <strong>HTML</strong> içeriktir</p>'

⚠️ Güvenlik Uyarısı:

  1. v-html, güvenilmeyen verilerde XSS riski oluşturur.
  2. Sadece güvenli kaynaklarda kullanın.

6. Custom Directive Oluşturma​

  1. Vue’nun sundukları yetmezse özel direktif yazabilirsiniz.
  2. Aşağıda v-tema isimli örnek bir directive bulunur.

const app = createApp(App)

app.directive('tema', {
  mounted(el, binding) {
    if (binding.value === 'birincil') {
      el.style.color = '#ff6b00'
    } else if (binding.value === 'ikincil') {
      el.style.color = '#2c3e50'
    } else {
      el.style.color = 'black'
    }
  }
})

app.mount('#app')
  • Template içinde kullanım:

<p v-tema="'birincil'">Bu yazı turuncudur</p>
<p v-tema="'ikincil'">Bu yazı koyu renklidir</p>

Sıkça Sorulan Sorular (SSS)​

1. v-if mi v-show mu kullanmalıyım? Sık değişiyorsa v-show, nadirse v-if tercih edilir.

2. v-model sadece input için mi? Hayır. Component’lerde de kullanılabilir.

3. Custom directive ne zaman mantıklı? Düşük seviye DOM işlemlerinde.

4. v-bind kısayolu nedir? :href, v-bind:href ile aynıdır.

Sonuç​

Bu rehberle Vue.js direktiflerini uçtan uca öğrendiniz. Arayüzlerinizi daha dinamik, güvenli ve yönetilebilir hale getirdiniz. Vue projelerinizi yüksek performanslı altyapılarda çalıştırmak için Rabisu Bulut çözümlerini hemen inceleyebilirsiniz.