Co to jest dyrektywa Vue i jak z niej korzystać?
Ramy ma na celu zapewnienie takich funkcji, które ułatwiają i szybciej proces rozwoju. Vue.JS to taka framework JavaScript, który zapewnia wiele wbudowanych funkcji i dyrektyw, aby szybko tworzyć proces rozwoju. Ale muszą pojawić się scenariusze, gdy potrzebujesz funkcji, która nie jest dostępna w ramach, więc musisz zbudować własne.
W tym poście nauczymy się i przyjrzymy się wbudowanym dyrektywom dostarczonym przez Vue.JS Framework, a my również nauczymy się tworzyć i korzystać z naszej własnej dyrektywy Vue.
Dyrektywa
Dyrektywy są atrybutami, które można połączyć z elementami DOM, prefiksem klauzulą „V-”, która pomaga poznać bibliotekę, że jest to specjalny rodzaj składni używanej do wykonywania niektórych zadań. Dyrektywy są zwykle używane do bezpośredniej manipulacji DOM. Niektóre z najbardziej używanych i znanych dyrektyw to „V-IF”, „V-for” i „V-Show”.
Dyrektywy są wykorzystywane do stosowania efektów na elementy DOM, ale reaktywnie. Zrozummy to przykładem:
Dyrektywa „V-IF”
Możesz wyświetlić tekst.
W powyższym znaczniku „V-IF” to dyrektywa, która usunie lub doda znacznik akapitu „
”, Zależy od prawdy zmiennej„ showText ”.
Dyrektywa „V-show”
Podobnie mamy dyrektywę „V-Show”, która może wykonywać tę samą funkcjonalność opisaną powyżej:
Możesz wyświetlić tekst.
Subtelna różnica między „V-IF” i „V-show” polega na tym, że „V-IF” nie renderuje elementu podczas ładowania strony, jeśli zmienna związana nie jest prawdziwa i ładuje się, gdy zmienna staje się prawdziwa. Natomiast „V-show” renderuje element w czasie ładowania strony, ale ukryje go. Tak więc „V-IF” jest skuteczne czasowo w czasie ładowania strony i czasochłonne, gdy zmienna staje się prawdziwa. Musi uczynić cały element, podczas gdy „V-show” jest skuteczne dla prawdy zmiennej czasochłonnej w czasie ładowania strony internetowej.
W porządku! Rzućmy okiem na dyrektywę, która przyjmuje argument.
Dyrektywa „V-Bind”
Kolejną najczęściej używaną dyrektywą jest „V-bind”, która jest używana do interakcji i aktualizacji atrybutów HTML. Na przykład, jeśli chcemy powiązać pewną zmienną z atrybutem „href” znacznika, możemy powiązać atrybut „href” taki jak ten:
Dyrektywa „V-ON”
Podobnie jak dyrektywa „V-Bind”, Vue zapewnia dyrektywę „V-ON” do powiązania zmiennej do słuchania zdarzeń wystrzelonych w DOM. Na przykład, aby wysłuchać zdarzenia kliknięcia i powiązanie z nim zmiennej, składnia byłaby tak:
W odwróconych przecinkach możemy zapewnić wyrażenie, a także funkcje.
Wniosek
Dowiedzieliśmy się o dyrektywach w Vue i widziliśmy, jak korzystać z dyrektyw w Vue.JS. Omówiliśmy niektóre z najbardziej używanych i podstawowych wbudowanych dyrektyw Vue.JS, który bardzo pomaga i oszczędza ogromną ilość czasu w rozwoju.