Nuxt.js'de Özel Directive Oluşturma

Birçok sayfada veya bileşende DOM'a uygulanan ortak işlevleri

özel bir direktif olarak oluşturmak kolaylık sağlar.

Kaydırma direktifi örneği oluşturmak istiyorum.

- Ana ekran veya ayrıntı sayfalarında kaydırma sırasında veri yükleme, kaydırma sırasında bildirim gösterme gibi durumlarda kullanışlıdır.

1. Öncelikle, dosyayı oluşturun ve nuxt eklentisine kaydedin.

nuxt config plugins, tanımlanan dosyaların Nuxt uygulamasının başlatılması sırasında çalıştırılarak belirli işlemleri etkinleştirir. = Belirli bir işlevi global olarak kullanabilir.

2. Kaydırma direktifini uygulayın.

Bileşenlerde geri çağırma işlevini iletebilmek için uygulanır.

3. Şimdi sayfada v-scroll'u kullanın.

Diğerleri

Özel direktif oluştururken kullanılabilecek birkaç kanca vardır.

1. bind(el, binding, vnode)
Açıklama: Direktif ilk kez bir elemana bağlandığında yalnızca bir kez çağrılır.

Burada bağlanan elemana ilk ayarlar yapılabilir.

Parametreler

el: Direktifi bağlanan DOM öğesi
binding: Direktifin değerini, ifadesini ve bağımsız değişkenlerini içeren nesne
vnode: Vue derleyicisi tarafından oluşturulan sanal düğüm

2. inserted(el, binding, vnode)

Açıklama: Bağlanan öğe DOM'a eklendiğinde çağrılır. Yani, direktif DOM'a gerçekten eklendiğinde kullanılır.

* Kaydırma olayı bağlama kodunda, inserted kancası zaman noktasında DOM ile ilgili işlemler gerçekleştirilir.

3. update(el, binding, vnode, oldVnode)

Açıklama: Bağlanan öğenin öznitelikleri veya değerleri her değiştiğinde çağrılır.

Ancak, alt bileşenler henüz güncellenmemiş durumdadır.

Bağlama değeri değiştiğinde DOM işleminin gerekli olduğu durumlarda kullanılır.

Parametreler

oldVnode: Önceki render edilen sanal düğüm

4. componentUpdated(el, binding, vnode, oldVnode)

Açıklama: Bağlanan öğenin öznitelikleri veya değerleri güncellendikten ve alt bileşenler de güncellendikten sonra çağrılır.

Yani, son DOM durumunda gerçekleştirilir. Alt bileşen değerlerinin değişmesini bekledikten sonra gerçekleştirilir.

5. unbind(el, binding, vnode)

Açıklama: Direktif artık öğeye uygulanmadığında ve öğe yok edildiğinde çağrılır.

Bu noktada olay dinleyicileri kaldırılır veya temizleme işlemleri yapılır.

* Kaydırma özel örneğinde de unbind zaman noktasında olay dinleyicileri temizlenir.