Vue Academy · Ders

Özel Direktifler Yazma

app.directive(), mounted/updated/unmounted kancaları, direktif bağımsız değişkenleri ve değiştiricileri.

4. ders / 413 adım

Özel Direktifler Yazma, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 4. 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, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Bileşenler Yeterli Olmadığında

Vue'da yeniden kullanımın çoğu bileşenler ve birleştirilebilir işlevler aracılığıyla gerçekleşir. Ancak bazı mantıklar ham DOM'u hedefler — bir girdiye otomatik odaklanmak, Vue dışı bir kitaplığı entegre etmek veya bir öğeyi ölçmek gibi. Özel yönergeler tam olarak bunun için tasarlanmıştır.

En Basit Yönerge

Bir yönergeyi app.directive ile uygulamaya kaydedin. mounted kancası öğeyi alır; bu nedenle yönerge, göründüğünde bir girdiye odaklanır.

const app = createApp(App)
app.directive('focus', {
  mounted(el) { el.focus() }
})

Yönergeyi Kullanma

Kayıtlı adın önüne v- ön ekini ekleyerek yönergeyi bir şablonda uygulayın.

<template>
  <input v-focus />
</template>

script setup İçinde Yerel Yönergeler

<script setup> içinde, v ile başlayan ve camelCase biçiminde olan tüm üst düzey değişkenler kullanılabilir bir yönergeye dönüşür. Adını vFocus koyun ve v-focus olarak kullanın.

<script setup>
const vFocus = {
  mounted: (el) => el.focus()
}
</script>

<template>
  <input v-focus />
</template>

Bağlama Nesnesi

Her kanca, ikinci bağımsız değişkeni olarak bir binding nesnesi alır. Bu nesne, şablonda iletilen yönerge değerini, argümanı ve değiştiricileri taşır.

app.directive('demo', {
  mounted(el, binding) {
    console.log(binding.value, binding.arg, binding.modifiers)
  }
})

Değer Geçirme

Eşittir işaretinden sonraki ifade binding.value olur. Burada bir renk iletilir ve öğeye uygulanır.

<!-- template -->
<p v-color="'red'">Hello</p>

<!-- directive -->
app.directive('color', {
  mounted(el, binding) { el.style.color = binding.value }
})

Argüman Geçirme

İki noktadan sonraki bölüm binding.arg olur. Bu, tek bir yönergenin etikete göre farklı davranmasını sağlar.

<!-- v-pin:top means binding.arg === 'top' -->
<div v-pin:top="20"></div>

Değiştiricileri Kullanma

Değiştiriciler noktalardan sonra görünür ve binding.modifiers içinde bir doğru/yanlış eşlemesi olarak gelir. Davranışı ince ayarlamak için bunları kullanın.

<!-- v-pin.fixed -> binding.modifiers.fixed === true -->
<div v-pin.fixed="10"></div>

Yönerge Yaşam Döngüsü Kancaları

Yönergelerde bileşen yaşam döngüsünü yansıtan kancalar bulunur: created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount ve unmounted.

Güncellemelere Tepki Verme

updated kancası, öğe yeniden oluşturulduktan sonra çalışır. Yalnızca gerçek değişikliklerde işlem yapmak için binding.value ile binding.oldValue değerlerini karşılaştırın ve temizleme işlemini unmounted içinde yapın.

app.directive('color', {
  mounted(el, binding) { el.style.color = binding.value },
  updated(el, binding) {
    if (binding.value !== binding.oldValue) el.style.color = binding.value
  }
})

Yönergeler ve Bileşenler

Yapı veya durum içeren her şey için bileşenleri tercih edin. Yönergeleri yalnızca bileşene uymayan düşük düzeyli, doğrudan DOM erişimine ihtiyaç duyduğunuzda kullanın; odak yönetimi veya üçüncü taraf DOM araçları gibi.

Hızlı Kontrol

Özel yönergeler hakkındaki bilginizi sınayın.

İnteraktif derste cevapla

Özet

Özel yönergeler oluşturmayı öğrendiniz:

app.directive ile genel olarak veya script setup içinde vName olarak yerel biçimde kaydedin.
binding.value, binding.arg ve binding.modifiers veri iletir.
Yaşam döngüsü kancaları: oluşturma, beforeMount, bağlama, beforeUpdate, güncelleme, beforeUnmount ve kaldırma.
Yönergeleri düşük düzeyli DOM işlemleri için kullanın; diğer durumlarda bileşenleri tercih edin.

Başlamak ücretsiz

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: 42
Dersler: 156

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Özel Direktifler Yazma” dersi ücretsiz mi?

Evet — “Özel Direktifler Yazma” 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 Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Özel Direktifler Yazma” dersinde ne öğreneceğim?

app.directive(), mounted/updated/unmounted kancaları, direktif bağımsız değişkenleri ve değiştiricileri. Vue 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.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue 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 4. dersidir.

“Özel Direktifler Yazma” 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 Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue 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

← Vue Academy Sayfasına Dön