Vue.js komponenty

Vue.js je progresivní rámec javascript, který se používá k vytváření uživatelských rozhraní (uživatelská rozhraní) a SPA (jednostránkové aplikace). Můžeme začít vytvářet webové aplikace ve Vue.js se základními znalostmi HTML, CSS a Javascript. Vue.js je vytvořen kombinací nejlepších funkcí z již existujících rámců Angular a React. Vývojáři rádi kódují a cítí svobodu a pohodlí při vytváření aplikací ve Vue.js.

Tento komponentový přístup byl v zásadě inspirován a vybrán z ReactJS. Píšeme kód ve formě komponent, abychom mohli tuto komponentu importovat a znovu použít kdekoli potřebujeme. Vue.js nabízí komponentu s jedním souborem, což z ní činí volně spojený a opakovaně použitelný kód.

Vue.js nabízí nejlepší přístup založený na komponentách, jako cokoli, co vývojář potřebuje; najde to v jediném .soubor vue. Vývojáři se cítí tak pohodlně a pohodlně, když se nemusí starat o extra strukturu komponenty nebo se o ni starat.

V tomto článku se podíváme na komponentu s jedním souborem, která má .rozšíření vue. Pojďme se tedy podívat na velmi jednoduchý příklad komponenty Vue a pochopit ho.

Jedná se o velmi jednoduchý a základní příklad komponenty Vue. Ve kterém vidíme, že je kód rozdělen do tří vrstev. Tato třívrstvá syntaxe je nejlepší součástí aplikace Vue.js. Splňuje oddělení obav, přesto je v jednom .soubor vue. Máme naši šablonu (HTML), logiku v Javascriptu a styl uvnitř komponenty.

• Šablona
• Skript
• Styl

Šablona

V této značce šablony napíšeme náš HTML kód. Můžeme vázat proměnné i v tomto pomocí Vue.js syntaxe datové vazby a můžeme do ní přidat i další funkce pomocí Vue.js poskytl syntaxi pro příslušné funkce.

Skript

Toto je část, kde můžeme psát logiku komponenty v JavaScriptu podle syntaxí Vue.js. Zde najdete všechny funkce a logiku komponenty. Například,

• Je potřeba importovat další komponenty a balíčky.
• Proměnná deklarace
• Metody / funkce
• Háčky životního cyklu
• Vypočítané vlastnosti a hlídače
• A tak dále…

Styl

Zde píšeme styling v CSS komponenty, nebo můžeme použít jakýkoli preprocesor, který chceme použít.

Toto je jen letmý pohled na komponentu ve Vue.js. Pojďme se trochu podívat na využití, organizaci a tok dat mezi komponentami.

Import a používání komponent

Abychom mohli komponentu používat, musíme ji nejprve importovat. Jinak, jak může Vue.js o tom vím? Můžeme jednoduše importovat komponentu přidáním příkazu „Import“ na začátek značky skriptu a deklarováním této komponenty v objektu „komponenty“ pomocí následující syntaxe.

Po úspěšném importu komponenty ji můžeme použít v šabloně takto