Niestandardowe dyrektywy pozwalają rozszerzyć funkcjonalność stron internetowych Vue w skalowalny i modułowy sposób.

Dyrektywy to konstrukcje programistyczne określające, w jaki sposób interpretery i kompilatory powinny przetwarzać dane wejściowe dla operacji. Dyrektywy Vue rozszerzają funkcjonalność elementów HTML w szablonach Vue, umożliwiając bezpośrednią manipulację DOM.

Za pomocą dyrektyw w Vue możesz między innymi dodawać detektory zdarzeń. Będziesz dołączać dodatkowe atrybuty do elementów HTML, aby używać dyrektyw w swojej aplikacji.

Struktura dyrektyw Vue

Dyrektywy w Vue mają v- przedrostek, aby odróżnić je od zwykłych atrybutów HTML. The v- prefix informuje kompilator Vue, że atrybut jest dyrektywą Vue, dzięki czemu może przetwarzać i stosować zachowanie tej dyrektywy do elementu HTML.

Oto przykład demonstrujący użycie metody v-pokaz atrybut, aby wyświetlić zawartość pliku h2 element:

"PRAWDA">Cześć Vue</h2>

Vue.js ma o wiele więcej wbudowanych dyrektyw, takich jak v-bind, v-jeśli, I

instagram viewer
v-on, umożliwiając wykonywanie zadań takich jak wiązanie danych, renderowanie warunkowe, Obsługa zdarzeń, i więcej.

Definiowanie niestandardowych dyrektyw w Vue

Możesz zdefiniować niestandardowe dyrektywy, aby dodać nowe funkcje wielokrotnego użytku do swoich aplikacji Vue.js. Tworzenie dyrektyw niestandardowych wymaga dwóch głównych kroków. Najpierw zarejestrujesz dyrektywę lokalnie lub globalnie. Następnie zdefiniujesz zachowanie dyrektywy za pomocą haków cyklu życia.

Rejestrowanie dyrektyw niestandardowych

Możesz zarejestrować niestandardową dyrektywę w Vue lokalnie lub globalnie, w zależności od zamierzonego zakresu. Bardziej powszechną praktyką jest jednak globalna rejestracja dyrektyw. Dzięki temu dyrektywy są dostępne wszędzie w Twojej aplikacji Vue.

Możesz zarejestrować niestandardowe dyrektywy lokalnie, jeśli zamierzasz użyć niestandardowej dyrektywy w prostym komponencie Vue. Oto jak możesz zarejestrować a v-zmień kolor dyrektywa lokalnie: