Option API
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.
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.
Continua la lettura su: https://www.codingcreativo.it/option-api/ Autore del post: Cristina Parma Fonte:
