Introducerar Vue och Weex för Native Mobile Apps

Vue är ett populärt JavaScript-ramverk för webbappar med enkel bindning mellan data i minnet och användargränssnittet. Nu tillåter Weex oss att koda inbyggda mobilappar via Vue-ramen!

Varför använder vi Vue och andra databindande ramar som Angular and React? Vad är så speciellt med dem? Vi använder dem för att säkerställa att applikationsdata som lagras i minnet fortsätter att synkronisera med användargränssnittet och vice versa. 

Vi använder också dessa ramar för att vi ska kunna bygga applikationer mycket snabbt och på ett sätt som är optimerat för prestanda.

I denna handledning visar jag dig hur du använder Vue-ramverket, i synnerhet hur du förstår dess begrepp för databindande och mallar. Sedan ska jag presentera Weex-plattformen för att koda inbyggda mobilappar med Vue!

Data Binding

Låt oss titta på ett enkelt exempel för att förstå hur dessa ramar faktiskt kan spara oss tid. Vad vi vill ha är ett enkelt inmatningsfält som stannar i synkronisering med vår applikationsdata. Vår app själv kan ändra data programmatiskt och användaren kan ändra den via användarinmatning, så vi måste titta på både användargränssnittet och applikationsdata.

Skriv kod som skulle stödja denna data bindande skulle vara verbose. Vi skulle behöva skapa händelse lyssnare och proxy objekt och observables för att fånga några ändringar i applikationsdata. Och dessa komplexa växer bara och växer, eftersom fler typer av data och ingångar läggs till. Vue och andra databindande ramar hindrar oss från att skriva all den bindande koden. 

Med Vue, om vår användare ändrar vissa inmatningsdata, kommer den att synkronisera till programdata som så:

Eller om applikationen ändrar data uppdateras användargränssnittet så här:

När vi håller användargränssnittet och appdata tillsammans i synkronisering betyder det att vår app gör exakt vad vi förväntar oss att göra. Vue hanterar allt detta och tillåter andra kraftfulla databindande processer att uppstå.

Komma igång

Nu när vi vet varför vi använder dessa ramar, låt oss skapa en enkel Vue-applikation för att driva några exempel. Skapa en ny HTML-fil var som helst på din dator och klistra in följande kod i den:

Det här är en enkel HTML-fil som länkar till Vue JS-biblioteket. Den innehåller en div element med ID av app. Inom skriptet har vi en variabel som heter app som vi använder för att peka på vår uppfattning - jag kommer att förklara den här delen senare.

Då skapar vi en ny Vue-instans, eller "visa". Denna konstruktör berättar vilken ram som kommer att innehålla vårt användargränssnitt och hålla det i samverkan med applikationsdata. 

Dubbelklicka nu på HTML-filen för att öppna den i webbläsaren och öppna webbläsarens konsolfönster.

Textinterpolering

Textinterpolering låter oss bädda in uttryck i vår HTML-kod som tolkas när sidan görs. Uttryckningarna är levande, så om den data de är beroende av ändras, uppdateras sidan i realtid. Detta är känt som deklarativ rendering, vilket gör att vi kan placera uttryck var som helst inom ett elements innehåll. Låt oss granska med ett enkelt exempel.

JS

Vår JavaScript-kod innehåller nu en data objekt som lagrar alla våra applikationsdata för den här vyn. Inom den har jag skapat meddelande egendom med strängen "Hej världen". 

Låt oss nu visa den här egenskapen i HTML.

html

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

Uttrycken är angivna med dubbeltrådssyntax. Vue JS hanterar beroende av varje uttryck och uppdaterar sidan live om de ändras. I vårt fall har vi två uttryck, med meddelande egendom som ett beroende av var och en. Det första uttrycket message Visar bara meddelandegenskapen. Den andra message.split ("). reverse (). join (") uttryck tar meddelandegenskapen och sedan:

• Splits strängen i en array:
  [ "Hej världen" ]
• Omvandlar ordningens ordning:
  ["d", "l", "r", "o", "w", "", "o", "l", "l", "e", "h"]
• Sammanfogar matrisen tillsammans för att få "dlrow olleh", vilket är samma meddelande men skrivs bakåt.

Öppna webbläsaren och uppdatera HTML-sidan. Öppna sedan webbläsarens konsolfönster och tilldela app.message ett nytt värde och se hur utmatningen uppdateras i webbläsaren.

Du kan också använda matte i malluttryck eller strukturerade data i objekt. Egentligen, som du kanske har gissat, är Vue-uttryck bara JavaScript. Tillgång till globala variabler är dock sandlåda, så att du kan komma åt Matematik, men inte fönster. Det här hjälper till att hålla dina appar säkra - och dina användare också. 

Genom att använda Vue med bara några rader av kod kan vi ha avancerad dubbelriktad databindning. Detta säkerställer att användargränssnittet och applikationsdata synkroniseras relativt enkelt. 

direktiven

Direktiv är ett annat sätt att binda data i våra synpunkter. Vi kan använda dem för att binda ansökningsdata till attribut, händelser, inmatningsfält och repeterbara data. Låt oss gå igenom varje direktiv och upptäcka hur de fungerar.

• v-bind: bind ett attributvärde
• v-modell: binda appdata till ett inmatningselement som a textarea
• v-on: Definiera en händelsehanterare
• v-for: binda till en array eller ett objekt

v-bind Direktiv

De v-bind Direktivet används för att ange data bindande. Det tillåter oss att binda ansökningsdata till ett attributs värde. Tänk på det som textinterpolering men inom ett attribut. Du kan binda klass, id, värde eller något annat attribut med v-bind direktiv. 

För det här exemplet vill jag binda våra ansökningsdata till data attr attribut med hjälp av v-bind direktiv v-bind: data attr.

JS

html

 
 object.type 
 
 object.names 
 
 nummer * 20/2 
 
 [objekt.typ, objekt.namn, nummer * 20/2] 
 

I exemplet ovan bundet vi ett attribut som heter data attr till en rad olika datakällor. För det första bundet vi det till typ och namn egenskaper hos objekt. Därefter bundet vi det till ett matematiskt uttryck och förenade sedan alla bindningarna tillsammans till en enda gruppattribut.

Ta en titt på utmatningen i webbläsaren: du kan klicka på element fliken för att se resultatet för varje attributs värde.

Återigen kan du ändra programdata i konsolen för att se datainbindingsprocessen.

Tänk på v-bind direktivet som tillåter uttryck i attributvärden. Detta är oerhört kraftfullt och lätt att etablera med Vue-biblioteket.

v-modell Direktiv

Detta direktiv används speciellt för att hålla ansökningsuppgifterna synkroniserade med inmatningsfält, textområden och urvalselement. Här är ett exempel:

JS

html

   
  Välj ett namn jack John Mikrofon  Valda: valda 
  jack  John  Mikrofon  jack John Mikrofon  
 Valda namn: checknamn 

För den första delen av den här sidan har vi ett textfält och ett textområde, som båda har v-modell direktivet som håller dessa inmatningsfält synkroniserade med meddelande egendom med hjälp av v-modellen = "meddelande". På så sätt, om du ändrar någon, uppdateras modellen och sedan uppdateras det andra inmatningsfältet. Fortsätt och prova det!

I nästa avsnitt har vi en nedrullning synkroniserad till vald egendom med  v-modellen = "vald". På så sätt, om valet ändras, uppdateras vår modell.

Slutligen har vi ett flertal urval. Jag har visat hur man gör det på två sätt: med flera kryssrutor och med en multipelmarkeringsinmatning. Eftersom vi kan ha flera värden har jag skapat checkedNames array som kan lagra flera värden. Multipelmarkeringsinmatningen och kryssrutorna har var och en a v-modell Direktiv riktad mot checkNames fast egendom. Ge det ett försök, och de borde synkronisera när du gör val.

De v-on Direktiv

Detta direktiv tillåter oss att bifoga händelser till HTML-element. Detta direktiv kan användas på vissa element som kan ha inmatningshändelser kopplade till dem som svävar, klick, textinmatning, nyckeltryck och mycket mer. I det här exemplet skapar vi en enkel knapp med ett klickhändelse.

JS

html

 Klicka här! clicked 

I v-on Direktivet, efter kolon, anger vi händelsen vi vill bifoga. I det här exemplet, när klick händelsen avfyras, vi kommer att köra några uttryck. Först öppnar vi en varningsdialogruta och sedan ändrar vi värdet av klickade fast egendom. Observera att du kan ringa funktioner i v-on uttryck.

v-for Direktiv

Detta direktiv är en av de mest kraftfulla av dem alla. Vi kan titta på något objekt eller en grupp för ändringar och göra upprepade gånger en del av vår mallkod för varje egenskap eller element som finns i det objektet eller matrisen. Till exempel, för att göra en rad namn som en lista:

JS

html

 
 
 namn 
 
 

I det här exemplet bifogar vi först v-for direktivet på det element som du vill repetera. Värdet av direktivet specificerar objektet eller arrayen vi vill iterera över (namn) samt en variabel som kommer att innehålla värdet för varje iteration (namn). Nu, inom detta upprepade element kan vi använda namn variabel i uttryck.

Om vi ​​sedan ändrar matrisen, till exempel med en metod som tryck, sortera eller omvänd, malldata uppdateras automatiskt. Försök att köra exemplet och ändra arrayen i konsolfönstret.

Komponenter

Den databindande processen händer i visningar. Komponenter är bara återanvändbara vyer som vi kan repetera i hela vår ansökan. Varje komponent måste ha vissa malldata som ska göras som en del av användargränssnittet och vissa applikationsdata. Du kan valfritt inkludera någon styling om du vill.

Låt oss använda v-for Direktivet återigen till utmatningslista. Men den här gången gör vi varje objekt till en komponent. Vi ger namnet på den här komponenten så att vi kan rikta in den i vår mallkod: listobjekt. Komponenter kan också ha "registrerade egenskaper", som vi kan tilldela ett värde som ska tilldelas när vi skapar komponenten. I mitt fall är listobjekt komponenten kommer att förvänta sig att få ett värde för namn egendom definierad med rekvisita: [ "name"]. 

Låt oss nu skapa den här komponenten. Lägg till följande kod i dina skriptiketter:

JS

Vue.component ('list-item', template: '
 namn 
", rekvisita: [" namn "]);

Se även till att du har följande ansökningsuppgifter:

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

html

Här kan du se listobjekt komponenten kommer att upprepas för varje namn som finns i arrayen. Varje namn kommer att tilldelas namnvariabeln som definieras i v-for direktiv. Vi passerar namn egendom till komponenten med v-bind.

Varje instans är bara en kopia av komponenten. Vi kan modifiera varje kopia eller instans oberoende av varandra. Så tänk på komponenter som ritningen och exemplen som kopior från ritningen. Här är slutresultatet:

Sammanställning och Vue CLI

Vi har arbetat med en mycket enkel HTML-fil och låter Vue tolka allt vid körtid. Vue kommer dock med ett kommandoradsverktyg. Du kanske frågar dig varför. En orsak är att förkompilerade sidmallar kommer att fungera bättre än mallar som Vue tolkar vid körtid. En annan anledning är att om vi skulle bygga en stor applikation och försöka passa den i en HTML-fil, skulle det snabbt bli omanagbart. 

Så vi behöver modularitet för att bryta ner en stor applikation i mindre bitar. 

Installera Vue CLI

För att använda kommandoraden måste du öppna konsolfönstret för operativsystemet.

• För Mac, tryck på Kommando-Space och skriv sedan in terminal och slå Lämna tillbaka.
• För Windows, leta efter kommandotolken i startmenyn, se till att högerklicka och "öppna som administratör ".
• För Linux, tryck på Ctrl-Alt-T.

Innan du fortsätter, se till att du har den senaste versionen av Node.js installerad. Då behöver vi installera Webpack, vilket kommer att komprimera projektets filstorlek, vilket gör det snabbare i vår webbläsare. Då kan vi installera Vue CLI och köra relevanta kommandon för din plattform:

Mac och Linux

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

Windows (se till att du kör konsolen som administratör)

• npm installera -g webpack
• npm installera -g vue-cli

Det är allt! Vi är nu redo att börja starta vårt avancerade Webpack-projekt. För det första, navigera till katalogen där vi vill skapa vårt projekt, i mitt fall skrivbordet och sedan skapa projektet. Du kan ersätta mittpgm med vilket projektnamn du vill ha.

• vue init webpack mittpgm
  

Du kommer att ledas genom en rad frågor om ditt projekt, och du uppmanas att fylla i data som titel och beskrivning och fråga dig om du vill installera plugin från tredje part. För det här exemplet kan du svara på nej till alla de extra tillbehören. När det är skapat måste vi installera beroenden, så navigera till projektkatalogen och vi kör installationsprogrammet.

• CD mittpgm
• npm installera

Låt NPM installera alla beroendepaket, och sedan är vi redo att fortsätta. 

Skapa ett Vue-projekt

När paketet har installerats kan vi sedan köra utvecklingsservern genom att skriva npm kör dev. Ditt webbläsarfönster bör öppnas och visa följande sida.

Vi kommer inte att gå igenom hela projektets struktur, men när du öppnar mittpgm katalog du kommer att se src katalogen. Den innehåller en App.vue fil, a main.js fil och, i komponenter katalog, den Hello.vue fil.

Vue-filerna är komponenter. De main.js filen konfigurerar den ursprungliga vyn och eventuellt andra konfigurationer också. Låt oss ta en titt på App.vue och Hello.vue filer.

Här kan du se varje Vue-komponent är uppdelad i tre delar: