Inleiding tot het bouwen van WebApps in Vue.js

Er bestaan ​​tegenwoordig zoveel JavaScript-frameworks, het kan moeilijk zijn om ze allemaal bij te houden, en het is onwaarschijnlijk dat iemand ze in zijn geheel beheerst. Wat het voor de meesten van ons betekent, is dat we selectief moeten zijn over welke ontwikkelingskaders we tijd gaan investeren in leren.

In dit artikel zullen we Vue.js snel bekijken, zodat je zelf kunt bepalen of dit waarschijnlijk past bij het soort projecten waar je aan werkt, en of het goed bij je past.

Wat is Vue.js?

Hoewel het conventioneel niet met een hoofdletter is geschreven, is 'Vue' echt een afkorting voor Visual Understanding Environment. Het belangrijkste doel is om het eenvoudiger te maken webtoepassingen te ontwikkelen door de complexiteit van de code te verminderen. Het heeft veel overeenkomsten met React.js, maar de huidige versie van Vue wordt sneller weergegeven dan Reageren en lijkt efficiënter te zijn.

Is Vue moeilijk te leren?

Als je al een ervaren coder bent, zou je niet veel moeite moeten hebben om met Vue aan de slag te gaan, maar het zou niet juist zijn om het als een beginnerstaal te beschrijven. Je moet enige ervaring met HTML, CSS en JavaScript hebben om er praktisch mee te kunnen werken.

De leercurve met Vue is iets minder steil dan met React, en het is een stuk minder steil dan met Angular. Dus wat er precies kan worden gezegd, is dat Vue relatief eenvoudig te leren is in vergelijking met andere populaire ontwikkelingskaders.

Hoe helpt Vue om doelstellingen te bereiken?

Het varieert een beetje, afhankelijk van wat uw doel eigenlijk is, maar over het algemeen bindt u codeblokken aan HTML divs. Deze methodologie maakt het gemakkelijker om interactiviteit en dynamische inhoud te introduceren dan met gewone HTML, CSS en JavaScript.

Aan de andere kant kun je niet echt meer doen in Vue dan je zou kunnen door de meer conventionele manieren te gebruiken. Het gebruik van Vue is eenvoudig een kwestie van dingen gemakkelijker maken voor jou in de ontwikkelfase, maar het heeft niet veel effect op het eindresultaat, behalve kleine invloed op de prestaties als gevolg van het laden van de raamwerkcode.

Een ander voordeel van Vue is dat het modulariteit biedt, wat betekent dat je componenten die je in meerdere projecten ontwikkelt opnieuw kunt gebruiken.

Heeft Vue coole trucs in petto?

Dat is zeker het geval, en de beste hiervan zijn ingebouwde overgangseffecten, waarmee je de controle kunt nemen over wat anders zeer code-intensieve CSS- en JavaScript-structuren zou zijn met slechts een regel of twee code. Dit bespaart u tijd en moeite bij het maken van uw applicaties.

Een andere handige functie is native rendering voor specifieke apparaattypen zoals Android en iOS, zodat u uw toepassingen kunt verfijnen voor de apparaten waarop ze worden uitgevoerd zonder veel extra werk.

Ermee beginnen

Zoals eerder vermeld, is Vue gemakkelijk te leren, maar het is geen taal voor beginners. Je moet nog steeds je weg weten in een codeblok.

Het probleem is dat, net als de meeste frameworks, de documentatie erg lui is en voornamelijk is bedoeld om je ervan te overtuigen om het te gebruiken. Veel minder aandacht wordt gegeven in de documentatie om uit te leggen hoe alles werkt of waarom je dingen op een bepaalde manier doet. Vrijwel elk officieel framework-voorbeeld dat ooit is gemaakt, laat essentiële informatie achter die je uren moet rondneuzen om te ontdekken. Dat is een fout die wordt gedeeld door de documentatie en voorbeelden van Vue.

Om het gemakkelijker te maken om te begrijpen wat u echt moet doen om dit project opnieuw te maken, zijn dit de vereiste stappen:

1. Voeg een script toe waarnaar vue.js verwijst

Voor snelheidsoptimalisatie kunt u dit het beste opnemen na alle pagina-inhoud, maar net voor de afsluitende body-tag in de HTML-bron. Het is mogelijk dat u ook andere paginabronnen in dit gedeelte laadt, en de volgorde van laden bepaalt met welke volgorde u elke resource moet invoegen.

Hier is een voorbeeld van het opnemen van vue.js van een CDN:

En hier is een voorbeeld van het opnemen van vue.js uit een map op uw eigen server:

Zonder deze verwijzing naar vue.js kan er niets met Vue te maken hebben.

2. Voeg de Vue-componenten toe aan uw HTML-body

Dat is wat er aan de hand is met deze code:

Voorlopig is het niet logisch, maar het Vue-gedeelte is het lege "demo-grid" -element plus de toevoeging van een "v-directive" aan de queryinvoer (in dit geval is het "v-model" ", Die wordt gebruikt voor het binden van Vue-code om invoer te vormen).

3. Als het project een componentsjabloon vereist, voeg dit toe aan de HTML-body

Dit gedeelte van de code is ongebruikelijk omdat het eruit ziet als normale HTML in een script-tag, wat de meeste HTML-bewerkingssoftware zal verwarren (merk op dat de indicatorkleuren op sommige plaatsen verkeerd zijn).

4. Voeg de Vue-instantie toe

Dit zou een van de laatste dingen moeten zijn die op de pagina verschijnen, omdat het een dynamische renderingtaak uitvoert. Dit biedt enkele optimalisatievoordelen door het eerder op de pagina toe te voegen.

  • Regel 46 specificeert dat de browser naar een component op de pagina genaamd "demo-grid" moet zoeken en regel 47 specificeert dat "# grid-template" moet worden gebruikt als de sjabloon voor de component (dit is de sjablooncode die in stap is toegevoegd) 3 van regel 9 tot regel 30).
  • Een blok van regel 48 tot regel 52 definieert de eigenschappen van het onderdeel.
  • Regels 53 tot 62 definiëren een functie voor het sorteren van de gegevens in de tabel.
  • Lijnen 63 tot 85 definiëren een functie voor het filteren van gegevens (uit resultaten in de zoekopdracht).
  • Regels 86 tot 90 definiëren een functie voor het hoofdlettergebruik van de woorden in een gegevensset.
  • Regels 91 tot 97 definiëren de methode voor het sorteren van gegevens.

5. Voeg de startcode toe vóór de afsluitende scripttag

Als u stappen 1 naar 4 hebt voltooid en het bestand in de browser hebt geopend, is alles wat u ziet het zoekvak en niets meer. Dat komt doordat alles wat nodig is om de tabel te bouwen is gedefinieerd maar niet is gemaakt. Dus in stap 5 voegen we de code toe die de tabel daadwerkelijk maakt die in alle voorgaande stappen is gedefinieerd.

  • Regel 100 maakt een nieuw Vue-object.
  • Regel 101 specificeert aan welk element de actie moet binden.
  • Regels 102 tot 111 bieden de objectgegevens die aan het element worden gebonden.

testen

Nadat u het vereiste object hebt gedefinieerd en gemaakt, bent u nu klaar om het resultaat te testen. Bereid u erop voor dat u niet tevreden bent, want dit is wat u in de browser zou moeten zien:

Wat gebeurd er? Waarom is het zo saai? Dat komt omdat er geen styling is toegepast. Als we de standaardstyling uit het JSFiddle-voorbeeld gebruiken, ziet de tabel er als volgt uit:

Als u iets in het zoekvak typt (niet hoofdlettergevoelig), filtert u de resultaten dienovereenkomstig:

Als u op een kolomkop klikt, kunt u de weergavevolgorde wijzigen. Als u bijvoorbeeld op de kolomkop "Power" klikt, worden de resultaten in volgorde van het vermogensniveau weergegeven.

Verbetering en aanpassing

Een ander probleem met raamwerkvoorbeelden is dat ze meestal niet veel informatie bevatten om iemand die onbekend is met de codebasis te helpen uitvogelen hoe ze in het veld kunnen toepassen wat ze in het voorbeeld zien. Vue doet fantastisch werk in vergelijking met Bootstrap (dat is notoir onder-informatief), maar laat nog steeds veel onbeantwoorde vragen.

Hier zijn enkele wijzigingen die we in deze toepassing kunnen aanbrengen om de weergave en de werking ervan te wijzigen:

  • Stijl de tafel als een gestreepte Bootstrap-tafel
  • Verander het aantal kolommen
  • Verander de gegevens in iets heel anders

1. Bootstrap toevoegen

2. Het element in een Bootstrap-tabel inpakken

3. Het hoofdelement aanpassen om het lay-outmodel Bootstrap te gebruiken

4. Restyling van de pijlen

5. De gegevens wijzigen

6. testen

  • Ongefilterd en ongesorteerd

  • Gesorteerd op richtlijn (oplopend)

  • Gesorteerd op Gebruikt voor (oplopend)

  • Gefilterd op "voorwaardelijk"

  • Gefilterd op "voorwaardelijk" & gesorteerd op richtlijn (oplopend)

Laatste gedachten

Hopelijk was wat uit deze voorbeelden bleek, dat we twee applicaties met heel verschillende looks en inhoud hebben gebouwd op basis van een gemeenschappelijk stukje code. Met Vue is het heel eenvoudig om uw code voor meerdere projecten te hergebruiken en mogelijk aanzienlijke tijdwinst te behalen.

header afbeelding met dank aan Aleksandar Savic

Bogdan Rancea

Bogdan is een van de oprichters van Inspired Mag en heeft in die periode bijna 6 jarenlange ervaring opgebouwd. In zijn vrije tijd studeert hij graag klassieke muziek en onderzoekt hij beeldende kunst. Hij is ook behoorlijk geobsedeerd door fixies. Hij is al eigenaar van 5.