Vi presenterer Vue og Weex for Native Mobile Apps

Vue er et populært JavaScript-rammeverk for webapper med enkel binding mellom data i minnet og brukergrensesnittet. Nå lar Weex oss kode inn native mobile apps ved hjelp av Vue-rammeverket!

Hvorfor bruker vi Vue og andre data-bindende rammer som Angular and React? Hva er så spesielt med dem? Vi bruker dem for å sikre at applikasjonsdata som er lagret i minnet, forblir synkronisert med brukergrensesnittet og omvendt. 

Vi bruker også disse rammene slik at vi kan bygge applikasjoner veldig raskt og på en måte som er optimalisert for ytelse.

I denne opplæringen vil jeg vise deg hvordan du bruker Vue-rammeverket, spesielt hvordan du forstår konseptene for datainnbinding og maler. Da skal jeg fortsette å introdusere Weex-plattformen, for å kode innbyggede mobilapper ved hjelp av Vue!

Data Binding

La oss se på et enkelt eksempel for å forstå hvordan disse rammene faktisk kan spare oss tid. Det vi ønsker er et enkelt inntastingsfelt som forblir synkronisert med søknadsdataene våre. Vår app selv kan endre dataene programmatisk, og brukeren kan endre den via brukerinngang, så vi må se på både brukergrensesnittet og applikasjonsdataene.

Skrive kode som vil støtte denne data bindende ville være verbose. Vi må lage hendelseslyttere og proxy objekter og observables for å fange eventuelle endringer i programdataene. Og disse kompleksitetene vokser og vokser bare ettersom flere typer data og innganger legges til. Vue og andre data-bindende rammer hindrer oss til å skrive all den bindende koden. 

Med Vue, hvis brukeren endrer noen inngangsdata, synkroniseres den tilbake til programdataene slik:

Eller hvis programmet endrer dataene, vil det oppdatere brukergrensesnittet slik:

Når vi holder brukergrensesnittet og appdataene sammen i synkronisering, betyr det at vår app gjør akkurat det vi forventer å gjøre. Vue vil klare alt dette og tillate andre kraftige databindingsprosesser å forekomme.

Komme i gang

Nå som vi vet hvorfor vi bruker disse rammene, la oss sette opp et enkelt Vue-program for å kjøre noen eksempler. Opprett en ny HTML-fil hvor som helst på datamaskinen din, og lim inn følgende kode i den:

Dette er en enkel HTML-fil som kobler til Vue JS-biblioteket. Den inneholder en div element med ID av app. Inne i skriptene har vi en variabel som heter app som vi bruker til å peke på vårt syn - jeg skal forklare denne delen senere.

Deretter oppretter vi en ny Vue-forekomst, eller "visning". Denne konstruktøren forteller rammen hvilket element som vil inneholde programmets brukergrensesnitt og holde det synkronisert med programdataene. 

Dobbeltklikk nå på HTML-filen for å åpne den i nettleseren, og åpne vinduet for nettleserkonsoll.

Tekstinterpolering

Tekstinterpolering lar oss legge inn uttrykk i vår HTML-kode som tolkes når siden blir gjengitt. Uttrykkene er live, så hvis dataene de er avhengige av, blir endret, oppdateres siden i sanntid. Dette er kjent som deklarativ gjengivelse, som tillater oss å plassere uttrykk hvor som helst innenfor elementets innhold. La oss vurdere med et enkelt eksempel.

JS

Vår JavaScript-kode inneholder nå a data objekt som vil lagre alle programdataene våre for denne visningen. Innenfor det har jeg opprettet budskap eiendom med strengen "Hei Verden". 

Neste, la oss vise denne egenskapen i HTML-koden.

HTML

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

Uttrykkene er angitt med syntakse med dobbeltbøyle. Vue JS styrer avhengighetene til hvert uttrykk og oppdaterer siden live hvis de endres. I vårt tilfelle har vi to uttrykk, med budskap eiendom som en avhengighet av hver enkelt. Det første uttrykket budskap  viser bare meldingsegenskapen. Den andre message.split ("). revers (). join (") uttrykket tar meldingsegenskapen, og deretter:

• Splits strengen inn i en matrise:
  [ "Hei Verden" ]
• Omvender rekkefølgen av arrayen:
  ["d", "l", "r", "o", "w", "", "o", "l", "l", "e", "h"]
• Sammenføyer gruppen sammen for å få "dlrow olleh", som er den samme meldingen, men trykt bakover.

Åpne nettleseren og oppdater HTML-siden. Åpne deretter nettleserens konsollvindu og tilordne app.message en ny verdi og se hvordan utgangen er oppdatert i nettleseren.

Du kan også bruke matte i maluttrykk eller strukturert data i objekter. Faktisk, som du kanskje har gjettet, er Vue-uttrykk bare JavaScript. Tilgang til globale variabler er sandkasse, men du kan få tilgang til det Matte, men ikke vindu. Dette bidrar til å holde appene dine trygge - og brukerne dine også. 

Ved å bruke Vue med bare noen få linjer med kode, kan vi ha avansert toveisbinding. Dette sikrer at brukergrensesnittet og programdataene synkroniseres relativt enkelt. 

direktiver

Direktiv er en annen måte å binde data på i våre synspunkter. Vi kan bruke dem til å binde applikasjonsdata til attributter, hendelser, inputfelt og repeterbare data. La oss gå gjennom hvert direktiv og oppdage hvordan de fungerer.

• v-bind: bind en attributt verdi
• v-modellen: bind appdata til et inngangselement som a textarea
• v-on: Definer en hendelseshåndterer
• v-i: binde til en matrise eller et objekt

v-bind direktiv

De v-bind Direktivet brukes til å tildele data bindende. Det tillater oss å binde applikasjonsdata til et attributts verdi. Tenk på det som tekstinterpolering, men innenfor et attributt. Du kan binde klasse, id, verdi eller andre attributter med v-bind direktiv. 

For dette eksempelet vil jeg gjerne binde applikasjonsdataene til data-attr attributt ved hjelp av v-bind direktiv v-bind: data-attr.

JS

HTML

 
 object.type 
 
 object.names 
 
 tall * 20/2 
 
 [objekt.type, objekt.navn, nummer * 20/2] 
 

I eksemplet ovenfor bundet vi et attributt som ble kalt data-attr til en rekke forskjellige datakilder. Først bundet vi det til type og navnene egenskaper av gjenstand. Da bundet vi det til et matematisk uttrykk, og deretter ble alle bindingene samlet i en enkelt matriseattributt.

Ta en titt på utgangen i nettleseren: du kan klikke på Elements fanen for å se utdataene for hvert attributts verdi.

Igjen kan du endre programdataene i konsollen for å se datainnbindingsprosessen.

Tenk på v-bind Direktivet som tillater uttrykk i attributtverdier. Dette er utrolig kraftig og lett å etablere med Vue-biblioteket.

v-modellen direktiv

Dette direktivet brukes spesielt til å holde søknadsdataene synkronisert med inntastingsfelter, tekstområder og utvalgselementer. Her er et eksempel:

JS

HTML

   
  Velg et navn jekk John Mike  Utvalgt: valgt 
  jekk  John  Mike  jekk John Mike  
 Utvalgte navn: checkedNames 

For den første delen av denne siden har vi et tekstfelt og tekstområde, som begge har v-modellen Direktiv som holder disse inntastingsfeltene synkronisert med budskap eiendom, bruk v-modell = "melding". På den måten, hvis du endrer en, vil modellen bli oppdatert, og deretter vil det andre inntastingsfeltet bli oppdatert. Gå videre og prøv det ut!

I neste avsnitt har vi en rullegardin synkronisert til valgt eiendom med  v-modell = "valgt". På den måten, hvis valget endres, blir modellen oppdatert.

Til slutt har vi flere valg. Jeg har vist hvordan du gjør dette på to måter: med flere avmerkingsbokser og med en multiple select-inngang. Som vi kan ha flere verdier, har jeg opprettet checkedNames array som kan lagre flere verdier. Merkeinngangen og avmerkingsboksene har hver a v-modellen direktiv rettet mot checkNames eiendom. Prøv det, og de bør holde seg synkronisert når du velger valg.

De v-on direktiv

Dette direktivet tillater oss å knytte hendelser til HTML-elementer. Dette direktivet kan brukes på enkelte elementer som kan ha inngangshendelser knyttet til dem som svever, klikk, tekstinngang, nøkkelpress og mer. For dette eksempelet lager vi en enkel knapp med et klikkhendelse.

JS

HTML

 Klikk på meg! klikket 

I v-on Direktivet, etter tyktarmen, spesifiserer vi arrangementet vi vil legge ved. I dette eksemplet, når klikk Hendelsen avfyres, vi kjører noen uttrykk. Først åpner vi en varslingsdialogboks, og deretter endrer vi verdien av klikket eiendom. Merk at du kan ringe til funksjoner i v-on uttrykkene.

v-i direktiv

Dette direktivet er en av de mest kraftfulle av dem alle. Vi kan se et hvilket som helst objekt eller en rekke for endringer og gjenta gjentatte ganger en del av vår malkode for hver egenskap eller element som finnes i objektet eller gruppen. For eksempel å gjengi en rekke navn som en liste:

JS

HTML

 
 
 Navn 
 
 

I dette eksemplet vedlegger vi først v-i Direktivet på elementet som du vil gjenta. Verdien av direktivet spesifiserer objektet eller gruppen vi ønsker å iterere over (navnene) samt en variabel som vil inneholde verdien for hver iterasjon (Navn). Nå, innen dette gjentatte elementet, kan vi bruke Navn variabel i uttrykk.

Hvis vi deretter endrer oppsettet, for eksempel med en metode som trykk, sortere eller omvendt, Meldataene blir automatisk oppdatert. Prøv å kjøre eksemplet og endre oppsettet i konsollvinduet.

komponenter

Databindingsprosessen skjer i visninger. Komponenter er bare gjenbrukbare visninger som vi kan gjenta gjennom hele søknaden vår. Hver komponent må ha noen maldata som skal gjengis som en del av brukergrensesnittet og noen applikasjonsdata. Du kan eventuelt inkludere noen styling hvis du vil.

La oss bruke v-i Direktivet igjen for å utføre listelister. Men denne gangen vil vi gjøre hvert element til en komponent. Vi gir denne komponenten et navn slik at vi kan målrette det mot vår malkode: list-element. Komponenter kan også ha "registrerte egenskaper", som vi kan tildele en verdi tildelt når vi lager komponenten. I mitt tilfelle, list-element komponenten vil forvente å motta en verdi for Navn eiendom, definert med rekvisitter: [ "navn"]. 

La oss nå lage denne komponenten. Vennligst legg til følgende kode i skriptetikettene dine:

JS

Vue.component ('list-item', template: '
 Navn 
', rekvisitter: ["navn"]);

Sørg også for at du har følgende søknadsdata:

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

HTML

Her kan du se list-element komponent vil bli gjentatt for hvert navn som finnes i arrayet. Hvert navn vil bli tildelt navnevariabelen som er definert i v-i direktiv. Vi passerer Navn Egenskapen til komponenten bruker v-bind.

Hver forekomst er bare en kopi av komponenten. Vi kan endre hver kopi eller forekomst uavhengig av hverandre. Så tenk på komponenter som blåkopi og eksempler som kopier laget av tegningen. Her er sluttresultatet:

Samling og Vue CLI

Vi har jobbet med en veldig enkel HTML-fil og lar Vue tolke alt på kjøretid. Vue kommer imidlertid med et kommandolinjeverktøy. Du kan spørre deg selv hvorfor. En grunn er at forhåndskompilerte sidemaler vil fungere bedre enn maler som Vue tolker på kjøretid. En annen grunn er at hvis vi skulle bygge en stor applikasjon og prøve å tilpasse den til en HTML-fil, ville det raskt bli uhåndterlig. 

Så vi trenger modularitet for å bryte ned en stor applikasjon i mindre stykker. 

Installere Vue CLI

For å bruke kommandolinjen må du åpne konsollvinduet for operativsystemet.

• For Mac, trykk Command-Space og skriv deretter inn terminal og treffer Komme tilbake.
• For Windows, søk etter ledeteksten i oppstartsmenyen, pass på å høyreklikke og "åpne som administrator ".
• For Linux, trykk Ctrl-Alt-T.

Før du fortsetter, må du kontrollere at du har den nyeste versjonen av Node.js installert. Da må vi installere Webpack, som vil komprimere prosjektets filstørrelse, noe som gjør det raskere i nettleseren vår. Deretter kan vi installere Vue CLI og kjøre de relevante kommandoene for plattformen din:

Mac og Linux

• sudo npm installer -g webpack
• sudo npm installere -g vue-cli

Windows (sørg for at du kjører konsollen som administrator)

• npm installer -g webpack
• npm installere -g vue-cli

Det er det! Vi er nå klar til å begynne å sette opp vårt avanserte Webpack-prosjekt. For det første, naviger til katalogen hvor vi vil lage vårt prosjekt, i tilfelle skrivebordet, og deretter opprette prosjektet. Du kan erstatte MinApp med ethvert prosjektnavn du vil ha.

• vue init webpack MinApp
  

Du vil bli ledet gjennom en rekke spørsmål om prosjektet ditt, og du blir bedt om å fylle ut data som tittel og beskrivelse og spørre deg om du vil installere plugin fra tredjepart. For dette eksempelet kan du svare på nei til alle tilleggsutstyrene. Når den er opprettet, må vi installere avhengighetene, så naviger til prosjektkatalogen, og vi kjører installasjonskommandoen.

• cd MinApp
• npm installasjon

La NPM installere alle avhengighetspakker, og så er vi klare til å fortsette. 

Opprette et Vue-prosjekt

Når pakkene er installert, kan vi deretter kjøre utviklingsserveren ved å skrive npm kjøre dev. Nettleservinduet ditt bør åpnes, og viser den følgende siden.

Vi vil ikke gå gjennom hele prosjektets struktur, men når du åpner opp MinApp katalog du vil se src katalogen. Den inneholder en App.vue fil, a main.js fil og, i komponenter katalog, den Hello.vue fil.

Vue-filene er komponenter. De main.js filen konfigurerer opprinnelig visning og potensielt andre konfigurasjoner også. La oss ta en titt på App.vue og Hello.vue filer.

Her kan du se hver Vue-komponent er delt inn i tre deler: