Le basi delle direttive Vue.js

Le direttive Vue.js sono token speciali nel markup che dicono alla libreria di fare qualcosa a un elemento DOM. Sono precedute da v- per indicare che sono attributi speciali forniti da Vue. Le direttive sono una delle funzionalità principali di Vue.js, che consente agli sviluppatori di manipolare il DOM in modo efficiente.

In questo articolo esploreremo le basi delle direttive Vue.js, esaminando quelle più comunemente utilizzate e come utilizzarle nelle applicazioni Vue.

Direttive comunemente utilizzate in Vue.js

Ecco alcune delle direttive più comunemente utilizzate in Vue.js:

v-bind: Associa dinamicamente uno o più attributi o una proprietà componente a un'espressione.
v-model: Crea un data binding bidirezionale sugli elementi di input del modulo, textarea e select.
v-if: Esegue il rendering condizionale di un elemento o di un componente.
v-else: Fornisce un blocco else per v-if.
v-else-if: Fornisce un blocco else-if per v-if.
v-for: Restituisce un elenco di elementi utilizzando un array o un oggetto.
v-on: Collega gli ascoltatori di eventi agli elementi.
v-show: Attiva/disattiva la visibilità di un elemento in base a un'espressione.
v-html: Aggiorna l'HTML interno di un elemento.

v-bind: associazione dinamica degli attributi

La direttiva v-bind viene utilizzata per associare dinamicamente attributi o proprietà a un'espressione. Ad esempio, puoi associare l'attributo src di un elemento img a una proprietà dati:

<template>
  <img v-bind:src="imageSrc" alt="Dynamic Image" />
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'https://example.com/image.jpg'
    };
  }
};
</script>

La forma abbreviata per v-bind è semplicemente due punti (:), quindi l'esempio precedente può essere riscritto come:

<img :src="imageSrc" alt="Dynamic Image" />

v-model: associazione dati bidirezionale

La direttiva v-model viene utilizzata per creare un data binding bidirezionale sugli elementi di input del form. Mantiene sincronizzati l'elemento di input e la proprietà dei dati:

<template>
  <input v-model="message" placeholder="Type something..." />
  <p>You typed: {{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

v-if, v-else-if e v-else: rendering condizionale

Le direttive v-if, v-else-if e v-else vengono utilizzate per il rendering condizionale degli elementi. Consentono di eseguire il rendering condizionale degli elementi in base alla valutazione di un'espressione:

<template>
  <div v-if="isLoggedIn">Welcome back!</div>
  <div v-else-if="isGuest">Hello, Guest!</div>
  <div v-else>Please log in.</div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false,
      isGuest: true
    };
  }
};
</script>

v-per: rendering dell'elenco

La direttiva v-for viene utilizzata per eseguire il rendering di un elenco di elementi tramite iterazione su un array o un oggetto. Ogni elemento nell'array può essere renderizzato tramite un ciclo:

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3']
    };
  }
};
</script>

v-on: Gestione degli eventi

La direttiva v-on viene utilizzata per collegare gli event listener agli elementi DOM. Puoi gestire le interazioni utente come clic, input e altro:

<template>
  <button v-on:click="showAlert">Click Me</button>
</template>

<script>
export default {
  methods: {
    showAlert() {
      alert('Button clicked!');
    }
  }
};
</script>

La forma abbreviata per v-on è il simbolo at (@), quindi l'esempio precedente può essere riscritto come:

<button @click="showAlert">Click Me</button>

v-show: Attiva/disattiva visibilità

La direttiva v-show è usata per alternare la visibilità di un elemento in base a un'espressione. A differenza di v-if, non rimuove l'elemento dal DOM; alterna solo la proprietà CSS display:

<template>
  <div v-show="isVisible">This is visible!</div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
};
</script>

v-html: rendering HTML

La direttiva v-html è usata per aggiornare l'HTML interno di un elemento. È utile quando devi rendere HTML grezzo nei tuoi componenti Vue:

<template>
  <div v-html="rawHtml"></div>
</template>

<script>
export default {
  data() {
    return {
      rawHtml: '<strong>Bold Text</strong>'
    };
  }
};
</script>

Conclusione

Le direttive Vue.js forniscono potenti modi per manipolare il DOM e creare applicazioni web dinamiche e interattive. Comprendere le basi delle direttive Vue.js come v-bind, v-model, v-if, v-for, v-on, v-show e v-html è essenziale per qualsiasi sviluppatore Vue. Padroneggiando queste direttive, puoi creare applicazioni più robuste e ricche di funzionalità con Vue.js.

vue direttive v-bind v-model v-if v-for v-on v-show v-html reattività dati evento condizionale rendering