Phenquestions
Framework ma na celu dostarczenie takich funkcji, które sprawią, że proces rozwoju będzie łatwiejszy i szybszy dla programistów. Vue.js jest tak wzbogaconym frameworkiem JavaScript, który zapewnia wiele wbudowanych funkcji i dyrektyw, aby szybko przeprowadzić proces rozwoju. Ale muszą pojawić się pewne scenariusze, kiedy potrzebujesz funkcjonalności, która nie jest dostępna we frameworku, więc musisz zbudować własną.
W tym poście nauczymy się i przyjrzymy wbudowanym dyrektywom dostarczanym przez Vue.framework js, a także nauczymy się tworzyć i korzystać z własnej, niestandardowej dyrektywy Vue.
Dyrektywa
Dyrektywy to atrybuty, które można powiązać z elementami DOM, poprzedzone klauzulą „v-”, która pomaga poznać bibliotekę, że jest to specjalny rodzaj składni używany do wykonywania niektórych zadań. Dyrektywy są zwykle używane do bezpośredniej manipulacji DOM. Niektóre z najczęściej używanych i znanych dyrektyw to „v-if”, „v-for” i „v-show”.
Dyrektywy są używane do nakładania efektów na elementy DOM, ale reaktywnie. Zrozummy to na przykładzie:
Dyrektywa „v-jeżeli”
Możesz zobaczyć tekst.
W powyższym tagu „v-if” to dyrektywa, która usunie lub doda tag akapitu „
”, zależy od prawdziwości zmiennej „showText”.
Dyrektywa „v-show”
Podobnie mamy dyrektywę „v-show”, która może wykonać tę samą funkcjonalność opisaną powyżej:
Możesz zobaczyć 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 powiązana zmienna nie jest prawdziwa i ładuje się, gdy zmienna staje się prawdziwa. Natomiast „v-show” wyrenderuje element w czasie ładowania strony internetowej, ale go ukryje. Tak więc „v-if” to czas efektywny przy wczytywaniu strony i czasochłonny, gdy zmienna staje się prawdziwa. Musi renderować cały element, podczas gdy „v-show” jest czasowo efektywny na prawdziwości zmiennej czasochłonnej w czasie ładowania strony internetowej.
W porządku! Przyjrzyjmy się dyrektywie, która przyjmuje argument.
Dyrektywa „v-bind”
Inną najczęściej używaną dyrektywą jest „v-bind”, która służy do interakcji i aktualizacji atrybutów HTML HTML. Na przykład, jeśli chcemy powiązać jakąś zmienną z atrybutem „href” funkcji tag, możemy powiązać atrybut „href” w ten sposób:
Dyrektywa „v-on”
Podobnie jak dyrektywa „v-bind”, Vue dostarcza dyrektywę „v-on” do wiązania zmiennej w celu nasłuchiwania zdarzeń uruchamianych w DOM. Na przykład, aby nasłuchiwać zdarzenia Click i powiązać z nim jakąś zmienną, składnia wyglądałaby tak:
W cudzysłowie możemy podać zarówno wyrażenie, jak i funkcje.
Wniosek
Poznaliśmy dyrektywy w Vue i zobaczyliśmy, jak używać dyrektyw w Vue.js. Omówiliśmy niektóre z najczęściej używanych i podstawowych wbudowanych dyrektyw Vue.js, co bardzo pomaga i oszczędza ogromną ilość czasu w rozwoju.
