Vue.js komponenty

Vue.js je progresívny javascriptový rámec, ktorý sa používa na vytváranie používateľských rozhraní (používateľských rozhraní) a SPA (jednostránkových aplikácií). Môžeme začať vytvárať webové aplikácie vo Vue.js so základnými znalosťami HTML, CSS a Javascript. Vue.js je zostavený kombináciou najlepších funkcií z už existujúcich rámcov Angular a React. Vývojári radi kódujú a pri vytváraní aplikácií vo Vue cítia slobodu a pohodlie.js.

Tento prístup založený na komponentoch bol v podstate inšpirovaný a vybraný z ReactJS. Kód píšeme vo forme komponentov, aby sme ho mohli importovať a znovu použiť kdekoľvek potrebujeme. Vue.js ponúka komponent jedného súboru, čo z neho robí voľne spojený a opakovane použiteľný kód.

Vue.js ponúka najlepší komponentový prístup, ako čokoľvek, čo vývojár potrebuje; môže ho nájsť v singli .súbor vue. Vývojári sa cítia tak pohodlne a v pohode, keď sa nemusia starať o dodatočnú štruktúru súčasti alebo sa o ňu starať.

V tomto článku sa pozrieme na jednosúborový komponent, ktorý má .rozšírenie vue. Pozrime sa teda na veľmi jednoduchý príklad súčasti Vue a pochopme ho.

Toto je veľmi jednoduchý a základný príklad súčasti Vue. Na ktorom vidíme, že kód je rozdelený do troch vrstiev. Táto trojvrstvová syntax je najlepšou súčasťou programu Vue.js. Uspokojuje oddelenie obáv, ale je v jednom .súbor vue. Vo vnútri súčasti máme našu šablónu (HTML), logiku v jazyku Javascript a styling.

• Šablóna
• Scenár
• Štýl

Šablóna

V tejto značke šablóny napíšeme náš HTML kód. Aj v tomto môžeme viazať premenné pomocou Vue.js syntax viazania údajov a pomocou Vue do nej môžeme pridať aj niektoré ďalšie funkcie.Spoločnosť JS poskytla syntax pre príslušné funkcionality.

Scenár

Toto je časť, kde môžeme napísať logiku súčasti v JavaScripte podľa syntaxí Vue.js. Všetky funkcie a logika súčasti nájdete tu. Napríklad,

• Je potrebný import ďalších komponentov a balíkov.
• Deklarácia premennej
• Metódy / funkcie
• Háky životného cyklu
• Vypočítané vlastnosti a sledovatelia
• A tak ďalej…

Štýl

Tu píšeme štýl v CSS komponentu, alebo môžeme použiť akýkoľvek preprocesor, ktorý chceme použiť.

Toto je iba letmý pohľad na komponent vo Vue.js. Poďme sa trochu pozrieť na využitie, organizáciu a tok dát medzi komponentmi.

Importujte a používajte komponenty

Aby sme mohli komponent používať, musíme ho najskôr importovať. Inak, ako môže Vue.js viem o tom? Jednoducho môžeme importovať komponent pridaním príkazu „Import“ na začiatok značky skriptu a deklarovaním tohto komponentu v objekte „components“ pomocou nasledujúcej syntaxe.

Po úspešnom importovaní komponentu ho môžeme použiť v šablóne takto