Vue a volo d'uccello: come iniziare con Vue.js

Prendi la tua copia del Dizionario visivo CSS incl. diagrammi di tutte le proprietà CSS.

Foto di Sam Bark su Unsplash

Hai sempre desiderato iniziare a imparare a programmare nel framework Vue, ma in qualche modo non hai il tempo nei tuoi impegni.

Forse ti senti sopraffatto da tutte le biblioteche e quadri? Il tutorial di Vue (per iniziare) di questo uccello potrebbe aiutare.

Proprio come React, Vue suddivide l'applicazione JavaScript in diverse parti:

  • l'oggetto dell'applicazione
  • metodi e proprietà dei membri
  • e la vista reale (è qui che si trovano i tuoi elementi HTML).

Attributi HTML basati su V di Vue

Vue aggiunge molti attributi personalizzati agli elementi che di solito non vedi in HTML standard, aggiungendoli come prefisso v-.

Ad esempio, c'è v-html, v-if, v-else e molti altri. Tutti hanno il loro scopo specifico: rendere gli elementi. Diamo una rapida occhiata.

Interruttori booleani

Un altro attributo v-show è per attivare / disattivare gli elementi in base al loro stato di visibilità.

Questo è specificato nei dati di proprietà di un'applicazione Vue come {boolean: true;}.

Quindi, nel tuo HTML, puoi usarlo per determinare quali elementi mostrare.

Ciao!

Ogni volta che App.data.boolean è true, l'elemento

sarà visibile.

La logica dell'applicazione ora può "attivare" l'elemento

"on" o "off" nel codice. Il cambiamento viene reso automaticamente.

looping

La direttiva v-for è per la creazione di loop per elencare elementi HTML.

Ciò significa che è possibile incorporare gli iteratori direttamente negli elementi HTML per eseguire il rendering di elenchi di dati memorizzati in un array nello stato dell'applicazione Vue. Non è necessario digitare più volte lo stesso elemento HTML.

Ecco un classico esempio di iteratore for-loop.

Innanzitutto, prepara i dati nell'oggetto applicazione:

lascia E = new Vue ({
     el: "#L", // link all'elemento id = "L"
   dati: {
  elementi : [
      {messaggio: "Uno"},
      {messaggio: "Due"},
      {messaggio: "Tre"}]}
});

Ora nel contenitore principale dell'applicazione HTML:

      
  • Ciò significa che crei una nuova variabile chiamata item nel tuo ciclo {{... here ...}}. Gli elementi della proprietà provengono dall'oggetto dati dell'applicazione stesso.

    Questo renderà i tuoi oggetti array di oggetti JSON come elementi HTML!

    Sarebbe lo stesso di scrivere a mano il seguente HTML:

        
    • Un   
    • due   
    • tre

    Non entrerò nei dettagli dietro ogni singolo attributo basato su v e cosa fa in questo tutorial. Ma come puoi vedere possono essere abbastanza utili.

    Quindi, come si creano effettivamente le applicazioni Vue con questo?

    Creazione di applicazioni

    Combinando i dati dello stato della tua applicazione con questi attributi nativi basati su v, crei associazioni tra la logica e il rendering della vista dell'applicazione.

    Questo accorcia la tua applicazione JavaScript, risparmiando larghezza di banda (specialmente su app di grandi dimensioni). Ti aiuta anche a fare le cose molto più velocemente.

    Nella schermata seguente, lo scaffold dell'applicazione è il punto in cui verranno renderizzati tutti i tag e i modelli.

    Funziona in modo molto simile a React. Vue considera l'applicazione principale

    come contenitore per l'intera app. Memorizza proprietà e metodi nell'oggetto applicazione (vedi sotto).

    Nello screenshot, la linea blu indica come i dati della tua applicazione sono legati agli elementi HTML che rendono la vista.

    La linea verde collega i tuoi metodi agli eventi.

    Notare il contorno rosso nell'immagine sopra. In Vue, devi associare URL con l'attributo: href e non l'attributo href. In caso contrario, il collegamento non funzionerà.

    // Corretto (notare l'attributo iniziale: prima di href)
     {{url}} 
    // Errore (URl non si avvia)
     {{url}} 

    Dati dell'applicazione

    Quando crei applicazioni in Vue (o anche in altri framework o librerie simili) di solito pensi a un posto di archiviazione principale per i tuoi dati. In React potrebbe essere la proprietà dello stato. In Vue è semplicemente memorizzato nell'oggetto dati.

    Secondo la stessa documentazione di Vue, l'archiviazione dei dati - spesso indicata come la fonte della verità - è archiviata nella proprietà dei dati grezzi sull'oggetto principale dell'applicazione stessa:

    const sourceOfTruth = {}
    
    const application = new Vue ({data: sourceOfTruth});

    La cosa interessante di questo è che puoi archiviare un valore nella proprietà data: {...} e renderlo automaticamente disponibile nei tuoi elementi HTML tramite v-text, v-pre, v-once (render solo una volta) e v-cloak (attendi che la pagina abbia terminato il rendering e che Vue sia montata) e molti altri attributi.

    In altre parole, le proprietà (valori primitivi, oggetti e metodi) diventano onnipresenti in tutta l'applicazione e possono essere usate in tutte le funzionalità extra che il framework Vue porta in tavola ... da usare insieme agli attributi che iniziano con un prefisso v.

    E solo una nota a margine. Se eviti di usare v-cloak potresti riscontrare alcuni artefatti di rendering. Ad esempio, lo stile CSS salta appena entro il primo secondo del caricamento della tua app.

    Vue Application object

    Qui è dove si inizializzeranno i dati e si scriveranno i metodi dell'applicazione per eseguire le operazioni.

    Come puoi vedere, hai una serie di proprietà e metodi, proprio come faresti in una normale classe JavaScript.

    Di seguito è riportato uno screenshot che mostra l'oggetto principale dell'applicazione Vue. Qui è dove si crea effettivamente la logica dell'applicazione e si memorizzano proprietà, stringhe di URL e metodi personalizzati. È come separare la logica del codice dalla vista.

    Quando hai appena iniziato, è una buona idea avere una visione a volo d'uccello delle cose prima di passare direttamente al codice.

    Dal momento che non scrivi semplicemente il codice nei tag