Daar bestaan โโdeesdae soveel JavaScript-raamwerke, dit kan moeilik wees om almal by te hou, en dit is onwaarskynlik dat iemand dit in geheel sal bemeester. Wat dit vir die meeste van ons beteken, is dat ons selektief moet wees oor watter ontwikkelingsraamwerke ons tyd in leer gaan belรช.
In hierdie artikel gaan ons vinnig na Vue.js, sodat u self kan besluit of dit waarskynlik sal pas by die soort projekte waaraan u geneig is om te werk, en of dit vir u goed pas.
Wat is Vue.js?
Alhoewel dit gewoonlik nie met hoofletters gebruik word nie, is 'Vue' 'n afkorting vir Visual Understanding Environment. Die hoofdoel daarvan is om webtoepassings makliker te maak deur die kompleksiteit van die kode te verminder. Dit het baie gemeen met React.js, maar die huidige weergawe van Vue word vinniger as React en lyk meer doeltreffend.
Is Vue moeilik om te leer?
As u reeds 'n ervare kodeerder is, moet u nie veel moeite doen om met Vue aan die gang te kom nie, maar dit sal nie goed wees om dit as 'n beginnerstaal te beskryf nie. U moet 'n bietjie ervaring hรช met HTML, CSS en JavaScript om iets prakties daarmee te kan opbou.
Die leerkurwe met Vue is 'n bietjie minder steil as met React, en dit is baie minder steil as met Angular. Wat presies gesรช kan word, is dat Vue relatief maklik is om te leer in vergelyking met ander gewilde ontwikkelingsraamwerke.
Hoe help Vue om doelstellings te bereik?
Dit wissel 'n bietjie, afhangende van wat u doel eintlik is, maar in die algemeen bind u kodeblokke aan HTML-divs. Hierdie metodologie maak dit makliker om interaktiwiteit en dinamiese inhoud bekend te stel as met gewone HTML, CSS en JavaScript.
Aan die ander kant, kan u nie regtig meer in Vue doen as wat u kon deur die meer konvensionele maniere te gebruik nie. Die gebruik van Vue is eenvoudig om dinge vir u makliker te maak in die ontwikkelingsfase, maar dit het nie 'n groot invloed op die eindresultaat nie, afgesien van 'n geringe prestasieimpak as gevolg van die laai van die raamkode.
Nog 'n voordeel van Vue is dat dit modulariteit bied, wat beteken dat u komponente wat u ontwikkel in verskeie projekte kan hergebruik.
Het Vue 'n oulike truuk in sy mou?
Dit doen dit beslis, en die beste hiervan is ingeboude oorgangseffekte, wat jou toelaat om beheer te neem oor wat anderwise wees baie kode-intensiewe CSS- en JavaScript-strukture deur slegs 'n reรซl of twee kode te gebruik. Dit spaar jou tyd en moeite wanneer jy jou toepassings skep.
'N Ander nuttige funksie is oorspronklike weergawes vir spesifieke soorte toestelle soos Android en iOS, sodat u u toepassings kan instel vir die toestelle waarop hulle werk sonder veel ekstra werk.
Aan die begin
Soos vroeรซr genoem, is Vue maklik om te leer, maar dit is nie 'n beginnerstaal nie. U moet nog steeds weet wat u in 'n kodeblok vind.
Die probleem is dat die dokumentasie, soos die meeste raamwerke, baie lui is, en hoofsaaklik daarop gemik is om jou te oortuig om dit te gebruik. Baie minder aandag word in die dokumentasie gegee om te verduidelik hoe alles werk of hoekom jy dinge op 'n sekere manier doen. Feitlik elke amptelike raamwerkvoorbeeld wat ooit geskep is, laat noodsaaklik informatioon wat jy ure lank moet rondkyk om te ontdek. Dit is 'n fout wat ook deur Vue se dokumentasie en voorbeelde gedeel word.
Om dit makliker te maak om te verstaan โโwat u regtig moet doen om hierdie projek weer te skep, is die volgende stappe:
1. Voeg 'n skrif met verwysing na vue.js by
Vir spoedoptimalisering is dit die beste om dit na al die bladsye-inhoud in te sluit, maar net voor die sluiting van die kenteken in die HTML-bron. U kan ook ander bladsybronne laai in hierdie afdeling, en die volgorde van die laaiprioriteit bepaal watter volgorde u elke bron moet invoeg.
Hier is 'n voorbeeld van die insluit van vue.js van 'n CDN:
En hier is 'n voorbeeld van die insluit van vue.js van 'n gids op u eie bediener:
Sonder hierdie verwysing na vue.js, kan niks met Vue verband hou nie.
2. Voeg die Vue-komponente in u HTML-liggaam
Dit is wat met hierdie kode aangaan:
Vir nou maak dit nie veel sin nie, maar die Vue-deel is die leรซ "demo-grid" -element, plus die toevoeging van 'n "v-richtlijn" tot die invoer van die navraag (in hierdie geval is dit 'v-model'). โ, Wat gebruik word om Vue-kode te bind om insette te vorm).
3. As die projek 'n komponentsjabloon benodig, voeg dit dan by die HTML-liggaam
Hierdie gedeelte van die kode is ongewoon, omdat dit soos 'n gewone HTML binne 'n skrip-etiket lyk, wat die meeste HTML-bewerkingsagteware sal verwar (let op dat die kleure op sommige plekke verkeerd is).
4. Voeg die Vue-instansie by
Dit moet een van die laaste dinge wees wat op die bladsy verskyn, omdat dit 'n dinamiese weergawetak uitvoer. Dit bied 'n paar optimeringsvoordele as dit vroeรซr op die bladsy gevoeg word.
- Reรซl 46 bepaal dat die blaaier 'n komponent op die bladsy met die naam 'demo-rooster' moet soek, en lyn 47 bepaal dat '# rooster-sjabloon' moet gebruik word as die sjabloon vir die komponent (dit is die sjabloonkode wat by stap gevoeg is 3 van reรซl 9 tot reรซl 30).
- 'N Blok van lyn 48 tot lyn 52 definieer die eienskappe van die komponent.
- Die reรซls 53 tot 62 definieer 'n funksie om die data in die tabel te sorteer.
- Die reรซls 63 tot 85 definieer 'n funksie vir die filter van data (uit die resultate in die soektog).
- Die reรซls 86 tot 90 definieer 'n funksie om die woorde in 'n datastel te kapitaliseer.
- In reรซl 91 tot 97 word die metode om data te sorteer bepaal.
5. Voeg die bekendstellingskode by voor die sluitingsskrif-etiket
As u stappe 1 tot 4 voltooi het en die lรชer in die blaaier oopgemaak het, sal u net die soekkassie en niks meer sien nie. Dit is omdat alles wat nodig is om die tafel te bou, gedefinieรซr is, maar nie geskep is nie. In stap 5 voeg ons dus die kode by wat eintlik die tabel skep wat deur al die vorige stappe gedefinieer is.
- Lyn 100 skep 'n nuwe Vue-objek.
- Reรซl 101 spesifiseer aan watter element die aksie moet bind.
- Lyn 102 tot 111 verskaf die objekdata wat aan die element gebind sal word.
toets
Nadat u die vereiste objek gedefinieรซr en geskep het, is u nou gereed om die resultaat te toets. Berei voor om onderbewus te wees, want dit is wat u in die blaaier moet sien:
Wat gaan aan? Waarom is dit so vervelig? Dit is omdat daar geen stilering toegepas word nie. As ons die standaardstylering van die JSFiddle-voorbeeld gebruik, sal die tabel so lyk:
As u enigiets in die soekkassie tik (nie as hoofletters sensitief nie), word die resultate dienooreenkomstig gefiltreer:
Deur op 'n kolomkop te klik, kan u die volgorde van die skerm verander. Deur byvoorbeeld op die kolomkop "Power" te klik, word die resultate verander om in die volgorde van die krag te verskyn.
Verbetering en aanpassing
Nog 'n probleem met raamwerkvoorbeelde is dat dit gewoonlik nie veel insluit nieformatioon om iemand wat nie met die kodebasis vertroud is nie te help om uit te vind hoe om in die veld toe te pas wat hulle in die voorbeeld sien. Vue doen 'n wonderlike werk in vergelyking met Bootstrap (wat berug is onder-informative), maar laat steeds baie onbeantwoorde vrae.
Hier is 'n paar veranderinge wat ons aan hierdie toepassing kan aanbring om te verander hoe dit lyk en wat dit doen:
- Stileer die tafel as 'n Bootstrap striped tafel
- Verander die aantal kolomme
- Verander die data na iets heeltemal anders
1. Bootstrap voeg
2. Verpak die element in 'n Bootstrap-tabel
3. Pas die wortelelement aan om die Bootstrap-uitlegmodel te gebruik
4. Herpyl die pyltjies
5. Wysiging van die data
6. Toets
- Ongefilter en ongesorteer
- Gesorteer volgens richtlijn (stygende)
- Gesorteer volgens Gebruik vir (stygende)
- Gefiltreer vir 'voorwaardelik'
- Gefiltreer vir "voorwaardelik" en gesorteer volgens richtlijn (opgaande)
Harde Gedagtes
Wat blykbaar uit hierdie voorbeelde blyk, was dat ons twee toepassings gebou het met 'n baie verskillende voorkoms en inhoud uit 'n gewone kode. Met Vue is dit baie maklik om u kode oor veelvuldige projekte te hergebruik en potensieel aansienlike tydbesparings te geniet.
opskrif van hoofde met vergunning van Aleksandar Savic
Kommentaar Kommentaar