Directives w Vue.js pozwalają zastosować specjalne zachowania do elementów w DOM. Są poprzedzone składnią v- i służą do manipulowania DOM, obsługi zdarzeń, warunkowego renderowania elementów i nie tylko. Vue.js udostępnia kilka wbudowanych elementów, directives takich jak, , i, które obejmują szeroki zakres typowych przypadków użycia. v-if v-for v-bind v-on
Oto kilka typowych directives w Vue.js:
1. Dyrektywa: Ta dyrektywa służy do warunkowego renderowania elementu w oparciu o warunek. v-if
Przykład:
<div v-if="isShow">This element is only displayed if isShow is true.</div>
2. Dyrektywa: ta dyrektywa służy do iteracji po tablicy lub obiekcie i tworzenia odpowiednich elementów. v-for
Przykład:
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
3. Dyrektywa: Ta dyrektywa służy do powiązania wartości wyrażenia z atrybutem lub właściwością elementu. v-bind
Przykład:
<img v-bind:src="imageUrl">
4. Dyrektywa: Ta dyrektywa służy do nasłuchiwania i obsługi zdarzeń w elemencie. v-on
Przykład:
<button v-on:click="handleClick">Click me!</button>
5. Dyrektywa: Ta dyrektywa tworzy dwukierunkowe powiązanie między elementem wejściowym a właściwością danych. v-model
Przykład:
<input v-model="message">
To tylko niektóre podstawowe directives elementy Vue.js. Możesz także utworzyć własny niestandardowy sposób directives wykonywania określonych zachowań w aplikacji Vue.js.