Directives in Vue.js ti consentono di applicare comportamenti speciali agli elementi nel DOM. Hanno il prefisso con la v- sintassi e sono usati per manipolare il DOM, gestire eventi, rendere condizionalmente elementi e altro. Vue.js fornisce diversi built-in directives come, , e, che coprono un'ampia gamma di casi d'uso comuni. v-if v-for v-bind v-on
Ecco alcuni comuni directives in Vue.js:
1. Direttiva: questa direttiva è usata per rendere condizionalmente un elemento basato su una condizione. v-if
Esempio:
<div v-if="isShow">This element is only displayed if isShow is true.</div>
2. Direttiva: questa direttiva viene utilizzata per iterare su un array o un oggetto e creare gli elementi corrispondenti. v-for
Esempio:
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
3. Direttiva: questa direttiva viene utilizzata per associare il valore di un'espressione a un attributo oa una proprietà di un elemento. v-bind
Esempio:
<img v-bind:src="imageUrl">
4. Direttiva: questa direttiva viene utilizzata per ascoltare e gestire gli eventi su un elemento. v-on
Esempio:
<button v-on:click="handleClick">Click me!</button>
5. Direttiva: questa direttiva crea un legame bidirezionale tra un elemento di input e una proprietà dei dati. v-model
Esempio:
<input v-model="message">
Questi sono solo alcuni di base directives in Vue.js. Puoi anche creare la tua abitudine directives per eseguire comportamenti specifici nella tua applicazione Vue.js.