Vue.js si è guadagnato la reputazione di framework JavaScript progressivo. Puoi utilizzare Vue.js per creare applicazioni a pagina singola (SPA) o sviluppare interfacce utente specifiche.

Qui imparerai le basi di Vue.js, incluso come creare un componente Vue e lavorare con l'oggetto options per il rendering di dati dinamici.

Vue.js è uno dei framework JavaScript più popolari. Per iniziare con Vuee per aggiungerlo alla tua pagina HTML, copia il seguente tag script e incollalo nella sezione head:

<copionesrc="">copione>

L'utilizzo del collegamento CDN è un'opzione eccellente per migliorare l'HTML statico o aggiungere funzionalità alla tua applicazione.

Tuttavia, è necessario installare Vue.js tramite npm per utilizzare più delle sue funzionalità avanzate, come la sintassi SFC (Single-File Component), utile durante la creazione di app Vue complete.

Creazione di un'applicazione Vue

L'accesso alla libreria Vue tramite il collegamento CDN fornisce un oggetto Vue, incluso il file .createApp() metodo.

Come suggerisce il nome, puoi creare un'app Vue usando questo metodo.

Per esempio:

html>
<htmllang="it">
<Testa>
<titolo>App Vuetitolo>
<copionesrc=" https://unpkg.com/vue@3/dist/vue.global.js">copione>
Testa>
<corpo>
<copione>
 const app = Vue.createApp();
copione>
corpo>
html>

Qui l'app creata viene archiviata nel file app variabile. Dopo aver creato l'istanza dell'app, devi eseguirne il rendering utilizzando il file .montare() metodo. Questo metodo indica dove montare l'app nel file Document Object Model (DOM).

Così:

html>
<htmllang="it">
<Testa>
<titolo>App Vuetitolo>
<copionesrc=" https://unpkg.com/vue@3/dist/vue.global.js">copione>
Testa>
<corpo>
<divid="app">div>
<copione>
 const app = Vue.createApp();
 app.mount("#app");
copione>
corpo>
html>

Per usare Vue's .montare() metodo, devi fornire un elemento DOM o un selettore come argomento. In questo esempio, abbiamo montato l'app Vue utilizzando l'elemento DOM con il file #app ID.

È importante notare che l'app Vue controlla solo gli elementi che sono stati specificati utilizzando un file id. Inoltre, l'app non ha il controllo su nulla al di fuori di questi elementi, inclusi gli eventi di clic o qualsiasi altra interattività.

Il passaggio finale della creazione di un'applicazione Vue consiste nel chiamare il file .montare() metodo dopo aver completato tutte le configurazioni dell'app.

L'oggetto Opzioni in Vue

In Vue.js, usi il Opzioni object come oggetto di configurazione per creare un'istanza o un componente Vue.

È una parte essenziale di un'applicazione Vue in quanto definisce il comportamento e i dati per ogni istanza o componente. IL Opzioni oggetto è costituito da diverse proprietà che rappresentano vari aspetti dell'istanza o del componente.

Alcune delle proprietà comunemente utilizzate in Opzioni oggetto sono:

• dati: Questa proprietà definisce l'oggetto dati per le applicazioni Vue. È una funzione che restituisce un oggetto che contiene le proprietà dei dati e i loro valori iniziali.
• metodi: IL metodi La proprietà dell'oggetto Options detiene funzioni vitali nell'abilitare il rendering dinamico.
• modello: questa proprietà definisce il modello HTML per l'istanza o il componente Vue. È una stringa contenente il markup HTML, che il compilatore di modelli di Vue può analizzare.

Si noti che quando si utilizza una proprietà del modello, il compilatore Vue eseguirà il rendering solo del contenuto definito nel modello.

Ecco un esempio di un'app Vue con il dati, metodi, E modello proprietà:

html>
<htmllang="it">
<Testa>
<titolo>App Vuetitolo>
<copionesrc=" https://unpkg.com/vue@3/dist/vue.global.js">copione>
Testa>
<corpo>
<divid="app">
<h1 @clic="messaggio inverso" >{{ testo }}h1>
div>
<copione>
cost app = Vue.createApp({
// modello: '
Benvenuto nella tua app Vue
',
 dati() {
ritorno {
 testo: "Questa è la tua app Vue"
 };
 },
 metodi: {
 reverseMessage () {
Questo.testo = Questo.text.split('').reverse().join('')
 }
 }
 });
app.montare("#app");
copione>
corpo>
html>

Questo programma raffigura un'app Vue di base che visualizza il testo "Questa è la tua app Vue" utilizzando l'interpolazione del testo e consente agli utenti di fare clic su di essa per invertire il messaggio.

IL dati() La funzione restituisce un oggetto con una singola proprietà chiamata testo. IL @clic La direttiva viene utilizzata per allegare a reverseMessage() metodo al elemento, che inverte il testo proprietà.

Durante l'esecuzione di questo programma, l'app Vue creata sarà simile a questa:

Cliccando sul testo lo invertirà.

Si noti che il programma ha commentato la proprietà del modello per consentire il rendering dei contenuti nell'app Vue. Se lasciata senza commenti, questa app Vue mostrerà solo una proprietà del modello:

Ci sono altre proprietà come oggetti di scena E calcolato, che puoi anche utilizzare per creare applicazioni Vue potenti e flessibili durante la configurazione dell'oggetto Opzioni.

Interpolazione del testo in Vue

L'interpolazione del testo in Vue è una funzionalità che consente di associare dinamicamente i dati agli elementi HTML. In altre parole, ti consentirà di generare direttamente il valore delle proprietà dei dati di un'istanza Vue nell'HTML.

Per ottenere l'interpolazione del testo in Vue, è necessario racchiudere il nome della proprietà dei dati tra doppie parentesi graffe. Vue interpreta i contenuti all'interno delle doppie parentesi graffe come espressioni JavaScript e li sostituisce ulteriormente con il valore risultante.

Per esempio:

html>
<htmllang="it">
<Testa>
<titolo>App Vuetitolo>
<copionesrc=" https://unpkg.com/vue@3/dist/vue.global.js">copione>
Testa>
<corpo>
<divid="app">
<h1>{{ Messaggio }}h1>
<P>Benvenuto {{ nome }}P>
div>
<copione>
 const app = Vue.createApp({
 dati() {
 ritorno {
 messaggio: "Questa è la tua app Vue.",
 nome: "Nobile",
 };
 },
 });
 app.mount("#app");
copione>
corpo>
html>

In questo esempio, l'interpolazione del testo lega il file Messaggio E nome proprietà dell'oggetto dati restituito nell'istanza Vue al E elementi. Una volta montata l'applicazione Vue, vengono visualizzati i valori di Messaggio E nome proprietà nell'HTML nelle rispettive posizioni.

Puoi anche visualizzare il risultato di una chiamata di metodo o eseguire operazioni JavaScript di base all'interno delle doppie parentesi graffe:

html>
<htmllang="it">
<Testa>
<titolo>App Vuetitolo>
<copionesrc=" https://unpkg.com/vue@3/dist/vue.global.js">copione>
Testa>
<corpo>
<divid="app">
<h1>{{ Messaggio }}h1>
<h3>Benvenuto {{ name.toUpperCase() }}h3>
<P>Ci sono {{ nameLength() }} lettere nel tuo nome.P>
div>
<P>non quiP>
<copione>
 const app = Vue.createApp({
 dati() {
 ritorno {
 messaggio: "Questa è la tua app Vue",
 nome: "Noble Okafor",
 };
 },
 metodi: {
 nomeLunghezza() {
 return this.name.length - 1;
 },
 },
 });
 app.mount("#app");
copione>
corpo>
html>

In questo esempio, l'app Vue ha un'estensione dati oggetto che contiene due proprietà: Messaggio E nome.

All'interno dell'app Vue, i tre elementi HTML visualizzano i dati utilizzando l'istanza Vue. IL h1 L'elemento visualizza il valore di Messaggio proprietà, mentre il h3 L'elemento visualizza il valore di nome proprietà con a toUpperCase() metodo ad esso applicato.

IL P L'elemento visualizza il risultato restituito dall'elemento nomeLunghezza() metodo definito nel metodi oggetto dell'app Vue. IL nomeLunghezza() Il metodo restituisce la lunghezza del nome proprietà sottratta per uno.

Per accedere a un valore dall'oggetto dati nell'oggetto metodi, è necessario utilizzare Questo parola chiave. Questo La parola chiave fa riferimento all'istanza Vue corrente e consente di accedere alle sue proprietà e ai suoi metodi dall'interno dell'istanza Vue. Usando Questo, puoi recuperare il valore di nome proprietà ed eseguire tutte le manipolazioni necessarie su di esso utilizzando il metodi.

Questa app Vue dimostra come associare dati a elementi HTML utilizzando l'interpolazione del testo e come definire e chiamare metodi in un'istanza Vue.

Costruisci il tuo front-end utilizzando Vue

In questo articolo, hai imparato come iniziare a lavorare con Vue e interpolare il testo con la sintassi dei modelli di Vue. Puoi accedere a molte altre funzionalità in Vue, come direttive e hook del ciclo di vita, rendendolo una scelta eccellente per la creazione di applicazioni front-end dinamiche.