Directives în Vue.js vă permit să aplicați comportamente speciale elementelor din DOM. Acestea sunt prefixate cu v- sintaxa și sunt folosite pentru a manipula DOM, a gestiona evenimente, a reda elementele condiționat și multe altele. Vue.js oferă mai multe încorporate, directives cum ar fi, , și, care acoperă o gamă largă de cazuri de utilizare obișnuite. v-if v-for v-bind v-on
Iată câteva comune directives în Vue.js:
1. Directiva: Această directivă este utilizată pentru a reda condiționat un element bazat pe o condiție. v-if
Exemplu:
<div v-if="isShow">This element is only displayed if isShow is true.</div>
2. Directiva: Această directivă este folosită pentru a itera peste o matrice sau un obiect și pentru a crea elemente corespunzătoare. v-for
Exemplu:
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
3. Directiva: Această directivă este folosită pentru a lega valoarea unei expresii la un atribut sau o proprietate a unui element. v-bind
Exemplu:
<img v-bind:src="imageUrl">
4. Directiva: Această directivă este folosită pentru a asculta și gestiona evenimentele de pe un element. v-on
Exemplu:
<button v-on:click="handleClick">Click me!</button>
5. Directiva: Această directivă creează o legătură bidirecțională între un element de intrare și o proprietate de date. v-model
Exemplu:
<input v-model="message">
Acestea sunt doar câteva de bază directives în Vue.js. De asemenea, vă puteți crea propria personalizare directives pentru a efectua anumite comportamente în aplicația Vue.js.