Vue.js è un framework micro JavaScript per la creazione di componenti riutilizzabili e reattivi sul tuo sito.
I framework front-end variano molto sia per dimensioni che per ambito, dove Vue.js si distingue per il design minimale e l'attenzione all'adattabilità. Hai la possibilità di costruire il tuo intero sito usando Vue.js, solo rendendo un singolo elemento del tuo sito reattivo, o qualcosa di intermedio. Per questo motivo è molto accessibile con una curva di apprendimento poco profonda.
In questo articolo daremo un'occhiata ai componenti principali di Vue.js e come ottenere l'installazione e l'avvio, ma prima diamo un'occhiata a quando vorresti usare un framework front-end come Vue.js e perché .
I framework front-end, come la maggior parte dei framework, arrivano a compiti comuni astratti, il comune denominatore che si trova tra i progetti. Vue.js viene appositamente per astrarre il processo di creazione di componenti HTML che vengono aggiornati dinamicamente tramite JavaScript.
Alcuni dei punti dolenti che Vue.js risolve per te, stanno generando il codice HTML dinamico, legando le azioni degli elementi HTML ai tuoi dati mantenendo l'ambito e il contesto, e tenendo traccia di quando l'HTML ha bisogno di essere ridisegnato automaticamente.
Ad esempio, supponiamo di avere una pagina in cui hai un elenco dinamico di nomi. Potresti aver scritto del codice simile a questo:
Quando si crea manualmente l'HTML, oltre al fatto che il codice diventa rapidamente difficile da gestire in esempi più grandi, non esiste una vera connessione tra i dati e l'HTML generato. Se la matrice di nomi cambia devi essere consapevole di ciò e rieseguire il rendering della lista. Tutto questo serve anche solo a visualizzare i dati dinamici, se vuoi aggiungere gestori di eventi come un gestore di clic on-line, per salvare l'ambito continuerai a nidificare ulteriormente il tuo codice:
Con Vue.js puoi separare l'HTML come un modello che descrive cosa generare in base ai dati forniti e Vue.js lo renderà automaticamente.
Questo stesso esempio in Vue.js sarebbe simile al seguente:
Abbiamo una completa separazione tra gli aspetti HTML del codice JavaScript e la logica del codice JavaScript, rendendo tutto autonomo e molto più gestibile. Stiamo però andando un po 'più avanti, facciamo un passo indietro e vediamo come il nucleo di Vue.js raggiunge questo ...
Al centro di Vue.js si definisce una correlazione tra il proprio codice HTML e alcuni dati, e ogni volta che i dati cambiano, l'HTML verrà aggiornato. Il modo in cui funziona è quando istanziando un componente Vue.js gli passi dei dati sotto forma di un oggetto JavaScript, questo oggetto viene poi modificato sostituendo le sue proprietà con metodi getter e setter tracciabili.
Vue.js analizza l'oggetto dati durante la costruzione dell'HTML e vede quali dati sono stati utilizzati per rendere all'interno i diversi elementi HTML. Usando questo monitora le modifiche apportate all'oggetto dati e sa esattamente cosa aggiornare e quando.
Avere un legame così stretto tra i dati e la vista semplifica drasticamente lo sviluppo delle applicazioni front-end e riduce al minimo gli errori dovuti a false dichiarazioni. Questa separazione delle preoccupazioni ti consente di concentrarti sulla logica della tua applicazione senza dover gestire l'aggiornamento della visualizzazione.
L'installazione per Vue.js è semplice come includere la libreria:
Ora, come ho detto, un'app Vue.js è composta da un oggetto dati e un modello HTML in cui incorporare i dati. Quindi, per la nostra prima app, vedere Vue.js in azione consente di aggiungere al body :
Per prima cosa definiamo a div quale sarà il nostro modello HTML per la nostra app Vue.js. All'interno utilizziamo le doppie parentesi per l'interpolazione dei dati nell'HTML.
All'interno della vera app Vue.js definiamo semplicemente i dati e colleghiamo il div come elemento per l'app sia per il rendering che per l'utilizzo come modello. Successivamente, per il chiarore aggiunto, incrementiamo la variabile count sulla nostra app una volta al secondo.
Questo è tutto ciò che c'è da fare per creare un'applicazione Vue.js, aprendola nel tuo browser, vedrai che la pagina si aggiorna automaticamente ogni volta che aggiorniamo la proprietà dei dati.
Ora nella maggior parte delle applicazioni in cui il DOM reagisce ai dati modificati è solo metà della storia, è necessario anche un modo per aggiornare i dati, Vue.js si occupa di questo con eventi e metodi. I metodi sono funzioni memorizzate eseguite nel contesto dell'app Vue.js.
Aggiorniamo il nostro esempio di contatore per aggiungere la possibilità di avviare e arrestare il timer invece di eseguirlo semplicemente:
Nel modello HTML, abbiamo aggiunto un pulsante per avviare e arrestare il contatore, per fare ciò abbiamo bisogno che il testo sul pulsante sia dinamico e abbiamo bisogno di un gestore di eventi per quando viene cliccato il pulsante.
Per dichiarare un evento in Vue.js su un elemento, si preclama il nome di qualsiasi evento HTML DOM standard con v-on: , così il mouseover l'evento diventa v-on:mouseover o il keyup l'evento diventa v-on:keyup . Nel nostro esempio stiamo usando il v-on:click attributo per gestire il click evento.
Qualcosa che potresti aver notato è che per il testo del pulsante stiamo chiamando un metodo invece di fare semplicemente riferimento a una proprietà memorizzata. In molte situazioni, i dati memorizzati non sono necessariamente nel formato che si desidera visualizzare sulla pagina. I metodi possono essere utilizzati qui per elaborare i dati e tutta la reattività ottenuta dalle proprietà si applica quando si utilizzano i metodi, se i dati sottostanti cambiano il modello si aggiornerà di conseguenza.
Nell'app Vue.js, ora abbiamo una nuova proprietà con la variabile del timer e alcuni metodi. Il toggle il metodo che è associato all'evento click del pulsante verifica se timer la proprietà è impostata, iniziando o interrompendo il timer rispettivamente e counterAction il metodo viene utilizzato per visualizzare l'azione corretta nel pulsante, sempre in base alla variabile del timer.
Poiché il metodo di commutazione modifica la proprietà del timer e il metodo counterAction , che si trova nel modello Vue.js, utilizza la proprietà timer, in qualsiasi momento viene chiamato il modello che esegue nuovamente il rendering del testo del pulsante.
Vale la pena notare che anche se non abbiamo un valore iniziale per la proprietà del timer , è ancora necessario dichiararlo durante la creazione dell'app Vue.js. Se non si dichiara la proprietà dall'inizio, la proprietà non sarà reattiva e non causerà il ri-rendering dell'HTML una volta modificata.
Nel nostro esempio, la vista viene aggiornata una volta al secondo mentre il timer è in esecuzione, quindi una volta al secondo verrà chiamato anche il nostro metodo counterAction quando il pulsante viene ridisegnato. Vue.js ci consente di ottimizzarlo memorizzando nella cache il risultato di un metodo e richiamando il metodo solo se i dati sottostanti utilizzati in modo specifico nel metodo vengono modificati. Ciò è utile anche se si utilizza la stessa proprietà calcolata in più punti della pagina, invece di elaborare il valore più volte, memorizzando nella cache il valore, è possibile ridurre un sovraccarico.
Aggiorniamo l'esempio per includere le proprietà memorizzate nella cache:
La differenza principale oltre alla cache, è che i metodi sotto computed sono referenziati come proprietà rispetto ai metodi, quindi nel modello HTML abbiamo dovuto rimuovere le parentesi da counterAction .