Der findes så mange JavaScript-rammer i disse dage, det kan være svært at holde styr på dem alle, og det er bestemt usandsynligt, at nogen behersker dem i sin helhed. Hvad det betyder for de fleste af os er, at vi bliver nødt til at være selektive med hensyn til hvilke udviklingsrammer vi vil investere tid i at lære.
I denne artikel tager vi et hurtigt kig på Vue.js, så du kan beslutte selv, om det sandsynligvis passer til den type projekter, du har tendens til at arbejde på, og om det ser ud til at være en god pasform for dig.
Hvad er Vue.js?
Selvom det traditionelt ikke er stort, er "Vue" virkelig et akronym for Visual Understanding Environment. Dens hovedformål er at gøre det lettere at udvikle webapplikationer ved at reducere kodekompleksiteten. Det har meget til fælles med React.js, men den nuværende version af Vue gengives hurtigere end React, og synes at være mere effektiv.
Er Vue svært at lære?
Hvis du allerede er en erfaren koder, skulle du ikke have meget problemer med at komme i gang med Vue, men det ville ikke være rigtigt at beskrive det som et begyndersprog. Du skal have lidt erfaring med HTML, CSS og JavaScript for at opbygge noget praktisk med det.
Læringskurven med Vue er lidt mindre stejl end med React, og den er meget mindre stejl end med Angular. Så hvad der nøjagtigt kan siges, er, at Vue er relativt let at lære i sammenligning med andre populære udviklingsrammer.
Hvordan hjælper Vue med at nå mål?
Det varierer lidt afhængigt af hvad dit mål faktisk er, men generelt binder du kodeblokke til HTML-divs. Denne metode gør det lettere at introducere interaktivitet og dynamisk indhold end med almindelig HTML, CSS og JavaScript.
På den anden side kan du ikke rigtig gøre mere i Vue end du kunne ved at bruge de mere konventionelle måder. Brug af Vue er simpelthen et spørgsmål om at gøre tingene lettere for dig i udviklingsfasen, men det har ikke meget effekt på slutresultatet bortset fra mindre ydeevneeffekt på grund af indlæsning af rammekoden.
En anden fordel ved Vue er, at det giver modularitet, hvilket betyder, at du kan genbruge komponenter, du udvikler i flere projekter.
Har Vue nogle seje tricks i ærmet?
Det gør den bestemt, og det bedste af disse er indbyggede overgangseffekter, som giver dig mulighed for at tage kontrol over, hvad andre villewise være meget kodeintensive CSS- og JavaScript-strukturer, der kun bruger en kode eller to. Dette sparer dig tid og kræfter, når du opretter dine applikationer.
En anden nyttig funktion er oprindelig gengivelse af specifikke enhedstyper som Android og iOS, så du kan finjustere dine applikationer til de enheder, de kører på uden meget ekstra arbejde.
Kom godt i gang
Som nævnt tidligere er Vue let at lære, men det er ikke et begyndersprog. Du skal stadig kende din vej rundt i en kodeblok.
Problemet er, at dokumentationen som de fleste frameworks er meget doven og primært dedikeret til at overbevise dig om at bruge den. Der gives meget mindre opmærksomhed i dokumentationen til at forklare, hvordan alting fungerer, eller hvorfor du gør tingene på en bestemt måde. Stort set alle officielle rammeeksempler, der nogensinde er oprettet, udelader vitale iformation, som du skal søge rundt i timevis for at opdage. Det er en fejl, som også deles af Vues dokumentation og eksempler.
For at gøre det lettere at forstå, hvad du virkelig skal gøre for at genskabe dette projekt, er dette de nødvendige trin:
1. Tilføj et script, der refererer til vue.js
For hastighedsoptimering er det bedst at inkludere dette efter alt dit sideindhold, men lige inden det lukkende krops-tag i HTML-kilden. Du kan også have andre sideressourcer indlæst i dette afsnit, og rækkefølgen af indlæsningsprioritet bestemmer, hvilken rækkefølge du skal indsætte hver ressource.
Her er et eksempel på inkludering af vue.js fra et CDN:
Og her er et eksempel på at inkludere vue.js fra et bibliotek på din egen server:
Uden denne henvisning til vue.js kan intet relateret til Vue ske.
2. Tilføj Vue-komponenterne i din HTML-krop
Det er, hvad der sker med denne kode:
For nu giver det ikke meget mening, men Vue-delen er det tomme "demo-grid" -element plus tilføjelsen af et "v-direktiv" til forespørgselsindgangen (i dette tilfælde er det "v-model ”, Som bruges til at binde Vue-kode til at danne input).
3. Hvis projektet kræver en komponentskabelon, skal du tilføje dette til HTML-kroppen
Dette kodeksnit er usædvanligt, fordi det ligner almindelig HTML inde i et script-tag, hvilket vil forvirre de fleste HTML-redigeringssoftware (bemærk, at indikatorfarverne er forkerte nogle steder).
4. Tilføj forekomsten af Vue
Dette skal være en af de sidste ting, der vises på siden, fordi den udfører en dynamisk gengivelsesopgave. Dette giver nogle optimeringsfordele i forhold til at tilføje det tidligere på siden.
- Linie 46 angiver, at browseren skal kigge efter en komponent på siden kaldet “demo-grid”, og linje 47 specificerer, at “# grid-template” skal bruges som skabelon til komponenten (dette er skabelonkoden tilføjet i trin 3 fra linje 9 til linje 30).
- En blok fra linje 48 til linje 52 definerer komponentens egenskaber.
- Linjerne 53 til 62 definerer en funktion til sortering af dataene i tabellen.
- Linjerne 63 til 85 definerer en funktion til filtrering af data (fra resultater i søgeforespørgslen).
- Linjerne 86 til 90 definerer en funktion til aktivering af ordene i et datasæt.
- Linjerne 91 til 97 definerer metoden til sortering af data.
5. Tilføj startkoden inden det afsluttende script-tag
Hvis du afsluttede trin 1 til 4 og åbnede filen i browseren, ville du bare se søgefeltet og ikke mere. Det skyldes, at alt, hvad der kræves for at oprette tabellen, er defineret, men ikke oprettet. Så i trin 5 tilføjer vi den kode, der faktisk opretter den tabel, der blev defineret af alle de foregående trin.
- Linie 100 opretter et nyt Vue-objekt.
- Linie 101 specificerer hvilket element, der skal bindes handlingen til.
- Linjerne 102 til 111 leverer de objektdata, der vil blive bundet til elementet.
Test
Når du har defineret og oprettet det krævede objekt, er du nu klar til at teste resultatet. Forbered dig på at blive undervisket, fordi det er det, du skal se i browseren:
Hvad sker der? Hvorfor er det så kedeligt? Det skyldes, at der ikke anvendes nogen styling. Hvis vi bruger standard styling fra JSFiddle-eksemplet, ser tabellen sådan ud:
Hvis du skriver noget i søgefeltet (ikke store og små bogstaver), filtreres resultaterne i overensstemmelse hermed:
Når du klikker på en kolonneoverskrift, kan du ændre rækkefølgen for visningen. For eksempel vil klikke på kolonneoverskriften "Power" ændre resultaterne, der skal vises i rækkefølge efter effektniveau.
Forbedring og tilpasning
Et andet problem med rammeeksempler er, at de normalt ikke indeholder megetformation for at hjælpe nogen, der ikke er bekendt med kodebasen, til at finde ud af, hvordan de kan anvende det, de ser i eksemplet i feltet. Vue gør et fantastisk stykke arbejde sammenlignet med Bootstrap (som notorisk er under-informative), men efterlader stadig masser af ubesvarede spørgsmål.
Her er et par ændringer, vi muligvis foretager i denne applikation for at ændre, hvordan det ser ud, og hvad det gør:
- Stil bordet som en Bootstrap striped bord
- Skift antallet af kolonner
- Skift dataene til noget helt andet
1. Tilføjelse af bootstrap
2. Indpakning af elementet i en Bootstrap-tabel
3. Justering af rodelementet til brug af Bootstrap-layoutmodellen
4. Genylyl pilene igen
5. Ændring af dataene
6. Testning
- Ufiltreret og usorteret
- Sorteret efter direktiv (stigende)
- Sorteret efter brugt til (stigende)
- Filtreret efter "betinget"
- Filtreret efter "betinget" og sorteret efter direktiv (stigende)
Afsluttende tanker
Forhåbentlig det, der var tydeligt af disse eksempler, var, at vi byggede to applikationer med meget forskellige udseende og indhold fra en fælles skive kode. Med Vue er det meget let at genbruge din kode på tværs af flere projekter og potentielt nyde betydelige tidsbesparelser.
header image med tilladelse fra Aleksandar Savic
Kommentarer 0 Responses