Karışımlar ve Özel Yönergeler
Karışımlarla mantığı yeniden kullanın ve özel yönergeler oluşturun.
Karışımlar ve Özel Yönergeler, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 3 dersinin 1. 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 3 dersten oluşur.
Mantığı Yeniden Kullanma
Uygulamalar büyüdükçe aynı mantığı birçok bileşende bulursunuz. Vue, bu mantığı paylaşmak için çeşitli yollar sunar. Bu derste iki yöntemi ele alacağız: daha eski karışımlar yaklaşımını ve güçlü özel directive'leri.
Karışım Nedir?
Bir karışım, onu kullanan herhangi bir bileşene birleştirilen bileşen seçeneklerini (veri, işlevler ve kancalar) içeren bir nesnedir. Vue 2'de mantığı yeniden kullanmanın klasik yolu buydu.
export const loggerMixin = {
created() {
console.log("Component created")
},
methods: {
log(msg) { console.log(msg) }
}
}Karışım Kullanma
mixins dizisi aracılığıyla bir bileşene karışım ekleyin. Seçenekleri, bileşenin kendi seçenekleriyle birleşir.
import { loggerMixin } from "./loggerMixin"
export default {
mixins: [loggerMixin],
created() {
this.log("Ready")
}
}Karışımların Dezavantajları
Karışımların gerçek sorunları vardır: bir özelliğin nereden geldiği belirsizdir (örtük kaynak), karışımlar arasında ad çakışmaları olabilir ve birleştirme kuralları kafa karıştırıcı hâle gelir. Bu sorunlar daha iyi bir yaklaşımın ortaya çıkmasına yol açtı.
Bileştirilebilir İşlevler: Daha İyi Yol
Vue 3'te, Bileşim API'sini kullanan bileştirilebilir işlevler karışımların yerini alır. Kaynakları açık hâle getirir, ad çakışmalarını önler ve temiz biçimde birleştirilirler. Yeni kodlarda bunları tercih edin.
import { ref } from "vue"
export function useCounter() {
const count = ref(0)
function increment() { count.value++ }
return { count, increment }
}Bileştirilebilir İşlev Kullanma
Bileştirilebilir işlevi setup içinde çağırın ve tam olarak ihtiyacınız olanları ayrıştırın; kaynak açık ve belirgindir.
import { useCounter } from "./useCounter"
export default {
setup() {
const { count, increment } = useCounter()
return { count, increment }
}
}Özel Directive Nedir?
Bir özel directive, v-name ile öğelere ekleyebileceğiniz düşük düzeyli DOM davranışını paketler. Odaklama, kaydırma veya araç ipuçları gibi doğrudan DOM işlemleri için idealdir.
Genel Directive Kaydetme
app.directive ile uygulamaya bir directive kaydedin. Ad, şablonlarda v- ön ekiyle kullanılır.
app.directive("focus", {
mounted(el) {
el.focus()
}
})
// usage: <input v-focus />Directive Kancaları
Directive'lerin yaşam döngüsü kancaları vardır: mounted (öğe eklendiğinde), updated (bileşen güncellendiğinde), beforeUnmount (temizleme) ve bileşen yaşam döngüsünü yansıtan diğer kancalar.
app.directive("color", {
mounted(el, binding) {
el.style.color = binding.value
},
updated(el, binding) {
el.style.color = binding.value
}
})Bağlama Nesnesi
İkinci kanca bağımsız değişkeni bağlamadır. value (aktarılan değer), arg (iki nokta üst üste işaretinden sonra) ve modifiers (noktalardan sonra) bilgilerini taşır.
// <p v-color:bg.bold="theme">
// binding.value -> theme
// binding.arg -> "bg"
// binding.modifiers -> { bold: true }Yerel Directive'ler
Yalnızca bir bileşende kullanılan directive'ler için bunları genel olarak kaydetmek yerine directives seçeneğiyle yerel olarak kaydedin.
export default {
directives: {
focus: {
mounted(el) { el.focus() }
}
}
}Hızlı Kontrol
Karışımlar ve directive'ler konusundaki bilginizi sınayın.
Özet
Karışımlar, seçenekleri bileşenlerle birleştirir ancak örtük kaynaklardan ve ad çakışmalarından muzdariptir; Vue 3'te bileştirilebilir işlevleri tercih edin. Özel directive'ler, app.directive ile genel olarak veya yerel olarak kaydedilir ve mounted gibi kancalarla bir bağlama nesnesini kullanarak DOM davranışını paketler. Sırada işlevleri yeniden kullanılabilir bir eklenti olarak paketlemek var.
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
Sıkça Sorulan Sorular
“Karışımlar ve Özel Yönergeler” dersi ücretsiz mi?
Evet — “Karışımlar ve Ö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 Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 3 dersten oluşur.
“Karışımlar ve Özel Yönergeler” dersinde ne öğreneceğim?
Karışımlarla mantığı yeniden kullanın ve özel yönergeler oluşturun. 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, 3 dersinin 1. dersidir.
“Karışımlar ve Ö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 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
- Karışımlar ve Özel Yönergeler
- Eklenti Geliştirme
- Ölçeklenebilir Klasör Yapısı