Vue.js komponentai

Vue.js yra progresyvi „javascript“ sistema, naudojama kuriant vartotojo sąsajas (vartotojo sąsajas) ir SPA (vieno puslapio programas). Mes galime pradėti kurti žiniatinklio programas „Vue“.js su pagrindinėmis HTML, CSS ir „Javascript“ žiniomis. Vue.„js“ sukurtas derinant geriausias jau esamų „Angular“ ir „reagavimo rėmų“ savybes. Kurdami programas „Vue“, kūrėjai mėgsta koduoti ir jaučia laisvę bei komfortą.js.

Šį komponentais pagrįstą požiūrį iš esmės įkvėpė ir pasirinko „ReactJS“. Rašome kodą komponentų pavidalu, kad galėtume importuoti tą komponentą ir naudoti jį visur, kur mums to reikia. Vue.„js“ siūlo vieno failo komponentą, todėl jis yra laisvai sujungtas ir daugkartinio naudojimo kodas.

Vue.js siūlo geriausią komponentais pagrįstą metodą, kaip ir bet kokį kūrėjui reikalingą; jis gali tai rasti viename .vue failas. Kūrėjai jaučiasi taip patogiai ir lengvai, kai jiems nereikia jaudintis ar rūpintis papildoma komponento struktūra.

Šiame straipsnyje mes apžvelgsime vieno failo komponentą, kuris turi .vue pratęsimas. Taigi, pažvelkime į labai paprastą „Vue“ komponento pavyzdį ir jį supraskime.

Tai labai paprastas ir pagrindinis „Vue“ komponento pavyzdys. Kuriame matome, kad kodas yra padalintas į tris sluoksnius. Ši trijų sluoksnių sintaksė yra geriausia „Vue“ dalis.js. Tai patenkina rūpesčio atskyrimą, tačiau yra vienas .vue failas. Mes turime savo šabloną (HTML), logiką „Javascript“ ir stilių komponento viduje.

• Šablonas
• Scenarijus
• Stilius

Šablonas

Šioje šablono žymoje rašome savo HTML kodą. Mes taip pat galime susieti kintamuosius naudodami „Vue“.js duomenis susiejančią sintaksę, ir mes taip pat galime pridėti keletą kitų funkcijų, naudodami „Vue“.js pateikė atitinkamų funkcijų sintaksę.

Scenarijus

Tai skyrius, kuriame mes galime parašyti komponento logiką „javascript“, sekdami „Vue“ sintakses.js. Čia pateikiamos visos komponento funkcijos ir logika. Pavyzdžiui,

• Reikalingi kiti komponentai ir paketai.
• Kintama deklaracija
• Metodai / funkcijos
• Gyvenimo ciklo kabliukai
• Apskaičiuotos savybės ir stebėtojai
• Ir taip toliau…

Stilius

Čia komponento stilių rašome CSS arba galime naudoti bet kurį norimą naudoti išankstinį procesorių.

Tai tik žvilgsnis į „Vue“ komponentą.js. Pažvelkime į naudojimą, organizavimą ir duomenų srautą tarp komponentų.

Importuoti ir naudoti komponentus

Norėdami naudoti komponentą, pirmiausia turime importuoti komponentą. Priešingu atveju, kaip gali Vue.js apie tai žino? Komponentą galime tiesiog importuoti pridėdami sakinį „Importuoti“ scenarijaus žymos pradžioje ir deklaruodami tą komponentą objekte „components“, naudodami šią sintaksę.

Sėkmingai importavę komponentą, galime jį naudoti tokiame šablone