Introductie van Vue en Weex voor native mobiele apps

Vue is een populair JavaScript-framework voor web-apps met eenvoudige binding tussen gegevens in het geheugen en de gebruikersinterface. Nu kunnen we met Weex native mobiele apps coderen met behulp van het Vue-framework!

Waarom gebruiken we Vue en andere databindende frameworks zoals Angular en React? Wat is er zo speciaal aan hen? We gebruiken ze om ervoor te zorgen dat toepassingsgegevens die in het geheugen zijn opgeslagen synchroon blijven met de gebruikersinterface en vice versa. 

We gebruiken deze frameworks ook om ons in staat te stellen applicaties snel te bouwen en op een manier die is geoptimaliseerd voor prestaties.

In deze zelfstudie laat ik u zien hoe u het Vue-framework gebruikt, in het bijzonder hoe u de concepten van databinding en -sjablonen begrijpt. Vervolgens zal ik het Weex-platform introduceren voor het coderen van native mobiele apps met Vue!

Dataverbinding

Laten we eens kijken naar een eenvoudig voorbeeld om te begrijpen hoe deze frameworks ons daadwerkelijk tijd kunnen besparen. Wat we willen is een eenvoudig invoerveld dat synchroon blijft met onze applicatiegegevens. Onze app zelf kan de gegevens programmatisch wijzigen en de gebruiker kan deze wijzigen via gebruikersinvoer, dus we moeten zowel de gebruikersinterface als toepassingsgegevens bekijken.

Het schrijven van code die deze gegevensbinding zou ondersteunen zou uitgebreid zijn. We zouden gebeurtenisluisteraars en proxyobjecten en waarneembare objecten moeten maken om wijzigingen in de applicatiegegevens vast te leggen. En deze complexiteit groeit en groeit gewoon naarmate er meer typen gegevens en invoer worden toegevoegd. Vue en andere databindende raamwerken voorkomen dat we al die bindende code moeten schrijven. 

Met Vue synchroniseert de gebruiker, als onze gebruiker bepaalde invoergegevens wijzigt, zoals volgt naar de applicatiegegevens:

Of als de toepassing de gegevens wijzigt, wordt de gebruikersinterface als volgt bijgewerkt:

Wanneer we de gebruikersinterface en de app-gegevens synchroon houden, betekent dit dat onze app precies doet wat we verwachten dat het doet. Vue zal dit allemaal beheren en andere krachtige gegevensbindingsprocessen toestaan.

Instellen

Nu we weten waarom we deze frameworks gebruiken, stellen we een eenvoudige Vue-applicatie in om enkele voorbeelden uit te voeren. Maak een nieuw HTML-bestand overal op uw computer en plak de volgende code erin:

Dit is een eenvoudig HTML-bestand dat linkt naar de Vue JS-bibliotheek. Het bevat een div element met de ID van app. Binnen de script-tags hebben we een variabele genaamd app die we gebruiken om naar onze mening te wijzen - ik zal dit deel later uitleggen.

Vervolgens maken we een nieuwe Vue-instantie of "weergave". Deze constructor vertelt het framework welk element onze applicatie-gebruikersinterface bevat en houdt deze in overeenstemming met de toepassingsgegevens. 

Dubbelklik nu op het HTML-bestand om het in de browser te openen en open het browservenster.

Tekstinterpolatie

Tekstinterpolatie laat ons expressies insluiten in onze HTML-code die geïnterpreteerd zal worden wanneer de pagina gerenderd wordt. De uitdrukkingen zijn live, dus als de gegevens waarvan ze afhankelijk zijn, worden gewijzigd, wordt de pagina in realtime bijgewerkt. Dit staat bekend als declaratieve weergave, waardoor we overal expressies kunnen plaatsen binnen de inhoud van een element. Laten we het beoordelen met een eenvoudig voorbeeld.

JS

Onze JavaScript-code bevat nu een gegevens object dat al onze applicatiegegevens voor deze weergave zal opslaan. Daarin heb ik het bericht eigendom met de string "Hallo Wereld". 

Laten we deze eigenschap vervolgens in de HTML weergeven.

HTML

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

De expressies worden aangegeven met dubbele accolades. Vue JS beheert de afhankelijkheden van elke uitdrukking en werkt de pagina live bij als deze verandert. In ons geval hebben we twee uitdrukkingen, met de bericht eigendom als een afhankelijkheid van elk. De eerste uitdrukking message geeft gewoon de berichteigenschap weer. De seconde message.split ("). reverse (). join (") expression neemt de eigenschap message en gaat als volgt te werk:

• Splitst de string in een array:
  [ "Hallo Wereld" ]
• Keert de volgorde van de array om:
  ["d", "l", "r", "o", "w", "", "o", "l", "l", "e", "h"]
• Voegt zich samen bij de array om te krijgen "dlrow olleh", wat hetzelfde bericht is maar naar achteren wordt afgedrukt.

Open nu de browser en ververs de HTML-pagina. Open vervolgens het consolevenster van de browser en wijs het toe app.message een nieuwe waarde en zie hoe de uitvoer wordt bijgewerkt in de browser.

U kunt ook wiskunde gebruiken in sjabloonuitdrukkingen of gestructureerde gegevens in objecten. Eigenlijk, zoals je misschien al geraden had, zijn Vue-expressies gewoon JavaScript. Toegang tot globale variabelen is echter sandboxed, zodat je toegang hebt Wiskunde, maar niet venster. Dit helpt uw ​​apps veilig te houden, en ook uw gebruikers. 

Door Vue te gebruiken met slechts een paar regels code, kunnen we beschikken over geavanceerde bidirectionele gegevensbinding. Dit zorgt ervoor dat de gebruikersinterface en de applicatiegegevens relatief gemakkelijk gesynchroniseerd zijn. 

richtlijnen

Richtlijnen zijn een andere manier om gegevens in onze standpunten te binden. We kunnen ze gebruiken om toepassingsgegevens te binden aan attributen, gebeurtenissen, invoervelden en herhaalbare gegevens. Laten we elke richtlijn bekijken en ontdekken hoe ze werken.

• v-bind: bind een kenmerkwaarde
• v-model: bind app-gegevens aan een invoerelement als een textarea
• v-on: definieer een gebeurtenishandler
• v-for: binden aan een array of object

v-bind Richtlijn

De v-bind richtlijn wordt gebruikt voor binding van attribuutgegevens. Hiermee kunnen we applicatiedata koppelen aan de waarde van een attribuut. Zie het als tekstinterpolatie maar binnen een attribuut. Je kunt binden klasse, ID kaart, waarde of een ander attribuut met de v-bind richtlijn. 

Voor dit voorbeeld wil ik onze applicatiegegevens binden aan de data-attr attribuut met behulp van de v-bind richtlijn v-bind: data-attr.

JS

HTML

 
  object type  
 
 object.names 
 
 number * 20/2 
 
 [object.type, objectnamen, nummer * 20/2] 
 

In het bovenstaande voorbeeld hebben we een kenmerk gebonden data-attr naar een reeks verschillende gegevensbronnen. Eerst hebben we het gebonden aan de type en namen eigenschappen van voorwerp. Vervolgens hebben we het gekoppeld aan een wiskundige uitdrukking en vervolgens alle bindingen samengevoegd in een enkel arrayattribuut.

Bekijk de uitvoer in de browser: klik op de Elements tab om de uitvoer van de waarde van elke eigenschap te bekijken.

Nogmaals, u kunt de toepassingsgegevens in de console wijzigen om het databindingsproces te bekijken.

Denk aan de v-bind richtlijn als het toestaan ​​van uitdrukkingen in attribuutwaarden. Dit is ongelooflijk krachtig en gemakkelijk te maken met de Vue-bibliotheek.

v-model Richtlijn

Deze richtlijn wordt specifiek gebruikt om de applicatiegegevens gesynchroniseerd te houden met invoervelden, tekstgebieden en selectie-elementen. Hier is een voorbeeld:

JS

HTML

   
  Selecteer een naam vijzel John Mike  Geselecteerd: selected 
  vijzel  John  Mike  vijzel John Mike  
 Geselecteerde namen: checkedNames 

Voor het eerste gedeelte van deze pagina hebben we een tekstinvoerveld en tekstgebied, beide met de v-model richtlijn die deze invoervelden synchroon houdt met de bericht eigendom, gebruikmakend van v-model = "message". Op die manier, als u een van beide wijzigt, wordt het model bijgewerkt en wordt het andere invoerveld bijgewerkt. Ga je gang en probeer het uit!

In de volgende sectie hebben we een drop-down gesynchroniseerd met de gekozen eigendom met  v-model = "geselecteerd". Op die manier zal ons model worden bijgewerkt als de selectie wordt gewijzigd.

Eindelijk hebben we een meervoudige selectie. Ik heb dit op twee manieren laten zien: met meerdere selectievakjes en met een meervoudige invoer. Omdat we meerdere waarden kunnen hebben, heb ik de checkedNames array die meerdere waarden kan opslaan. De invoer met meerdere selecties en de selectievakjes hebben elk een v-model richtlijn gericht op de checkNames eigendom. Probeer het eens, en ze moeten gesynchroniseerd blijven terwijl u selecties maakt.

De v-on Richtlijn

Met deze richtlijn kunnen we gebeurtenissen koppelen aan HTML-elementen. Deze richtlijn kan worden gebruikt voor bepaalde elementen waaraan invoergebeurtenissen kunnen worden gekoppeld, zoals zweven, klikken, tekstinvoer, toetsaanslagen en meer. Voor dit voorbeeld maken we een eenvoudige knop met een klikgebeurtenis.

JS

HTML

 Klik hier! geklikt 

In de v-on richtlijn, na de dubbele punt, specificeren we de gebeurtenis die we willen koppelen. In dit voorbeeld, wanneer de Klik evenement is ontslagen, we zullen wat uitdrukkingen uitvoeren. Eerst openen we een waarschuwingsvenster en vervolgens veranderen we de waarde van de geklikt eigendom. Merk op dat je functies kunt oproepen v-on uitdrukkingen.

v-for Richtlijn

Deze richtlijn is een van de krachtigste van allemaal. We kunnen elk object of elke array bekijken voor wijzigingen en herhaaldelijk een deel van onze sjablooncode weergeven voor elke eigenschap of elk element dat in dat object of array is gevonden. Als u bijvoorbeeld een reeks namen als een lijst wilt weergeven:

JS

HTML

 
 
 naam 
 
 

In dit voorbeeld voegen we eerst de v-for richtlijn op het element dat u wilt herhalen. De waarde van de richtlijn geeft het object of de array aan waarover we willen itereren (namen) en een variabele die de waarde voor elke iteratie bevat (naam). Nu kunnen we binnen dit herhaalde element de naam variabel in uitdrukkingen.

Als we de array vervolgens aanpassen, bijvoorbeeld met een methode zoals Duwen, soort of omgekeerde, de sjabloongegevens worden automatisch bijgewerkt. Probeer het voorbeeld uit te voeren en wijzig de array in het consolevenster.

Components

Het databindingsproces vindt plaats in views. Componenten zijn slechts herbruikbare weergaven die we tijdens onze toepassing kunnen herhalen. Elke component moet bepaalde sjabloongegevens bevatten die moeten worden weergegeven als onderdeel van de gebruikersinterface en sommige toepassingsgegevens. Je kunt desgewenst een beetje styling toevoegen.

Laten we de gebruiken v-for weer een richtlijn voor items uit de uitvoerlijst. Maar deze keer zullen we elk item een ​​onderdeel maken. We geven dit onderdeel een naam zodat we het binnen onze sjablooncode kunnen targeten: list-post. Componenten kunnen ook "geregistreerde eigenschappen" hebben, waaraan we een waarde kunnen toewijzen die moet worden toegewezen wanneer we het onderdeel maken. In mijn geval, de list-post component verwacht een waarde te verwachten voor de naam eigenschap, gedefinieerd met props: [ "naam"]. 

Laten we dit onderdeel nu maken. Voeg de volgende code toe aan uw scripttags:

JS

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

Zorg er ook voor dat u de volgende toepassingsgegevens heeft:

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

HTML

Hier kunt u de list-post component wordt herhaald voor elke naam in de array. Elke naam wordt toegewezen aan de naamvariabele die is gedefinieerd in de v-for richtlijn. We passeren het naam eigenschap aan de component die gebruik maakt van v-bind.

Elke instantie is slechts een kopie van de component. We kunnen elke kopie of instantie onafhankelijk van elkaar wijzigen. Dus denk aan componenten als de blauwdruk en de exemplaren als kopieën gemaakt vanuit de blauwdruk. Hier is het eindresultaat:

Compilatie en de Vue CLI

We werken met een heel eenvoudig HTML-bestand en laten Vue alles tijdens runtime interpreteren. Vue komt echter met een opdrachtregelprogramma. Je vraagt ​​je misschien af ​​waarom. Een reden is dat vooraf samengestelde paginasjablonen beter presteren dan sjablonen die Vue tijdens runtime interpreteert. Een andere reden is dat, als we een grootschalige applicatie zouden bouwen en het in één HTML-bestand zouden passen, het snel onbeheersbaar zou worden. 

We hebben dus modulariteit nodig om een ​​grote applicatie in kleinere stukjes op te splitsen. 

Installatie van de Vue CLI

Als u de opdrachtregel wilt gebruiken, moet u het consolevenster openen voor uw besturingssysteem.

• Voor Mac, druk op Command-Space en typ dan terminal en druk op terugkeer.
• Zoek voor Windows naar de opdrachtprompt in het opstartmenu, klik met de rechtermuisknop en "open als beheerder ".
• Druk voor Linux op Ctrl-Alt-T.

Zorg er voordat u verder gaat voor dat de nieuwste versie van Node.js is geïnstalleerd. Vervolgens moeten we Webpack installeren, waardoor de bestandsgrootte van ons project wordt gecomprimeerd, waardoor het sneller wordt in onze browser. Dan kunnen we de Vue CLI installeren en de relevante opdrachten voor uw platform uitvoeren:

Mac en Linux

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

Windows (zorg ervoor dat u de console als beheerder uitvoert)

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

Dat is het! We zijn nu klaar om te beginnen met het opzetten van ons geavanceerde Webpack-project. Ga eerst naar de map waar we ons project willen maken, in mijn geval de desktop, en maak vervolgens het project. Je kunt vervangen myapp met elke gewenste projectnaam.

• vue init webpack myapp
  

Je wordt door een reeks vragen over je project geleid en wordt gevraagd om gegevens zoals titel en beschrijving in te vullen en je te vragen of je plug-ins van derden wilt installeren. Voor dit voorbeeld kunt u Nee antwoorden op alle optionele extra's. Nadat het is gemaakt, moeten we de afhankelijkheden installeren, dus ga naar de projectdirectory en we zullen de installatieopdracht uitvoeren.

• CD myapp
• npm installeren

Laat NPM alle afhankelijkheidspakketten installeren en dan zijn we klaar om verder te gaan. 

Een Vue-project maken

Nadat de pakketten zijn geïnstalleerd, kunnen we de ontwikkelserver uitvoeren door te typen npm run dev. Uw browservenster zou moeten openen en de volgende pagina weergeven.

We zullen niet de structuur van het hele project doorlopen, maar wanneer je de myapp map ziet u de src directory. Het bevat een App.vue dien een ... in main.js bestand en, in de componenten map, de Hello.vue het dossier.

De Vue-bestanden zijn componenten. De main.js bestand configureert ook de beginweergave en mogelijk andere configuraties. Laten we eens kijken naar de App.vue en Hello.vue bestanden.

Hier kunt u zien dat elke Vue-component is opgesplitst in drie delen: