Vue.js er ör JavaScript fyrir ramma til að búa til endurnýjanlegan og viðbrögð hluti á vefsvæðinu þínu.
Framhliðarsamstæður eru mjög breytilegir bæði í stærð og umfangi, þar sem Vue.js stendur út er í lágmarks hönnun og einblína á aðlögunarhæfni. Þú hefur val um að byggja upp alla síðuna þína með því að nota Vue.js, bara að gera einn þáttur af vefsvæðinu þínu viðbrögð, eða eitthvað á milli. Vegna þessa er það mjög hægt að nálgast með grunnum námsferli.
Í þessari grein ætlum við að kíkja á kjarnaþætti Vue.js og hvernig á að fá skipulag og byrjað en fyrst skulum við líta á hvenær þú vilt nota framan ramma eins og Vue.js og hvers vegna .
Framhliðarmörk, eins og flestar rammar koma til abstrakt algengra verkefna, sameiginlega nefnara sem þú finnur á milli verkefna. Vue.js kemur sérstaklega að því að draga úr ferlinu við að búa til HTML hluti sem eru virk uppfærðar með Javascript.
Nokkrar af þeim sársaukapunkta sem Vue.js leysir fyrir þig er að búa til öflugt HTML, binda HTML-þættirnar við aðgerðir til að halda gögnum umfang og samhengi og fylgjast með hvenær HTML þarf að endurtaka sjálfkrafa.
Til dæmis, segjum að þú hafir síðu þar sem þú ert með virkan lista yfir nöfn. Þú gætir hafa skrifað kóða sem lítur svona út:
Þegar þú byggir upp HTML handvirkt - fyrir utan þá staðreynd að kóðinn verður fljótt erfitt að stjórna í stærri dæmi - það er engin raunveruleg tengsl milli gagna og mynda HTML. Ef fjölbreytni nöfn breytist verður þú að vera meðvitaður um það og endurreisa listann. Allt þetta er líka til að sýna aðeins dynamic gögn, ef þú vilt bæta við atburðasýningum eins og smellt er á smelli, í því skyni að spara svigrúm sem þú munt halda áfram að hnoða kóðann frekar og frekar í:
Með Vue.js er aðskilið HTML sem sniðmát sem sýnir hvað á að mynda byggt á gögnum sem gefnar eru og Vue.js mun gera það sjálfkrafa.
Þetta sama dæmi í Vue.js myndi líta út eins og eftirfarandi:
Við höfum fulla aðskilnað á milli HTML-atriðanna á JavaScript kóða og rökfræði JavaScript-kóðans sem gerir allt sjálfstætt og mikið viðráðanlegra. Við erum að fá smá á undan okkur þó að við skulum fara aftur og líta á hvernig kjarninn Vue.js nær þessu ...
Kjarni Vue.js skilgreinir þú fylgni milli HTML og nokkurra gagna og hvenær sem gögnin breytast verður HTML uppfært. Leiðin sem þetta virkar er þegar þú leggur inn Vue.js hluti sem þú sendir það nokkrar upplýsingar í formi JavaScript mótmæla, þá er þetta hlut breytt í stað eiginleika þess með trackable getter og setter aðferðir.
Vue.js greinir gögnin mótmæla á meðan að byggja HTML og sjá hvaða gögn þú notaðir til að gera mismunandi HTML-þætti inni. Notaðu þetta til að fylgjast með breytingum sem gerðar eru á gagnagreininni og vita nákvæmlega hvað á að uppfæra og hvenær.
Með svo mikla bindingu milli upplýsinganna og sjónarhornið einfaldar einfaldlega þróun framanáliggjandi forrita og lágmarkar villur vegna rangra framkvæmda. Þessi aðskilnaður áhyggjuefna gerir þér kleift að einblína á rökfræði umsóknarinnar án þess að þurfa að takast á við að uppfæra sjónarhornið yfirleitt.
Uppsetning fyrir Vue.js er eins einfalt og þar á meðal bókasafnið:
Nú eins og ég nefndi Vue.js app samanstendur af gögnum mótmæla og HTML sniðmát til að embed in gögnin. Svo fyrir fyrstu app okkar til að sjá Vue.js í aðgerð getum við bætt við body :
Í fyrsta lagi skilgreinum við div sem verður HTML sniðmát okkar fyrir Vue.js app okkar. Inni notum við tvöfalda handfangið fyrir gagnamiðlun í HTML.
Inni raunveruleg Vue.js app skilgreinir þú einfaldlega gögnin og tengir div sem frumefni fyrir forritið að bæði gefa til og nota sem sniðmátið. Næst, til viðbótar flare, hækkar við tíðni breytu á app okkar einu sinni á sekúndu.
Það er allt sem þar er að búa til Vue.js forrit, opna þetta í vafranum þínum, þú munt sjá síðuna sjálfkrafa uppfærðar í hvert skipti sem við uppfærum gögnum eignarinnar.
Nú í flestum forritum þar sem DOM bregst við gögnum sem eru breytt er aðeins helmingur sögunnar, þú þarft einnig leið til að uppfæra gögnin, Vue.js sér um þetta með viðburðum og aðferðum. Aðferðir eru geymdar virkar í tengslum við Vue.js forritið þitt.
Við skulum uppfæra gegn dæmi okkar til að bæta við hæfileikanum til að hefja og stöðva myndatökuna í stað þess að það einfaldlega keyra:
Í HTML sniðmáti bættum við hnappi til að byrja og stöðva tónann, til að ná þessu þurfum við að nota textann á hnappinn til að vera öflugur og við þurfum atburðaraðgerð til að smella á hnappinn.
Til að lýsa atburði í Vue.js á þáttur, forskeyti þú heiti venjulegs HTML DOM viðburða með v-on: , svo mouseover atburður verður v-on:mouseover eða keyup atburður verður v-on:keyup . Í okkar fordæmi erum við að nota v-on:click eigindi til að takast á við click atburður.
Eitthvað sem þú hefur kannski tekið eftir er að fyrir texta hnappsins erum við að kalla aðferð í stað þess að vísa aðeins til geymdrar eignar. Í mörgum tilvikum eru gögnin sem þú geymir ekki endilega á sniðinu sem þú vilt birta það á síðunni. Hægt er að nota aðferðir hér til að vinna úr gögnum og allar viðbrögðin sem þú færð frá eiginleikum eiga við þegar aðferðir eru notaðar, ef undirliggjandi gögn breytast mun sniðið uppfæra í samræmi við það.
Í Vue.js appnum höfum við nú nýja eign sem geymir tímabilsbreytuna og nokkrar aðferðir. The toggle aðferð sem er bundin við smellahnappinn á hnappinum athugar hvort eða ekki timer eign er stillt, byrjar eða stöðvar tímamælirinn og counterAction aðferð er notuð til að sýna rétta aðgerðina í hnappinum, aftur á grundvelli tímabilsbreytunnar.
Þar sem skiptaaðferðin breytir klukkustundareiginleikanum og mótsagnaraðferðin , sem er í Vue.js sniðmátinni, notar tímatölvueiginleikann, er alltaf kallað sniðmátið endurtekið texta hnappsins.
Það er rétt að átta sig á því að jafnvel þótt við höfum ekki upphafsgildið fyrir klukkustundareignina , þarf það að vera lýst þegar búið er að búa til Vue.js app. Ef þú lýsir ekki eigninni frá upphafi verður eignin ekki viðbrögð og mun ekki valda því að HTML sé endurreist þegar það er breytt.
Í dæmi okkar er sýnin uppfærð einu sinni í sekúndu meðan tímamælinn er í gangi og svo einu sinni í sekúndu mun mótunaraðferðin okkar einnig hringja þegar hnappurinn er endurraunaður. Vue.js leyfir okkur að hagræða þessu með því að flokka niðurstöðu aðferðarinnar og aðeins muna aðferðina ef undirliggjandi gögn sem eru notuð sérstaklega í aðferðinni eru breytt. Þetta er einnig gagnlegt ef þú notar sömu reiknaðan eign á mörgum stöðum á síðunni, í stað þess að vinna úr gildi mörgum sinnum, með því að flokka verðmæti geturðu dregið úr kostnaði.
Við skulum uppfæra dæmi til að innihalda afritaðar eignir:
Helstu munurinn fyrir utan að skyndiminni er þessi aðferðir undir computed er vísað til sem eiginleiki í stað aðferða, þannig að í HTML sniðmátið þurftum við að fjarlægja sviga frá counterAction .