Custom Directives - Podstawy

Witaj w Centrum Dowodzenia NOVA LAB! Rok 2087 — interfejsy stacji kosmicznej wymagają precyzyjnej kontroli nad elementami DOM. Vue udostępnia Custom Directives, które pozwalają bezpośrednio manipulować elementami na poziomie niższym niż szablony.

Czym są Custom Directives?

Vue posiada wbudowane dyrektywy:

v-if

,

v-for

,

v-model

,

v-show

. Ale możesz też tworzyć własne! Custom Directives pozwalają na bezpośredni dostęp do elementu DOM — coś, czego nie możesz osiągnąć samym szablonem.

Dyrektywy to doskonałe narzędzie, gdy potrzebujesz:

• automatycznego focusu na input
• obsługi kliknięcia poza elementem
• lazy-loading obrazów
• niestandardowych tooltipów

Rejestracja globalna: app.directive()

1const app = createApp(App)
2
3app.directive('focus', {
4  mounted(el) {
5    el.focus()
6  }
7})

Teraz możesz użyć

v-focus

w każdym komponencie:

1<template>
2  <input v-focus placeholder="Auto-focus!" />
3</template>

Rejestracja lokalna

W komponencie możesz zarejestrować dyrektywę lokalnie:

1<script setup>
2const vHighlight = {
3  mounted(el) {
4    el.style.backgroundColor = '#00ff88'
5    el.style.padding = '4px 8px'
6    el.style.borderRadius = '4px'
7  }
8}
9</script>
10
11<template>
12  <span v-highlight>Ważny tekst</span>
13</template>

Ważna konwencja: W

<script setup>

dyrektywa lokalna musi mieć nazwę zaczynającą się od

v

(np.

vHighlight

), a w szablonie używamy jej jako

v-highlight

(camelCase zamieniane na kebab-case).

Lifecycle hooks dyrektyw

Dyrektywy mają hooki podobne do cyklu życia komponentu:

• created

  — przed związaniem atrybutów elementu

• beforeMount

  — przed wstawieniem elementu do DOM

• mounted

  — element jest już w DOM (najczęściej używany)

• beforeUpdate

  — przed aktualizacją komponentu rodzica

• updated

  — po aktualizacji komponentu rodzica

• beforeUnmount

  — przed usunięciem z DOM

• unmounted

  — element usuniety z DOM

1app.directive('log', {
2  mounted(el) {
3    console.log('Element dodany do DOM:', el.tagName)
4  },
5  updated(el) {
6    console.log('Element zaktualizowany:', el.tagName)
7  },
8  unmounted(el) {
9    console.log('Element usunięty:', el.tagName)
10  }
11})

Skrócona forma dyrektywy

Jeżeli potrzebujesz tylko

mounted

i

updated

z ta sama logika, możesz użyć skroconej formy — funkcji zamiast obiektu:

1app.directive('color', (el, binding) => {
2  el.style.color = binding.value
3})

To jest równoważne:

1app.directive('color', {
2  mounted(el, binding) {
3    el.style.color = binding.value
4  },
5  updated(el, binding) {
6    el.style.color = binding.value
7  }
8})