Det finnes så mange JavaScript-rammer i disse dager, det kan være vanskelig å holde rede på dem alle, og det er absolutt usannsynlig at noen mestrer dem i sin helhet. Det det betyr for de fleste av oss er at vi må være selektive om hvilke utviklingsrammer vi kommer til å investere tid på å lære.
I denne artikkelen skal vi se raskt på Vue.js, slik at du selv kan bestemme om det sannsynligvis vil passe til den type prosjekter du pleier å jobbe med, og om det virker som en god passform for deg.
Hva er Vue.js?
Selv om det konvensjonelt ikke er stort, er "Vue" egentlig et akronym for Visual Understanding Environment. Hovedformålet er å gjøre det lettere å utvikle webapplikasjoner ved å redusere kodekompleksiteten. Det har mye til felles med React.js, men den nåværende versjonen av Vue gjengis raskere enn React, og ser ut til å være mer effektiv.
Er Vue vanskelig å lære?
Hvis du allerede er en erfaren koder, bør du ikke ha store problemer med å komme i gang med Vue, men det ville ikke være riktig å beskrive det som et begynnerspråk. Du må ha litt erfaring med HTML, CSS og JavaScript for å kunne bygge noe praktisk med det.
Læringskurven med Vue er litt mindre bratt enn med React, og den er mye mindre bratt enn med Angular. Så det som kan sies nøyaktig er at Vue er relativt lett å lære i forhold til andre populære utviklingsrammer.
Hvordan hjelper Vue med å oppnå mål?
Det varierer litt avhengig av hva målet ditt faktisk er, men generelt binder du kodeblokker til HTML divs. Denne metodikken gjør det lettere å introdusere interaktivitet og dynamisk innhold enn med vanlig HTML, CSS og JavaScript.
På den annen side kan du ikke virkelig gjøre mer i Vue enn du kunne ved å bruke de mer konvensjonelle måtene. Å bruke Vue er rett og slett et spørsmål om å gjøre ting lettere for deg i utviklingsfasen, men det har ikke så stor effekt på sluttresultatet, bortsett fra mindre ytelseseffekter på grunn av lasting av rammekoden.
En annen fordel med Vue er at det gir modularitet, noe som betyr at du kan gjenbruke komponenter du utvikler i flere prosjekter.
Har Vue noen kule triks i ermet?
Det gjør den absolutt, og det beste av disse er innebygde overgangseffekter, som lar deg ta kontroll over hva andrewise være svært kodeintensive CSS- og JavaScript-strukturer ved å bruke bare en linje eller to med kode. Dette sparer deg for tid og krefter når du lager applikasjonene dine.
En annen nyttig funksjon er naturlig gjengivelse for spesifikke enhetstyper som Android og iOS, slik at du kan finjustere applikasjonene dine for enhetene de kjører på uten mye ekstra arbeid.
Komme i gang
Som tidligere nevnt, Vue er lett å lære, men det er ikke et nybegynnspråk. Du må fremdeles kjenne deg rundt i en kodeblokk.
Problemet er at som de fleste rammeverk, er dokumentasjonen veldig lat, og hovedsakelig dedikert til å overbevise deg om å bruke den. Det gis mye mindre oppmerksomhet i dokumentasjonen til å forklare hvordan alt fungerer eller hvorfor du gjør ting på en bestemt måte. Praktisk talt alle offisielle rammeeksempler som noen gang er laget utelater viktigeformation som du må rote rundt i timevis for å oppdage. Det er en feil som også deles av Vues dokumentasjon og eksempler.
Dette er de nødvendige trinnene for å gjøre det lettere å forstå hva du virkelig trenger å gjøre for å lage dette prosjektet på nytt:
1. Legg til et skript som refererer til vue.js
For hurtigoptimalisering er det best å inkludere dette etter alt sideinnholdet, men like før den lukkende hovedkoden i HTML-kilden. Du kan også ha andre sideressurser som lastes inn i dette avsnittet, og rekkefølgen på innlastingsprioritet bestemmer hvilken rekkefølge du skal sette inn hver ressurs.
Her er et eksempel på å inkludere vue.js fra en CDN:
Og her er et eksempel på å inkludere vue.js fra en katalog på din egen server:
Uten denne henvisningen til vue.js kan ingenting relatert til Vue skje.
2. Legg til Vue-komponentene i HTML-kroppen
Det er det som skjer med denne koden:
Foreløpig gir det ikke mye mening, men Vue-delen er det tomme "demo-grid" -elementet, pluss tillegg av et "v-direktiv" til spørreinngangen (i dette tilfellet er det "v-modell" ”, Som brukes til å binde Vue-kode for å danne innganger).
3. Hvis prosjektet krever en komponentmal, legger du dette til HTML-kroppen
Denne delen av koden er uvanlig fordi den ser ut som vanlig HTML i en skriptkode, noe som vil forvirre de fleste HTML-redigeringsprogramvare (legg merke til at indikatorfargene er gale noen steder).
4. Legg til Vue-forekomsten
Dette bør være en av de siste tingene som vises på siden, fordi den utfører en dynamisk gjengivelsesoppgave. Dette gir noen optimaliseringsfordeler enn å legge til det tidligere på siden.
- Linje 46 spesifiserer at nettleseren skal se etter en komponent på siden som heter “demo-grid”, og linje 47 spesifiserer at “# grid-template” skal brukes som mal for komponenten (dette er malkoden som ble lagt til i trinn 3 fra linje 9 til linje 30).
- En blokk fra linje 48 til linje 52 definerer komponentens egenskaper.
- Linjene 53 til 62 definerer en funksjon for å sortere dataene i tabellen.
- Linjene 63 til 85 definerer en funksjon for filtrering av data (fra resultatene i søket).
- Linjene 86 til 90 definerer en funksjon for å aktivere ordene i et datasett.
- Linjene 91 til 97 definerer metoden for å sortere data.
5. Legg i startkoden før den avsluttende skriptkoden
Hvis du fullførte trinn 1 til 4 og åpnet filen i nettleseren, alt du vil se er søkefeltet og ikke noe mer. Det er fordi alt som kreves for å bygge tabellen er definert, men ikke opprettet. Så i trinn 5 legger vi til koden som faktisk oppretter tabellen som ble definert av alle de foregående trinnene.
- Linje 100 oppretter et nytt Vue-objekt.
- Linje 101 spesifiserer hvilket element som skal bindes handlingen til.
- Linjene 102 til 111 gir objektdataene som vil være bundet til elementet.
Testing
Etter å ha definert og opprettet det nødvendige objektet, er du nå klar til å teste resultatet. Forbered deg på å bli overveldet, for det er dette du bør se i nettleseren:
Hva skjer? Hvorfor er det så kjedelig? Det er fordi det ikke brukes styling. Hvis vi bruker standard styling fra JSFiddle-eksempelet, vil tabellen se slik ut:
Hvis du skriver noe i søkefeltet (ikke store og små bokstaver), filtreres resultatene deretter:
Ved å klikke på en kolonneoverskrift, kan du endre rekkefølgen på skjermen. Hvis du for eksempel klikker på kolonneoverskriften "Power", vil resultatene bli vist i rekkefølge etter effektnivå.
Forbedring og tilpasning
Et annet problem med rammeeksempler er at de vanligvis ikke inkluderer myeformation for å hjelpe noen som ikke er kjent med kodebasen til å finne ut hvordan de kan bruke i feltet det de ser i eksemplet. Vue gjør en fantastisk jobb sammenlignet med Bootstrap (som er notorisk under-informative), men etterlater fortsatt mange ubesvarte spørsmål.
Her er noen endringer vi kan gjøre i denne applikasjonen for å endre hvordan den ser ut og hva den gjør:
- Stil bordet som en Bootstrap striped tabell
- Endre antall kolonner
- Endre dataene til noe helt annet
1. Legge til bootstrap
2. Pakk elementet inn i en Bootstrap-tabell
3. Justere rotelementet for å bruke Bootstrap-oppsettmodellen
4. Restyling pilene
5. Endre dataene
6. Testing
- Ufiltrert og usortert
- Sortert etter direktiv (stigende)
- Sortert etter brukt for (stigende)
- Filtrert for “betinget”
- Filtrert for “betinget” og sortert etter direktiv (stigende)
Avsluttende tanker
Forhåpentligvis var det som var tydelig fra disse eksemplene, at vi bygde to applikasjoner med veldig forskjellige utseende og innhold fra en vanlig kode. Med Vue er det veldig enkelt å bruke koden din på nytt i flere prosjekter, og potensielt få betydelig tidsbesparelser.
header image med tillatelse fra Aleksandar Savic
Kommentar 0 Responses