V dnešní době existuje tolik JavaScriptových frameworků, že může být obtížné je všechny sledovat a rozhodně je nepravděpodobné, že by je někdo zvládl celé. Pro většinu z nás to znamená, že si budeme muset vybrat, do kterých vývojových rámců budeme investovat čas do učení.
V tomto článku se rychle podíváme na Vue.js, takže se můžete sami rozhodnout, zda je pravděpodobné, že bude vyhovovat typu projektů, na kterých obvykle pracujete, a zda se vám to zdá jako vhodné.
Co je Vue.js?
Ačkoli se obvykle nepíše velkými písmeny, „Vue“ je ve skutečnosti zkratka pro Visual Understanding Environment. Jeho hlavním účelem je usnadnit vývoj webových aplikací snížením složitosti kódu. Má mnoho společného s React.js, ale aktuální verze Vue se vykresluje rychleji než React a zdá se být efektivnější.
Je těžké se naučit Vue?
Pokud jste již zkušeným kodérem, neměli byste mít se začátkem s Vue velké potíže, ale popisovat jej jako jazyk pro začátečníky by nebylo správné. Abyste s ním mohli vytvořit něco praktického, musíte mít nějaké zkušenosti s HTML, CSS a JavaScriptem.
Křivka učení s Vue je o něco méně strmá než s Reactem a je mnohem méně strmá než s Angular. Dá se tedy přesně říci, že Vue se dá relativně snadno naučit ve srovnání s jinými populárními vývojovými frameworky.
Jak pomáhá Vue dosáhnout cílů?
Trochu se to liší v závislosti na tom, jaký je vlastně váš cíl, ale obecně platí, že bloky kódu vážete k divům HTML. Tato metodika usnadňuje zavádění interaktivity a dynamického obsahu než u běžného HTML, CSS a JavaScriptu.
Na druhou stranu ve Vue opravdu nemůžete udělat víc, než byste mohli pomocí konvenčnějších způsobů. Používání Vue je jednoduše záležitostí, která vám usnadní práci ve vývojové fázi, ale na konečný výsledek to nemá velký vliv, kromě menšího dopadu na výkon kvůli načítání kódu frameworku.
Další výhodou Vue je, že poskytuje modularitu, což znamená, že komponenty, které vyvíjíte, můžete znovu použít ve více projektech.
Má Vue v rukávu nějaké skvělé triky?
Určitě ano a nejlepší z nich jsou vestavěné přechodové efekty, které vám umožňují převzít kontrolu nad tím, co by jinéwise být velmi kódově náročné struktury CSS a JavaScript pomocí pouhého řádku nebo dvou kódu. To vám ušetří čas a námahu při vytváření aplikací.
Další užitečnou funkcí je nativní vykreslování pro konkrétní typy zařízení, jako je Android a iOS, takže můžete své aplikace doladit pro zařízení, na kterých běží, bez velké práce navíc.
Začínáme
Jak již bylo řečeno, Vue se snadno učí, ale není to jazyk pro začátečníky. Stále se musíte orientovat uvnitř bloku kódu.
Problém je v tom, že jako většina frameworků je dokumentace velmi líná a věnuje se hlavně tomu, aby vás přesvědčila, abyste ji používali. Mnohem menší pozornost je v dokumentaci věnována vysvětlení, jak vše funguje nebo proč děláte věci určitým způsobem. Prakticky každý příklad oficiálního rámce, který byl kdy vytvořen, vynechává zásadní významformation, do kterého se musíte hodiny prohrabávat, abyste je objevili. To je chyba sdílená také dokumentací Vue a příklady.
Abychom lépe porozuměli tomu, co skutečně musíte udělat, abyste znovu vytvořili tento projekt, jsou vyžadovány následující kroky:
1. Přidejte skript odkazující na vue.js
Pro optimalizaci rychlosti je nejlepší zahrnout to za veškerý obsah stránky, ale těsně před koncovou značku body ve zdrojovém kódu HTML. V této sekci se také mohou načítat další zdroje stránky a pořadí priority načítání určuje, v jakém pořadí byste měli jednotlivé zdroje vložit.
Zde je příklad zahrnutí vue.js z CDN:
A zde je příklad zahrnutí vue.js z adresáře na vašem vlastním serveru:
Bez tohoto odkazu na vue.js se nic souvisejícího s Vue nemůže stát.
2. Přidejte komponenty Vue do těla HTML
To je to, co se děje s tímto kódem:
Prozatím to nedává moc smysl, ale část Vue je prázdný prvek „demo-grid“ plus přidání „v-direktivy“ ke vstupu dotazu (v tomto případě je to „v-model“ “, který se používá pro vazbu kódu Vue pro vytváření vstupů).
3. Pokud projekt vyžaduje šablonu součásti, přidejte ji do těla HTML
Tato část kódu je neobvyklá, protože vypadá jako běžný HTML ve značce skriptu, což zmate většinu softwaru pro úpravu HTML (všimněte si, že barvy indikátoru jsou na některých místech špatné).
4. Přidejte instanci Vue
Toto by měla být jedna z posledních věcí, které se na stránce objeví, protože provádí úlohu dynamického vykreslování. To poskytuje určité výhody optimalizace oproti přidání dříve na stránku.
- Řádek 46 určuje, že prohlížeč by měl hledat komponentu na stránce s názvem „demo-grid“ a řádek 47 uvádí, že „#grid-template“ by měl být použit jako šablona pro komponentu (toto je kód šablony přidaný v kroku 3 od řádku 9 do řádku 30).
- Blok od řádku 48 do řádku 52 definuje vlastnosti součásti.
- Řádky 53 až 62 definují funkci pro řazení dat v tabulce.
- Řádky 63 až 85 definují funkci pro filtrování dat (z výsledků ve vyhledávacím dotazu).
- Řádky 86 až 90 definují funkci pro psaní velkých písmen ve slovech v sadě dat.
- Řádky 91 až 97 definují způsob řazení dat.
5. Přidejte spouštěcí kód před značku závěrečného skriptu
Pokud jste dokončili kroky 1 až 4 a otevřeli soubor v prohlížeči, uvidíte pouze vyhledávací pole a nic víc. To proto, že vše potřebné k sestavení tabulky bylo definováno, ale nebylo vytvořeno. V kroku 5 tedy přidáme kód, který ve skutečnosti vytvoří tabulku, která byla definována všemi předchozími kroky.
- Řádek 100 vytvoří nový objekt Vue.
- Řádek 101 určuje, ke kterému prvku se má akce vázat.
- Řádky 102 až 111 poskytují data objektu, která budou vázána na prvek.
Testování
Po definování a vytvoření požadovaného objektu jste nyní připraveni otestovat výsledek. Připravte se na to, že budete ohromeni, protože v prohlížeči byste měli vidět toto:
Co se děje? Proč je to tak nudné? Je to proto, že není použit žádný styl. Pokud použijeme výchozí styl z příkladu JSFiddle, bude tabulka vypadat takto:
Zadáním čehokoli do vyhledávacího pole (bez rozlišení velkých a malých písmen) budou výsledky odpovídajícím způsobem filtrovány:
Kliknutím na záhlaví sloupce můžete změnit pořadí zobrazení. Například kliknutím na záhlaví sloupce „Výkon“ změníte zobrazené výsledky v pořadí podle úrovně výkonu.
Zdokonalování a přizpůsobování
Dalším problémem s příklady rámců je, že obvykle nezahrnují mnohoformatpomoci někomu, kdo není obeznámen s kódovou základnou, zjistit, jak v terénu použít to, co vidí v příkladu. Vue odvádí skvělou práci ve srovnání s Bootstrapem (který je notoricky podprůměrnýformative), ale stále ponechává spoustu nezodpovězených otázek.
Zde je několik změn, které můžeme v této aplikaci provést, abychom změnili její vzhled a funkce:
- Styl tabulky jako Bootstrap striped tabulka
- Změňte počet sloupců
- Změňte data na něco úplně jiného
1. Přidání Bootstrapu
2. Zabalení prvku do tabulky Bootstrap
3. Úprava kořenového prvku pro použití modelu rozložení Bootstrap
4. Změna stylu šipek
5. Úprava dat
6. Testování
- Nefiltrované a netříděné
- Seřazeno podle směrnice (vzestupně)
- Seřazeno podle Použité pro (vzestupně)
- Filtrováno na „podmíněné“
- Filtrováno na „podmíněné“ a seřazeno podle směrnice (vzestupně)
Závěrečné úvahy
Doufejme, že to, co bylo z těchto příkladů zřejmé, bylo to, že jsme vytvořili dvě aplikace s velmi odlišným vzhledem a obsahem ze společné části kódu. S Vue je velmi snadné znovu použít váš kód ve více projektech a potenciálně si ušetřit čas.
obrázek v záhlaví se svolením Aleksandar Savic
Komentáře 0 Odpovědi