Presentazione di Vue e Weex per le app native mobili

Vue è un popolare framework JavaScript per applicazioni web con facile associazione tra i dati in memoria e l'interfaccia utente. Ora Weex ci consente di codificare app mobili native utilizzando il framework Vue!

Perché utilizziamo Vue e altri framework di associazione dati come Angular e React? Cosa c'è di così speciale in loro? Li usiamo per garantire che i dati dell'applicazione archiviati nella memoria rimangano sincronizzati con l'interfaccia utente e viceversa. 

Utilizziamo anche questi framework per permetterci di creare applicazioni molto rapidamente e in modo ottimizzato per le prestazioni.

In questo tutorial ti mostrerò come utilizzare il framework Vue, in particolare come comprendere i concetti di associazione dati e modelli. In seguito, presenterò la piattaforma Weex, per la codifica di app mobili native tramite Vue!

Associazione dati

Diamo un'occhiata ad un semplice esempio per capire come questi framework possano effettivamente farci risparmiare tempo. Quello che vogliamo è un semplice campo di input che rimanga sincronizzato con i nostri dati applicativi. La nostra app stessa può modificare i dati a livello di codice e l'utente può modificarla tramite l'input dell'utente, quindi è necessario osservare sia l'interfaccia utente che i dati dell'applicazione.

Scrivere codice che supporti questa associazione di dati sarebbe prolisso. Avremmo bisogno di creare listener di eventi e oggetti proxy e osservabili per acquisire eventuali modifiche nei dati dell'applicazione. E queste complessità crescono e crescono man mano che vengono aggiunti più tipi di dati e input. Vue e altri framework di associazione dei dati ci impediscono di scrivere tutto questo codice vincolante. 

Con Vue, se il nostro utente modifica alcuni dati di input, si sincronizzerà di nuovo ai dati dell'applicazione in questo modo:

O se l'applicazione modifica i dati, aggiornerà l'interfaccia utente in questo modo:

Quando manteniamo sincronizzati l'interfaccia utente e i dati dell'app, significa che la nostra app fa esattamente ciò che ci aspettiamo che faccia. Vue gestirà tutto ciò e consentirà l'esecuzione di altri potenti processi di associazione dei dati.

Prepararsi

Ora che sappiamo perché utilizziamo questi framework, impostiamo una semplice applicazione Vue per eseguire alcuni esempi. Crea un nuovo file HTML ovunque sul tuo computer e incolla il seguente codice:

Questo è un semplice file HTML che si collega alla libreria Vue JS. Contiene a div elemento con l'ID di App. All'interno dei tag script abbiamo una variabile chiamata App che usiamo per indicare il nostro punto di vista - Spiegherò questa parte più tardi.

Quindi creiamo una nuova istanza Vue, o "vista". Questo costruttore dice al framework quale elemento conterrà la nostra interfaccia utente dell'applicazione e la terrà sincronizzata con i dati dell'applicazione. 

Ora fai doppio clic sul file HTML per aprirlo nel browser e apri la finestra della console del browser.

Interpolazione del testo

L'interpolazione del testo ci consente di incorporare espressioni nel nostro codice HTML che verranno interpretate al momento del rendering della pagina. Le espressioni sono live, quindi se i dati da cui dipendono sono cambiati, la pagina verrà aggiornata in tempo reale. Questo è noto come rendering dichiarativo, che ci consente di posizionare le espressioni ovunque all'interno del contenuto di un elemento. Esaminiamo con un semplice esempio.

JS

Il nostro codice JavaScript ora contiene a dati oggetto che memorizzerà tutti i dati dell'applicazione per questa vista. Al suo interno, ho creato il Messaggio proprietà con la stringa "Ciao mondo". 

Quindi, mostriamo questa proprietà nel codice HTML.

HTML

 
 messaggio message.split ("). reverse (). join (") 
 

Le espressioni sono indicate con la sintassi delle doppie parentesi. Vue JS gestisce le dipendenze di ogni espressione e aggiorna la pagina in tempo reale se cambia. Nel nostro caso, abbiamo due espressioni, con il Messaggio proprietà come dipendenza di ciascuno. La prima espressione Messaggio  mostra solo la proprietà del messaggio. Il secondo message.split ("). reverse (). join (") expression accetta la proprietà message e quindi:

• Divide la stringa in un array:
  [ "Ciao mondo" ]
• Inverte l'ordine dell'array:
  ["d", "l", "r", "o", "w", "", "o", "l", "l", "e", "h"]
• Unisce l'array per ottenere "dlrow olleh", che è lo stesso messaggio ma stampato all'indietro.

Ora apri il browser e aggiorna la pagina HTML. Quindi apri la finestra della console del browser e assegna app.message un nuovo valore e vedere come l'output viene aggiornato nel browser.

È inoltre possibile utilizzare la matematica nelle espressioni modello o nei dati strutturati negli oggetti. In realtà, come avrai intuito, le espressioni Vue sono solo JavaScript. L'accesso alle variabili globali è però in modalità sandbox, quindi è possibile accedervi Matematica, ma no finestra. Ciò aiuta a mantenere le tue app sicure e anche ai tuoi utenti. 

Usando Vue con solo poche righe di codice, possiamo avere un collegamento dati bidirezionale avanzato. Ciò garantisce che l'interfaccia utente e i dati dell'applicazione siano sincronizzati con relativa facilità. 

direttive

Le direttive sono un altro modo per legare i dati nelle nostre opinioni. Possiamo utilizzarli per associare i dati dell'applicazione a attributi, eventi, campi di input e dati ripetibili. Passiamo attraverso ogni direttiva e scopriamo come funzionano.

• v-bind: associa un valore di attributo
• v-model: associa i dati dell'app a un elemento di input come a textarea
• v-on: definisce un gestore di eventi
• v-for: associa a un array o un oggetto

v-bind Direttiva

Il v-bind direttiva viene utilizzata per l'associazione dei dati degli attributi. Ci consente di associare i dati dell'applicazione al valore di un attributo. Pensala come l'interpolazione del testo ma all'interno di un attributo. Puoi legare classe, id, valore o qualsiasi altro attributo con il v-bind direttiva. 

Per questo esempio, vorrei associare i dati della nostra applicazione a Dati-attr attributo usando il v-bind direttiva v-bind: data-attr.

JS

HTML

 
  tipo di oggetto  
 
 object.names 
 
 number * 20/2 
 
 [object.type, object.names, number * 20/2] 
 

Nell'esempio sopra, abbiamo associato un attributo chiamato Dati-attr a una serie di diverse fonti di dati. Primo, l'abbiamo legato al genere e nomi proprietà di oggetto. Quindi l'abbiamo associato a un'espressione matematica e quindi unito tutti i binding insieme in un singolo attributo array.

Dai un'occhiata all'output nel browser: puoi fare clic su Elementi scheda per vedere l'output del valore di ciascun attributo.

Ancora una volta, è possibile modificare i dati dell'applicazione nella console per vedere il processo di associazione dei dati.

Pensa al v-bind direttiva come permettendo espressioni nei valori degli attributi. Questo è incredibilmente potente e facile da stabilire con la libreria Vue.

v-model Direttiva

Questa direttiva viene utilizzata specificamente per mantenere i dati dell'applicazione in sincronia con i campi di input, le aree di testo e gli elementi di selezione. Ecco un esempio:

JS

HTML

   
  Seleziona un nome Jack John Mike  Selezionato: selezionato 
  Jack  John  Mike  Jack John Mike  
 Nomi selezionati: checkedNames 

Per la prima sezione di questa pagina, abbiamo un campo di inserimento del testo e un'area di testo, entrambi con v-model direttiva che mantiene questi campi di input sincronizzati con Messaggio proprietà, usando v-model = "messaggio". In questo modo, se si modifica uno dei due, il modello verrà aggiornato e l'altro campo di input verrà aggiornato. Vai avanti e provalo!

Nella prossima sezione abbiamo un menu a discesa sincronizzato con selezionato proprietà con  v-model = "selezionato". In questo modo, se la selezione viene modificata, il nostro modello verrà aggiornato.

Infine, abbiamo una selezione multipla. Ho mostrato come farlo in due modi: con più caselle di controllo e con un input di selezione multipla. Dal momento che possiamo avere più valori, ho creato il checkedNames array che può memorizzare più valori. L'input di selezione multipla e le caselle di controllo hanno ciascuno un v-model direttiva rivolta al checkNames proprietà. Fai un tentativo e dovrebbero rimanere sincronizzati mentre fai le selezioni.

Il v-on Direttiva

Questa direttiva ci consente di allegare eventi a elementi HTML. Questa direttiva può essere utilizzata su determinati elementi che possono avere eventi di input collegati ad essi come il passaggio del mouse, i clic, l'immissione di testo, la pressione dei tasti e altro. Per questo esempio, creeremo un semplice pulsante con un evento click.

JS

HTML

 Cliccami! clicked 

Nel v-on direttiva, dopo i due punti, specificiamo l'evento che vogliamo allegare. In questo esempio, quando il clic l'evento è licenziato, eseguiremo alcune espressioni. Per prima cosa apriamo una finestra di dialogo di avviso e quindi cambiamo il valore di cliccato proprietà. Si noti che è possibile chiamare le funzioni in v-on espressioni.

v-for Direttiva

Questa direttiva è una delle più potenti di tutte. Possiamo osservare qualsiasi oggetto o array per le modifiche e rendere ripetutamente una parte del nostro codice template per ogni proprietà o elemento trovato in quell'oggetto o array. Ad esempio, per rendere una matrice di nomi come una lista:

JS

HTML

 
 
 nome 
 
 

In questo esempio, per prima cosa associamo il v-for direttiva sull'elemento che si desidera ripetere. Il valore della direttiva specifica l'oggetto o l'array su cui vogliamo eseguire l'iterazione (nomi) e una variabile che conterrà il valore per ogni iterazione (nome). Ora, all'interno di questo elemento ripetuto, possiamo usare il nome variabile nelle espressioni.

Se poi modifichiamo la matrice, ad esempio con un metodo come Spingere, ordinare o inverso, i dati del modello verranno automaticamente aggiornati. Prova a eseguire l'esempio e modifica l'array nella finestra della console.

componenti

Il processo di associazione dei dati avviene nelle viste. I componenti sono solo viste riutilizzabili che possiamo ripetere durante la nostra applicazione. Ogni componente deve avere alcuni dati di modello da rendere come parte dell'interfaccia utente e alcuni dati dell'applicazione. Puoi opzionalmente includere alcuni stili se vuoi.

Usiamo il v-for direttiva di nuovo per produrre le voci dell'elenco. Ma questa volta, renderemo ciascun componente un componente. Daremo a questo componente un nome così da poterlo indirizzare all'interno del nostro codice modello: list-item. I componenti possono anche avere "proprietà registrate", alle quali possiamo assegnare un valore da assegnare quando creiamo il componente. Nel mio caso, il list-item componente si aspetta di ricevere un valore per il nome proprietà, definita con oggetti di scena: [ "nome"]. 

Creiamo ora questo componente. Si prega di aggiungere il seguente codice nei tag dello script:

JS

Vue.component ('list-item', template: '
 nome 
', oggetti di scena: ["nome"]);

Assicurati inoltre di disporre dei seguenti dati dell'applicazione:

var app = new Vue (el: '#app', data: nomi: ["Lawrence", "John", "Mike", "Justin"]);

HTML

Qui puoi vedere il list-item il componente verrà ripetuto per ogni nome trovato nell'array. Ogni nome sarà assegnato alla variabile nome che è definita nel v-for direttiva. Stiamo passando il nome proprietà al componente usando v-bind.

Ogni istanza è solo una copia del componente. Possiamo modificare ciascuna copia o istanza indipendentemente l'una dall'altra. Quindi pensa ai componenti come al progetto e alle istanze come copie fatte dal progetto. Ecco il risultato finale:

Compilation e Vue CLI

Abbiamo lavorato con un semplice file HTML e abbiamo permesso a Vue di interpretare tutto in fase di esecuzione. Tuttavia, Vue viene fornito con uno strumento da riga di comando. Forse ti starai chiedendo perché. Una ragione è che i modelli di pagina precompilati funzioneranno meglio dei modelli che Vue interpreta in fase di esecuzione. Un altro motivo è che, se dovessimo creare un'applicazione su larga scala e provare ad inserirla in un unico file HTML, diventerebbe rapidamente ingestibile. 

Quindi abbiamo bisogno della modularità per suddividere un'applicazione di grandi dimensioni in parti più piccole. 

Installazione di Vue CLI

Per utilizzare la riga di comando, è necessario aprire la finestra della console per il proprio sistema operativo.

• Per Mac, premere Comando-Space e quindi digitare terminale e colpisci Ritorno.
• Per Windows, cerca il prompt dei comandi nel menu di avvio, assicurati di fare clic con il tasto destro del mouse e "apri come amministratore ".
• Per Linux, premi Control-Alt-T.

Prima di procedere, assicurati di aver installato l'ultima versione di Node.js. Quindi dobbiamo installare Webpack, che comprime le dimensioni del file del nostro progetto, rendendolo più veloce nel nostro browser. Quindi possiamo installare Vue CLI ed eseguire i comandi rilevanti per la tua piattaforma:

Mac e Linux

• sudo npm install -g webpack
• sudo npm install -g vue-cli

Windows (assicurati di eseguire la console come amministratore)

• npm install -g webpack
• npm install -g vue-cli

Questo è tutto! Ora siamo pronti per iniziare a configurare il nostro progetto Webpack avanzato. In primo luogo, navigare nella directory in cui vogliamo creare il nostro progetto, nel mio caso il desktop, e quindi creare il progetto. Puoi sostituire myapp con qualsiasi nome di progetto che desideri.

• vue init webpack myapp
  

Sarai condotto attraverso una serie di domande sul tuo progetto, chiedendoti di inserire dati come titolo e descrizione e chiedendoti se installare plug-in di terze parti. Per questo esempio, puoi rispondere di no a tutti gli extra opzionali. Una volta creato, è necessario installare le dipendenze, quindi accedere alla directory del progetto e verrà eseguito il comando install.

• CD myapp
• installazione di npm

Lascia che NPM installi tutti i pacchetti di dipendenze, e quindi siamo pronti per continuare. 

Creare un Vue Project

Una volta che i pacchetti sono stati installati, possiamo quindi eseguire il server di sviluppo digitando npm run dev. La finestra del browser dovrebbe essere aperta, visualizzando la pagina seguente.

Non passeremo attraverso la struttura dell'intero progetto, ma quando aprirai il myapp directory vedrai il src directory. Contiene un App.vue file, a main.js file e, nel componenti directory, il Hello.vue file.

I file Vue sono componenti. Il main.js il file configura la vista iniziale e potenzialmente anche altre configurazioni. Diamo un'occhiata al App.vue e Hello.vue File.

Qui puoi vedere che ciascun componente Vue è suddiviso in tre parti: