Manapság annyi JavaScript-keretrendszer létezik, hogy nehéz lehet mindegyiket nyomon követni, és egyáltalán nem valószínű, hogy valaki teljes egészében elsajátítja őket. A legtöbbünk számára ez azt jelenti, hogy meg kell válogatnunk, hogy mely fejlesztési keretek között fektetünk időt a tanulásba.
Ebben a cikkben gyorsan áttekintjük a Vue.js-t, így eldöntheti, hogy valószínűleg megfelel-e azoknak a projekteknek, amelyeken általában dolgozik, és hogy megfelelő-e az Ön számára.
Mi az a Vue.js?
Bár hagyományosan nem nagybetűvel írják, a „Vue” valójában a Visual Understanding Environment rövidítése. Fő célja a webalkalmazások fejlesztésének megkönnyítése a kód bonyolultságának csökkentésével. Sokat hasonlít a React.js-hez, de a Vue jelenlegi verziója gyorsabban jelenik meg, mint a React, és hatékonyabbnak tűnik.
Nehéz megtanulni a Vu-t?
Ha már tapasztalt kódoló vagy, nem okozhat nagy nehézséget a Vue használatának megkezdése, de nem lenne helyes kezdő nyelvként leírni. Szüksége van némi tapasztalatra a HTML, a CSS és a JavaScript használatában, hogy bármi praktikusat építsen velük.
A Vue tanulási görbéje kicsit kevésbé meredek, mint a React esetében, és sokkal kevésbé meredek, mint az Angular esetében. Pontosan kijelenthető tehát, hogy a Vue viszonylag könnyen megtanulható a többi népszerű fejlesztési keretrendszerhez képest.
Hogyan segíti a Vue a célok elérését?
Ez egy kicsit változik attól függően, hogy valójában mi a célja, de általában kódblokkokat köt a HTML div-ekhez. Ez a módszer megkönnyíti az interaktivitás és a dinamikus tartalom bevezetését, mint a hagyományos HTML, CSS és JavaScript használatával.
Másrészt, nem igazán tehet többet a Vue-ban, mint amennyit a hagyományosabb módszerek használatával tehetne. A Vue használata egyszerűen arról szól, hogy megkönnyítsük a dolgunkat a fejlesztési fázisban, de nincs nagy hatása a végeredményre, eltekintve a keretkód betöltése miatti kisebb teljesítményhatásoktól.
A Vue másik előnye, hogy modularitást biztosít, ami azt jelenti, hogy több projektben újra felhasználhatja a kifejlesztett összetevőket.
Van a Vue-nak valami klassz trükkje?
Minden bizonnyal igen, és ezek közül a legjobb a beépített átmeneti effektusok, amelyek lehetővé teszik, hogy átvegye az irányítást a többi felettwise nagyon kódintenzív CSS- és JavaScript-struktúrák legyenek, csak egy-két kódsort használva. Ezzel időt és erőfeszítést takaríthat meg az alkalmazások létrehozásakor.
Egy másik hasznos funkció a natív renderelés bizonyos eszköztípusokhoz, például Androidhoz és iOS-hez, így sok extra munka nélkül finomhangolhatja alkalmazásait azokra az eszközökre, amelyeken futnak.
Az első lépések
Mint korábban említettük, a Vue-t könnyű megtanulni, de nem kezdő nyelv. Még mindig tudnia kell, hogyan kell eligazodni egy kódblokkon belül.
A probléma az, hogy a legtöbb keretrendszerhez hasonlóan a dokumentáció nagyon lusta, és főként arra szolgál, hogy meggyőzze a használatáról. A dokumentációban sokkal kevesebb figyelmet fordítanak annak elmagyarázására, hogyan működik minden, vagy miért csinálja a dolgokat bizonyos módon. Gyakorlatilag minden valaha készített hivatalos keretpélda kihagyja a létfontosságú elemetformation, amelyet órákig kell turkálnia, hogy felfedezze. Ez egy hiba, amelyet a Vue dokumentációja és példái is megosztanak.
Annak érdekében, hogy könnyebben megértse, mit kell valójában tennie a projekt újbóli létrehozásához, a következő lépések szükségesek:
1. Adjon hozzá egy vue.js-re hivatkozó szkriptet
A sebesség optimalizálása érdekében a legjobb, ha ezt az oldal teljes tartalma után, de közvetlenül a záró body címke előtt szerepelteti a HTML-forrásban. Ebben a szakaszban más oldal-erőforrások is betölthetők, és a betöltési prioritás sorrendje határozza meg, hogy milyen sorrendben kell beilleszteni az egyes erőforrásokat.
Íme egy példa a vue.js CDN-ből való felvételére:
És itt van egy példa a vue.js fájl felvételére a saját szerverén lévő könyvtárból:
A vue.js-re való hivatkozás nélkül semmi sem történhet a Vue-val kapcsolatban.
2. Adja hozzá a Vue összetevőket a HTML törzséhez
Ez történik ezzel a kóddal:
Egyelőre nincs sok értelme, de a Vue rész az üres „demo-grid” elem, plusz egy „v-direktíva” hozzáadása a lekérdezési bemenethez (jelen esetben ez „v-modell” ”, amely a Vue kód kötésére szolgál bemenetek létrehozásához).
3. Ha a projekthez összetevősablonra van szükség, adja hozzá a HTML törzséhez
A kódnak ez a része szokatlan, mert úgy néz ki, mint egy szokványos HTML egy szkriptcímkén belül, ami összezavarja a legtöbb HTML-szerkesztő szoftvert (figyelje meg, hogy a jelzőszínek bizonyos helyeken hibásak).
4. Adja hozzá a Vue példányt
Ennek az egyik utolsó dolognak kell megjelennie az oldalon, mert dinamikus megjelenítési feladatot hajt végre. Ez bizonyos optimalizálási előnyöket biztosít az oldal korábbi hozzáadásához képest.
- A 46. sor meghatározza, hogy a böngészőnek egy „demo-grid” nevű komponenst kell keresnie az oldalon, a 47. sor pedig azt, hogy a „#grid-template” legyen az összetevő sablonja (ez a lépésben hozzáadott sablonkód 3 a 9. sortól a 30. sorig).
- A 48. sortól az 52. sorig terjedő blokk határozza meg az összetevő tulajdonságait.
- Az 53-62. sorok egy függvényt határoznak meg a táblázatban lévő adatok rendezésére.
- A 63-85. sorok egy függvényt határoznak meg az adatok szűrésére (a keresési lekérdezés eredményeiből).
- A 86–90. sorok egy függvényt határoznak meg az adatkészletben lévő szavak nagybetűs írására.
- A 91–97. sorok határozzák meg az adatok rendezésének módját.
5. Adja hozzá az indítókódot a záró szkriptcímke elé
Ha végrehajtotta az 1–4. lépéseket, és megnyitotta a fájlt a böngészőben, akkor csak a keresőmezőt látja, és semmi mást. Ennek az az oka, hogy minden, ami a tábla felépítéséhez szükséges, meg van határozva, de nem jött létre. Tehát az 5. lépésben hozzáadjuk azt a kódot, amely ténylegesen létrehozza az összes előző lépésben meghatározott táblát.
- A 100. sor új Vue objektumot hoz létre.
- A 101. sor határozza meg, hogy melyik elemhez kell kötni a műveletet.
- A 102–111. sorok megadják az elemhez kötődő objektumadatokat.
Tesztelés
A szükséges objektum meghatározása és létrehozása után készen áll az eredmény tesztelésére. Készülj fel a csalódottságra, mert ezt kell látnia a böngészőben:
Mi történik? Miért olyan unalmas? Ez azért van, mert nem alkalmaznak stílust. Ha a JSFiddle példából származó alapértelmezett stílust használjuk, a táblázat így fog kinézni:
Ha bármit beír a keresőmezőbe (nem különbözteti meg a kis- és nagybetűket), a találatok ennek megfelelően szűrhetők:
Egy oszlopfejlécre kattintva módosíthatja a megjelenítési sorrendet. Például, ha a „Tápellátás” oszlopfejlécre kattint, akkor a teljesítményszint szerinti sorrendben megjelennek az eredmények.
Javulás és alkalmazkodás
Egy másik probléma a keretpéldákkal, hogy általában nem tartalmaznak sokatformation segíteni valakinek, aki nem ismeri a kódbázist, hogy rájöjjön, hogyan alkalmazza a terepen a példában látottakat. A Vue nagyszerű munkát végez a Bootstraphez képest (ami köztudottan alul vanformative), de még mindig rengeteg megválaszolatlan kérdést hagy maga után.
Íme néhány változtatás, amelyet végrehajthatunk ezen az alkalmazáson, hogy megváltoztassuk annak megjelenését és működését:
- Stílusozd az asztalt Bootstrap-ként striped táblázat
- Módosítsa az oszlopok számát
- Módosítsa az adatokat valami teljesen másra
1. Bootstrap hozzáadása
2. Az elem becsomagolása egy Bootstrap táblába
3. A gyökérelem beállítása a Bootstrap elrendezési modell használatához
4. A nyilak újrastílusa
5. Az adatok módosítása
6. Tesztelés
- Szűrés nélküli és válogatás nélküli
- Irányelv szerint rendezve (növekvő sorrendben)
- Rendezés: Használt (növekvő)
- Szűrve a „feltételes” kifejezésre
- Szűrve „feltételes” és direktíva szerint rendezve (növekvő sorrendben)
Záró gondolatok
Remélhetőleg ezekből a példákból az derült ki, hogy egy közös kódszeletből két nagyon eltérő megjelenésű és tartalmú alkalmazást építettünk fel. A Vue segítségével nagyon könnyen újrafelhasználhatja a kódot több projektben, és potenciálisan jelentős időt takaríthat meg.
fejléckép jóvoltából Aleksandar Savic
Hozzászólások 0 válaszok