Özel Yönergeler
DOM değiştirme mantığını bileşenlerin dışında kapsüllemek için mounted ve updated gibi yaşam döngüsü kancalarıyla genel ve yerel yönergeler kaydetmeyi öğrenin.
Özel Yönergeler, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Yönergeler Nedir?
Yönergeler, v- ön ekiyle element'lere eklenen, yeniden kullanılabilir DOM işleme mantığıdır. Yerleşik örnekler: v-if, v-for, v-model, v-show. Özel yönergeler kendi yönergelerinizi oluşturmanıza olanak tanır.
Kullanım Alanı: Otomatik Odaklama
Bir yönerge, sarmalayıcı bir component'i gerektirmeyecek kadar küçük DOM işleme parçalarını kapsülleyebilir.
<template>
<input v-focus>
</template>
<script setup>
const vFocus = {
mounted: (el) => el.focus()
};
</script>Yerel Yönerge Kaydı
<script setup> içinde yönergeleri v ön ekiyle bildirin; Vue bunları otomatik olarak yerel kapsamda kaydeder.
<script setup>
const vColor = {
mounted: (el, binding) => {
el.style.color = binding.value;
}
};
</script>
<template>
<p v-color="'red'">Hello</p>
</template>Genel Yönerge Kaydı
Bir yönergeyi her yerde kullanılabilir hâle getirmek için app.directive(name, definition) kullanın.
// main.ts
const app = createApp(App);
app.directive('focus', {
mounted: (el) => el.focus()
});
app.mount('#app');Yönerge Yaşam Döngüsü Kancaları
Yönergelerde component yaşam döngüsünü yansıtan kancalar bulunur: created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted.
const vColor = {
beforeMount(el, binding) {
el.style.color = binding.value;
},
updated(el, binding) {
el.style.color = binding.value;
}
};binding Nesnesi
Kancalar bir binding nesnesi alır: value, oldValue, arg, modifiers, instance.
<p v-pin:bottom.left="200">Pinned</p>
// binding inside the directive:
// { value: 200, oldValue: ..., arg: 'bottom', modifiers: { left: true } }Gerçek Örnek: v-click-outside
Yaygın bir yönerge: kullanıcı element'in dışına tıkladığında bir işleyici çağırır.
const vClickOutside = {
mounted(el, binding) {
el._handler = (e) => {
if (!el.contains(e.target)) binding.value(e);
};
document.addEventListener('click', el._handler);
},
unmounted(el) {
document.removeEventListener('click', el._handler);
}
};
// Usage:
<div v-click-outside="closeMenu">...</div>Gerçek Örnek: v-tooltip
Bir yönerge aracılığıyla Tippy/Popper araç ipucunu ekleyin; böylece şablonlarınız temiz kalır.
import tippy from 'tippy.js';
const vTooltip = {
mounted(el, binding) {
el._tippy = tippy(el, { content: binding.value });
},
updated(el, binding) {
el._tippy?.setContent(binding.value);
},
unmounted(el) {
el._tippy?.destroy();
}
};v-debounce: Girdi Olaylarını Geciktirme
Özel bir yönergeyle bir girdi öğesinin @input işleyicisinin etrafına debounce işlemi ekleyin.
const vDebounce = {
mounted(el, binding) {
let timer;
el.addEventListener('input', () => {
clearTimeout(timer);
timer = setTimeout(() => binding.value(el.value), 300);
});
}
};
<input v-debounce="search">Yönerge ve Component ve Birleştirilebilir Karşılaştırması
Birleştirilebilirler: durum içeren mantık (veriler, ref'ler). Component'ler: kendi şablonlarına sahip, yeniden kullanılabilir arayüz yapıları. Yönergeler: mevcut bir element üzerindeki saf DOM davranışı. Şablon veya işaretleme gerekmiyorsa yönergeyi seçin.
Performansla İlgili Noktalar
Yönergeler her güncellemede çalışır. Onları düşük maliyetli tutun. Pahalı işlemler için gereksiz çalışmayı atlamak amacıyla binding.value !== binding.oldValue koşulunu kullanın.
Hızlı Kontrol
Davranış eklerken Vue yönergesi kullanmakla Vue component'i kullanmak arasındaki fark nedir?
Özet: Özel Yönergeler
v ön ekli, yeniden kullanılabilir DOM mantığıdır. Yerel olarak (script setup içindeki vName const ile) veya genel olarak (app.directive ile) kaydedilir. Yaşam döngüsü kancaları: mounted, updated, unmounted. binding; value, oldValue, arg ve modifiers değerlerini sağlar. Saf DOM davranışı (odaklama, dış tıklama, araç ipucu, debounce) için kullanın. İşaretleme için component'leri; durum içeren mantık için birleştirilebilirleri; DOM'u zenginleştirmek için yönergeleri kullanın.
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 41
- Dersler
- 163
Sıkça Sorulan Sorular
“Özel Yönergeler” dersi ücretsiz mi?
Evet — “Özel Yönergeler” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.
“Özel Yönergeler” dersinde ne öğreneceğim?
DOM değiştirme mantığını bileşenlerin dışında kapsüllemek için mounted ve updated gibi yaşam döngüsü kancalarıyla genel ve yerel yönergeler kaydetmeyi öğrenin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“Özel Yönergeler” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Bağımlılık Ekleme için provide() ve inject()
- Eşzamansız Bileşenler ve Suspense
- Özel Yönergeler
- Eklenti Sistemi: app.use()