Option API — CodingCreativo

Con l'Option API di Vue.js, si possono definire i dati, i metodi e le proprietà calcolate del componente Vue in modo esplicito all'interno dell'opzione data, methods, computed, ecc.

La Option API è uno dei due modi principali per definire un componente Vue, insieme alla Composition API introdotta in Vue 3.

Option API - Esempio

Ecco un esempio per illustrare come utilizzare l'Option API. Creiamo un nuovo componente ad esempio di nome MessaggioBenvenuto.vue e realizziamo un semplice template dove visualizzeremo un messaggio, il classico "Hello World" al click sul button saluta.

Da zero ad eroe

Entra nel mondo della programmazione web: variabili, funzioni, array, DOM, eventi. Con esercizi pratici e progetti coinvolgenti.

8 ore di corso registrato
Più di 50 algoritmi risolti passo passo
Livello base — da zero ad eroe
100% online, fruibile quando vuoi

Dopo aggiungiamo uno script dove inseriamo innanzitutto il nome del componente. Quindi aggiungiamo la funzione data che restituisce un oggetto contenente i dati del componente. In questo caso, c'è una sola variabile di stato chiamata message, inizializzata con il valore 'Hello World!'. Questo message sarà accessibile all'interno del template del componente e può essere modificato durante il ciclo di vita del componente.

Poi aggiungiamo la sezione del componente dove si possono definire i metodi che possono essere chiamati all'interno del componente. Questa sezione è methods. In questa sezione aggiungiamo una funzione saluta(), che serve a visualizzare il saluto, al click sul button Saluta.

Infine aggiungiamo del codice CSS a piacere.

Ecco come potrebbe presentarsi il componente MessaggioBenvenuto.vue:

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="saluta">Saluta</button>
  </div>
</template>

<script>
export default {
  // Definizione dei dati del componente
  name: "MessaggioBenvenuto.vue",
  data() {
    return {
      message: 'Hello World!' // Messaggio di saluto
    };
  },
  // Definizione dei metodi del componente
  methods: {
    saluta() {
      alert('Ciao a tutti'); // Metodo per salutare
    }
  }
}
</script>

<style>
p {
  color: blue;
  font-size: 18px;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}
</style>

Questo componente deve essere poi incluso nel file App.vue:

<template>
  <div id="app">
    <MessaggioBenvenuto />
  </div>
</template>

<script>
import MessaggioBenvenuto from "./components/MessaggioBenvenuto.vue";

export default {
  name: "App",
  components: {
    MessaggioBenvenuto,
  },
};
</script>

<style>
//qui inserisco lo stile generale
</style>

Conclusione

In questa lezione abbiamo visto come creare un nuovo componente utilizzando la sintassi delle Option Api in Vue. Nell'esempio che abbiamo sviluppato il componente Vue è definito utilizzando la sintassi della Option API. Questo significa che abbiamo dichiarato il componente come un oggetto JavaScript con proprietà che rappresentano le diverse opzioni del componente, come data, methods, name, ecc.

In definitiva, il blocco data() viene utilizzato per definire i dati del componente, mentre il blocco methods viene utilizzato per definire i metodi del componente. Questo è un semplice esempio per vedere come la Option API semplifica la struttura e l'organizzazione di un componente Vue, consentendo di definire chiaramente i dati e i metodi del componente all'interno dello stesso oggetto.

>> Componenti Vue.js