Share
Nel post introduttivo di questa serie abbiamo parlato un po 'di come i web designer possono trarre vantaggio dall'utilizzo di Vue. In questo tutorial impareremo come ottenere Vue attivo e funzionante, mentre risponderai ad alcune domande iniziali che potresti avere.
Vue è solo JavaScript, il che significa che puoi caricarlo includendo un tag script nel tuo documento HTML. Il sito di Vue consiglia di utilizzare un CDN come https://cdn.jsdelivr.net/npm/vue per essere sicuro di ottenere l'ultima versione. Puoi anche usare altri collegamenti specifici per la versione come https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js.
Nota: Se si sta creando un'app di produzione, si consiglia di utilizzare un controller del pacchetto come filato per gestire tutte le dipendenze e distribuirle in posizioni alimentate da CDN. Questo è particolarmente importante se vuoi creare Vue nel tuo pacchetto JavaScript, ad esempio usando qualcosa come Webpack.
Quando crei una "istanza" Vue, puoi usare il EL opzione nell'oggetto di configurazione per connettere l'istanza al DOM. Il EL l'opzione dovrebbe essere un elemento o una stringa di selettore CSS. Questo elemento può contenere anche il codice del modello. Quindi, nel codice HTML della tua pagina, potresti avere qualcosa di simile a questo:
titolo
soddisfare
E poi nel tuo JavaScript, avresti qualcosa di simile a questo:
var app = new Vue (el: "#app", data: title: "Threat Level Midnight", contenuto: "AGENT MICHAEL SCARN, straordinariamente bello senza neanche provarci, si rilassa alla scrivania, con i piedi sollevati, rivedendo un fascicolo I suoi pistoleri accanto al suo distintivo dell'FBI, che luccicano nella luce fluorescente del suo ufficio. Vestito in un completo, ha allentato la cravatta e ha slacciato alcuni bottoni, rivelando il suo petto villoso. ",)
Di nuovo, nota che il "#App" stringa si riferisce al div nel tuo codice HTML. Vue sostituirà il contenuto interno di quel div con il risultato del passo di rendering di Vue.
Abbiamo stabilito che Vue ci consente di separare la nostra visione dai nostri dati. Alcune logiche possono essere eseguite nella vista stessa, ma siamo in grado di evitare i seguenti schemi che portano a codice scadente oa uno stato errato:
Quindi, come funziona??
Vue ti permette di impostare le informazioni in dati opzione. Qualsiasi coppia chiave-valore passata all'interno di questo oggetto verrà osservata per le modifiche e qualsiasi cosa dipenda da quel dato di dati sarà ri-rendering quando i dati cambiano.
Ciò significa essenzialmente che il dati l'oggetto è reattivo. Se usi i metodi di manipolazione dei dati incorporati di JavaScript, la modifica attiverà il motore di rendering di Vue per fare la sua magia.
Ad esempio, se il tuo oggetto dati è impostato in questo modo:
var vm = new Vue (el: "#app", data: items: []);
Con questo codice modello:
Item.text
E più tardi aggiungi alcuni elementi, come questo:
vm.items = [text: "Diversity Day", text: "Beach Trip"]
Il modello sarebbe automaticamente ri-render, iterando (looping) gli elementi impostati.
Come la funzione JavaScript che consente a Vue di guardare il dati oggetto (getter e setter di oggetti) non fornisce informazioni quando si aggiungono nuove chiavi o si rimuovono le chiavi esistenti, aggiungendo e rimuovendo le chiavi non si attiva alcun re-rendering. Quindi, nello stesso esempio sopra, se l'oggetto dati iniziale è vuoto (elementi: [] non è presente):
var vm = new Vue (el: "#app", data: )
Qualsiasi modifica a vm.items non innescherà un rerendering. Dalla documentazione di Vue:
"Vue non consente di aggiungere in modo dinamico nuove proprietà reattive a livello di radice a un'istanza già creata."
Inoltre, è importante notare che quando si aggiungono elementi a un array usando la sintassi array [indice] = 'nuovo valore', il re-rendering non verrà attivato. Invece, dovresti usare splice o Vue Vue.set metodo, che va oltre lo scopo di questo articolo. Visualizza l'elenco di avvertimenti nella documentazione di Vue.
Vue non è in conflitto con jQuery, Underscore o qualsiasi altra libreria di utilità JavaScript popolare. Tuttavia, dovresti pensare due volte a provare a usare Vue insieme a un altro JavaScript struttura come React.
È probabile che tu non lo faccia necessariamente bisogno jQuery oltre a Vue, ma è possibile che tu voglia utilizzarlo in altre aree della tua applicazione che non vengono renderizzate da Vue.
Vue fornisce anche "hook" da integrare con altre librerie, ad esempio per eseguire animazioni.
Vue non richiede Babel perché tu sia produttivo con esso. Tuttavia, Babel ti consentirà di utilizzare alcune delle caratteristiche delle avanguardie di JavaScript, come le stringhe di template e le tecniche di manipolazione degli array più sofisticate.
Vue non richiede alcun sistema di compilazione speciale, che lo rende molto accessibile agli sviluppatori orientati al design che sono abituati a scrivere piccole quantità di JavaScript, pur essendo abbastanza potente da essere integrato in sistemi di compilazione più complessi e applicazioni complete a singola pagina.
Non solo puoi avere più istanze di Vue sulla stessa pagina, ma puoi anche fare riferimento allo stesso oggetto di dati sottostante sulla stessa pagina. Ad esempio, nel nostro precedente esempio di elenco di dati, se il nostro JavaScript era simile al seguente:
var sharedObject = items: [] let vm = new Vue (el: "#app", data: sharedObject) vm.items = [text: "Diversity Day", text: "Beach Trip" ]
Il risultato dell'utilizzo di questo modello sarebbe lo stesso del nostro esempio precedente:
Item.text
Tuttavia, possiamo anche aggiungere una seconda istanza di Vue che fa riferimento alla stessa rappresentazione dei dati sottostanti come questa:
var vm2 = new Vue (el: "# app2", data: sharedObject)
Potremmo quindi mostrare, ad esempio, il conteggio degli elementi nell'elenco:
Items.length
Naturalmente, questo potrebbe non essere il comportamento desiderato. Potresti voler creare due componenti che non sono legati allo stesso oggetto sottostante e che funzioneranno senza problemi.
Se si desidera creare due istanze separate inizio con lo stesso oggetto sottostante, puoi usare il Object.assign metodo per creare nuove copie dello stesso oggetto.
let vm2 = new Vue (el: "# app2", dati: Object.assign (, sharedObject))
Vue è una scelta eccellente per gli sviluppatori che desiderano un framework leggero che sia facile da adottare, ma prevedo di aver bisogno di un framework più robusto in futuro. Vue si adatta alle tue esigenze. Capire come usare Vue in vari scenari (e avere un'idea di cosa sta succedendo sotto la superficie) ti fornirà un potente set di strumenti che potrai essere produttivo fin dal primo giorno.
Nel prossimo tutorial parleremo più del valore unico fornito da Vue guardando alcuni esempi del codice pulito di Vue. Ci vediamo lì!
Scopri Vue.js con la nostra guida completa a Vue.js, che tu sia un programmatore esperto o un web designer che cerca nuove tecniche di sviluppo front-end.
Accentsconagua