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 gewoonlijk niet met een hoofdletter wordt geschreven, is "Vue" eigenlijk een afkorting voor Visual Understanding Environment. Het belangrijkste doel is om het ontwikkelen van webtoepassingen gemakkelijker te maken door de complexiteit van de code te verminderen. Het heeft veel gemeen met React.js, maar de huidige versie van Vue wordt sneller weergegeven dan React 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 doet het zeker, en de beste hiervan zijn ingebouwde overgangseffecten, waarmee u de controle kunt nemen over wat anders zou zijnwise zeer code-intensieve CSS- en JavaScript-structuren zijn met slechts een paar regels 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.
Aan de slag
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, zoals bij de meeste frameworks, de documentatie erg lui is, en vooral bedoeld om je te overtuigen om het te gebruiken. In de documentatie wordt veel minder aandacht besteed aan het uitleggen hoe alles werkt of waarom je de dingen op een bepaalde manier doet. Vrijwel elk officieel raamwerkvoorbeeld dat ooit is gemaakt, laat essentiële informatdat je uren moet rondneuzen om te ontdekken. Dat is een fout die ook 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 heeft het niet veel zin, maar het Vue-gedeelte is het lege "demo-grid" -element, plus de toevoeging van een "v-richtlijn" aan de query-invoer (in dit geval is het "v-model ”, Die wordt gebruikt om Vue-code te binden om inputs 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 moet zoeken naar een component op de pagina met de naam "demo-grid", en regel 47 specificeert dat "# grid-template" moet worden gebruikt als de sjabloon voor de component (dit is de sjablooncode die is toegevoegd bij stap 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:
Door op een kolomkop te klikken, kunt u de weergavevolgorde wijzigen. Als u bijvoorbeeld op de kolomkop “Vermogen” klikt, worden de resultaten gewijzigd in volgorde van energieniveau.
Verbetering en aanpassing
Een ander probleem met raamwerkvoorbeelden is dat ze meestal niet veel bevattenformation om iemand die niet bekend is met de codebase te helpen uit te zoeken hoe ze in het veld kunnen toepassen wat ze in het voorbeeld zien. Vue doet geweldig werk in vergelijking met Bootstrap (wat notoir onder-in is)formative), 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:
- Style de tafel als Bootstrap striped 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' en 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
Heb je vragen? Stel ze hier. 0 Reacties