Introducerea Vue și Weex pentru aplicațiile mobile native

Vue este un cadru popular JavaScript pentru aplicațiile web cu legare ușoară între datele din memorie și interfața cu utilizatorul. Acum, Weex ne permite să codificăm aplicații mobile native utilizând cadrul Vue!

De ce folosim Vue și alte cadre de legare a datelor cum ar fi Angular și React? Ce e atât de special în privința lor? Noi le folosim pentru a ne asigura că datele aplicației care sunt stocate în memorie rămân sincronizate cu interfața cu utilizatorul și invers. 

De asemenea, folosim aceste cadre pentru a ne permite să construim aplicații foarte rapid și într-un mod care este optimizat pentru performanță.

În acest tutorial vă vom arăta cum să folosiți cadrul Vue, în special cum să înțelegeți conceptele sale despre legarea datelor și șabloanele. Apoi, voi continua să introduc platforma Weex, pentru codarea aplicațiilor mobile native folosind Vue!

Legarea datelor

Să examinăm un exemplu simplu pentru a înțelege modul în care aceste cadre pot să ne salveze timpul. Ceea ce vrem este un simplu câmp de intrare care rămâne în sincronizare cu datele aplicației noastre. Aplicația noastră în sine poate schimba datele în mod programat, iar utilizatorul o poate schimba prin introducerea de către utilizator, deci trebuie să urmărim atât datele din interfață și datele aplicației.

Scrierea unui cod care să susțină legarea acestor date ar fi verbală. Ar trebui să creăm ascultători de evenimente și obiecte proxy și observabile pentru a captura orice schimbări în datele aplicației. Și aceste complexități cresc și se dezvoltă pe măsură ce se adaugă mai multe tipuri de date și intrări. Vue și alte cadre de legare a datelor ne împiedică să scriem tot codul obligatoriu. 

Cu Vue, dacă utilizatorul modifică unele date de intrare, se va sincroniza înapoi la datele aplicației, cum ar fi:

Sau dacă aplicația modifică datele, va actualiza interfața de utilizator astfel:

Atunci când păstrăm în sincronizare interfața de utilizator și datele aplicației împreună, înseamnă că aplicația noastră face exact ceea ce ne așteptăm să facă. Vue va gestiona toate acestea și va permite ca alte procese puternice de legare a datelor să aibă loc.

Noțiuni de bază

Acum, deoarece știm de ce folosim aceste cadre, să organizăm o aplicație Vue simplă pentru a rula câteva exemple. Creați un nou fișier HTML oriunde pe computer și inserați în el codul următor:

Acesta este un fișier HTML simplu care se leagă de biblioteca Vue JS. Conține a div element cu ID de aplicaţia. În interiorul etichetelor de script avem o variabilă numită aplicaţia pe care o folosim pentru a indica punctul nostru de vedere - voi explica mai târziu această parte.

Apoi vom crea o nouă instanță Vue, sau "vizualizare". Acest constructor spune cadrul care element va conține interfața de utilizare a aplicației și o va păstra în sincronizare cu datele aplicației. 

Acum faceți dublu clic pe fișierul HTML pentru al deschide în browser și deschideți fereastra consolei browserului.

Interpolarea textului

Interpolarea textului ne permite să încorporăm expresii în codul nostru HTML, care vor fi interpretate atunci când pagina este redată. Expresiile sunt live, deci dacă datele pe care le depind sunt modificate, pagina va fi actualizată în timp real. Aceasta este cunoscută sub numele de redare declarativă, care ne permite să plasăm expresii oriunde în conținutul unui element. Să examinăm cu un exemplu simplu.

JS

Codul nostru JavaScript conține acum date obiect care va stoca toate datele de aplicație pentru această vizualizare. În el am creat mesaj proprietatea cu șirul "Salut Lume". 

Apoi, să afișăm această proprietate în HTML.

HTML

 
 message message.split ("). 
 

Expresiile sunt indicate prin sintaxa dublelor. Vue JS gestionează dependențele fiecărei expresii și actualizează pagina live dacă se schimbă. În cazul nostru, avem două expresii, cu mesaj proprietate ca o dependență a fiecăruia. Prima expresie message afișează doar proprietatea mesajului. Al doilea message.split ("). inversă () join (") expresia ia proprietatea mesajului și apoi:

• Împărțiți șirul într-o matrice:
  [ "Salut Lume" ]
• Inversează ordinea matricei:
  ["d", "l", "r", "o", "w", "", "o", "l", "l", "e", "h"]
• Se alătură matricei împreună pentru a obține "dlrow olleh", care este același mesaj, dar imprimat înapoi.

Acum, deschideți browserul și actualizați pagina HTML. Apoi deschideți fereastra consolei browserului și alocați-o app.message o nouă valoare și să vedem cum se actualizează output-ul în browser.

De asemenea, puteți utiliza matematică în expresiile șablonului sau date structurate în obiecte. De fapt, după cum probabil ați ghicit, expresiile Vue sunt doar JavaScript. Accesul la variabilele globale este cu cutie de nisip, de exemplu, pentru a putea accesa Math, dar nu fereastră. Acest lucru vă ajută să păstrați aplicațiile în siguranță și pe utilizatorii dvs.. 

Prin utilizarea Vue cu doar câteva rânduri de cod, putem avea legături de date avansate în două direcții. Acest lucru asigură faptul că interfața cu utilizatorul și datele aplicației sunt sincronizate cu ușurință. 

directivă

Directivele reprezintă un alt mod de legare a datelor în opinia noastră. Le putem folosi pentru a lega datele aplicației la atribute, evenimente, câmpuri de intrare și date repetate. Să trecem prin fiecare directivă și să descoperim cum funcționează.

• v-bind: obligați o valoare de atribut
• v model: să legați datele aplicației de un element de intrare, cum ar fi textarea
• v-on: definiți un handler de evenimente
• v-pentru: se leagă de o matrice sau un obiect

v-bind Directivă

v-bind directiva este folosită pentru legarea datelor de atribut. Aceasta ne permite să legăm datele aplicației de valoarea unui atribut. Gândiți-vă la aceasta ca interpolarea textului, dar într-un atribut. Te poți lega clasă, id, valoare sau orice alt atribut cu v-bind directivă. 

Pentru acest exemplu, aș dori să leagă datele noastre de aplicare la Date-attr atribut folosind v-bind directivă v-bind: date-attr.

JS

HTML

 
 object.type 
 
 object.names 
 
 număr * 20/2 
 
 [object.type, object.names, number * 20/2] 
 

În exemplul de mai sus, am legat un atribut numit Date-attr la o serie de surse diferite de date. În primul rând, l-am legat la tip și numele proprietăți ale obiect. Apoi am legat-o la o expresie de matematică, apoi am aderat toate legăturile împreună într-un singur atribut de matrice.

Uitați-vă la ieșirea din browser: puteți face clic pe element pentru a vedea rezultatul valorii fiecărui atribut.

Din nou, puteți modifica datele aplicației din consola pentru a vedea procesul de legare a datelor.

Gândiți-vă la v-bind directivă, care permite expresii în valorile atributelor. Acest lucru este incredibil de puternic și ușor de stabilit cu biblioteca Vue.

v model Directivă

Această directivă este utilizată în mod specific pentru a menține datele aplicației sincronizate cu câmpurile de introducere, zonele de text și elementele de selecție. Iată un exemplu:

JS

HTML

   
  Selectați un nume Jack Ioan Mike  Selectat: select 
  Jack  Ioan  Mike  Jack Ioan Mike  
 Numele selectate: checkedNames 

Pentru prima secțiune a acestei pagini, avem un câmp de introducere a textului și o zonă de text, ambele având v model directive care păstrează aceste câmpuri de intrare în sincronizare cu mesaj proprietate, folosind v model = "mesaj". În acest fel, dacă schimbați oricare dintre ele, modelul va fi actualizat și apoi celălalt câmp de intrare va fi actualizat. Mergeți și încercați!

În secțiunea următoare, avem un drop-down sincronizat cu selectat proprietate cu  v model = "selectat". În acest fel, dacă selecția este modificată, modelul nostru va fi actualizat.

În cele din urmă, avem o selecție multiplă. Am arătat cum să faceți acest lucru în două moduri: cu mai multe casete de selectare și cu o intrare de selecție multiple. Deoarece putem avea mai multe valori, am creat checkedNames array care poate stoca mai multe valori. Intrarea de selectare multiplă și căsuțele de selectare au fiecare a v model directive direcționate către checkNames proprietate. Faceți o încercare și ar trebui să rămână în sincronizare pe măsură ce faceți selecții.

v-on Directivă

Această directivă ne permite să atașăm evenimente la elementele HTML. Această directivă poate fi folosită pentru anumite elemente care pot avea atașate evenimente de intrare, cum ar fi clicurile, clicurile, introducerea textului, apăsările de taste și multe altele. Pentru acest exemplu, vom crea un buton simplu cu un eveniment de clic.

JS

HTML

 Dă-mi clic! clicked 

În v-on după colon, specificăm evenimentul pe care dorim să-l atașăm. În acest exemplu, când clic evenimentul este declanșat, vom rula niște expresii. Mai întâi, deschidem o casetă de dialog de alertă și apoi schimbăm valoarea a făcut clic proprietate. Rețineți că puteți apela funcții în v-on expresii.

v-pentru Directivă

Această directivă este una dintre cele mai puternice dintre ele. Putem urmări orice obiect sau matrice pentru modificări și vom reda în mod repetat o parte din codul nostru de șablon pentru fiecare proprietate sau element găsit în acel obiect sau matrice. De exemplu, pentru a face o serie de nume ca o listă:

JS

HTML

 
 
 Nume 
 
 

În acest exemplu, mai întâi atașăm v-pentru directivă pe elementul pe care doriți să îl repetați. Valoarea directivei specifică obiectul sau matricea pe care dorim să o iterăm (numele), precum și o variabilă care va conține valoarea pentru fiecare iterație (Nume). Acum, în acest element repetat, putem folosi Nume variabilă în expresie.

Dacă apoi modificăm matricea, de exemplu cu o metodă asemănătoare Apăsați, fel sau inversa, datele șablonului vor fi actualizate automat. Încercați să executați exemplul și să modificați matricea în fereastra consolei.

Componente

Procesul de legare a datelor are loc în vizualizări. Componentele sunt doar viziuni refolosibile pe care le putem repeta în întreaga aplicație. Fiecare componentă trebuie să aibă unele date șablon pentru a fi redate ca parte a interfeței utilizator și a unor date de aplicație. Puteți să includeți opțional un stil dacă doriți.

Să folosim v-pentru din nou la articolele din lista de produse. Dar de data aceasta, vom face fiecare articol o componentă. Vom da acestei componente un nume, astfel încât să îl putem viza în codul nostru de șablon: Lista-item. Componentele pot avea, de asemenea, "proprietăți înregistrate", cărora le putem atribui o valoare care trebuie atribuită atunci când creăm componenta. În cazul meu, Lista-item componenta se așteaptă să primească o valoare pentru Nume proprietate, definită cu elemente de recuzită: [ "nume"]. 

Să creați acum această componentă. Adăugați următorul cod în etichetele de script:

JS

Vue.component ('list-item', template: '
 Nume 
', recuzită: ["nume"]);

De asemenea, asigurați-vă că aveți următoarele date de aplicație:

var app = nou Vue (el: '#app', date: nume: ["Lawrence", "John", "Mike", "Justin"]);

HTML

Aici puteți vedea Lista-item componenta va fi repetată pentru fiecare nume găsit în matrice. Fiecare nume va fi atribuit variabilei de nume care este definită în v-pentru directivă. Noi trecem Nume proprietatea asupra componentei folosind v-bind.

Fiecare instanță este doar o copie a componentei. Putem modifica fiecare copie sau instanță independent una de cealaltă. Deci, gândiți-vă la componente, ca model și la exemple ca și copii realizate din plan. Iată rezultatul final:

Compilație și VUE CLI

Am lucrat cu un fișier HTML foarte simplu și lăsându-l pe Vue să interpreteze totul la run-time. Cu toate acestea, Vue nu are un instrument de linie de comandă. S-ar putea să te întrebi de ce. Unul dintre motive este faptul că șabloanele de pagini precompilate vor avea o performanță mai bună decât șabloanele pe care Vue le interpretează la timpul de execuție. Un alt motiv este că, dacă am fi construit o aplicație la scară largă și vom încerca să o potriviți într-un singur fișier HTML, ar deveni rapid imposibil de gestionat. 

Așadar, avem nevoie de modularitate pentru a descompune o aplicație mare în bucăți mai mici. 

Instalarea VUE CLI

Pentru a utiliza linia de comandă, va trebui să deschideți fereastra consolei pentru sistemul dvs. de operare.

• Pentru Mac, apăsați Command-Space apoi tastați Terminal și lovit Întoarcere.
• Pentru Windows, căutați linia de comandă din meniul de pornire, asigurați-vă că faceți clic dreapta și "deschideți ca administrator ".
• Pentru Linux, apăsați Control-Alt-T.

Înainte de a continua, asigurați-vă că aveți cea mai recentă versiune de Node.js instalată. Apoi trebuie să instalăm Webpack, care va comprima dimensiunea fișierului proiectului, făcându-l mai rapid în browserul nostru. Apoi putem instala Vue CLI și rula comenzile relevante pentru platforma ta:

Mac și Linux

• sudo npm instalează -g webpack
• sudo npm instalare -g vue-cli

Windows (asigurați-vă că executați consola ca administrator)

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

Asta e! Acum suntem gata să începem configurarea proiectului Webpack avansat. În primul rând, navigați la directorul în care vrem să creăm proiectul nostru, în cazul meu desktopul, apoi creați proiectul. Puteți înlocui AplicațiaMea cu orice nume de proiect doriti.

• vue init webpack AplicațiaMea
  

Veți fi conduse printr-o serie de întrebări despre proiectul dvs., solicitându-vă să completați date precum titlul și descrierea și vă întreb dacă să instalați pluginuri terță parte. Pentru acest exemplu, puteți să răspundeți nu la toate opțiunile suplimentare opționale. Odată ce a fost creat, trebuie să instalăm dependențele, așa că navigați la directorul de proiect și vom rula comanda de instalare.

• CD AplicațiaMea
• npm install

Lăsați NPM să instaleze toate pachetele de dependență, iar apoi suntem gata să continuăm. 

Crearea unui proiect Vue

Odată ce pachetele au fost instalate, putem rula serverul de dezvoltare tastând npm run dev. Fereastra browserului dvs. ar trebui să se deschidă, afișând următoarea pagină.

Nu vom trece prin structura întregului proiect, dar când deschideți AplicațiaMea director veți vedea src director. Conține o App.vue fișier, a main.js fișier și, în componente directorul, Hello.vue fişier.

Fișierele Vue sunt componente. main.js fișierul configurează vizualizarea inițială și, eventual, și alte configurații. Să aruncăm o privire la App.vue și Hello.vue fișiere.

Aici puteți vedea că fiecare componentă Vue este împărțită în trei părți: