Vue.js Komponenter

Vue.js er et progressivt javascript-rammeverk, som brukes til å bygge brukergrensesnitt (brukergrensesnitt) og SPAer (applikasjoner med én side). Vi kan begynne å bygge webapplikasjoner i Vue.js med grunnleggende kunnskap om HTML, CSS og Javascript. Vue.js er bygget ved å kombinere de beste funksjonene fra allerede eksisterende Angular og react Frameworks. Utviklere elsker å kode og føle frihet og komfort mens de bygger applikasjoner i Vue.js.

Denne komponentbaserte tilnærmingen ble i utgangspunktet inspirert av og plukket fra ReactJS. Vi skriver kode i form av komponenter slik at vi kan importere komponenten og bruke den igjen hvor vi trenger den. Vue.js tilbyr en enkeltfilskomponent, noe som gjør den til en løst koblet og gjenbrukbar kode.

Vue.js tilbyr den beste komponentbaserte tilnærmingen, som hva en utvikler trenger; han kan finne den i en singel .visningsfil. Utviklere føler seg så komfortable og rolige når de ikke trenger å bekymre seg for eller ta vare på den ekstra strukturen til en komponent.

I denne artikkelen vil vi se på enkeltfilkomponenten, som har en .visuell utvidelse. Så, la oss se på et veldig enkelt Vue-komponenteksempel og forstå det.

Dette er et veldig enkelt og grunnleggende eksempel på en Vue-komponent. Der vi kan se at koden er delt inn i tre lag. Denne trelags syntaksen er den beste delen av Vue.js. Det tilfredsstiller skillet mellom bekymring og likevel å være i en singel .visningsfil. Vi har vår mal (HTML), logikk i Javascript og styling inne i en komponent.

• Mal
• Manus
• Stil

Mal

I denne malkoden skriver vi HTML-koden vår. Vi kan også binde variabler i dette ved hjelp av Vue.js databindende syntaks, og vi kan også legge til noen andre funksjoner i dette ved å bruke Vue.js ga syntaks for de respektive funksjonene.

Manus

Dette er delen der vi kan skrive logikken til komponenten i javascript ved å følge syntaksen til Vue.js. Alle funksjonene og logikken til en komponent går her. For eksempel,

• Importerer andre komponenter og pakker som trengs.
• Variabel erklæring
• Metoder / funksjoner
• Livssyklus kroker
• Beregnede eiendommer og overvåkere
• Og så videre…

Stil

Det er her vi skriver stylingen i CSS av komponenten, eller vi kan bruke hvilken som helst forprosessor vi vil bruke.

Dette er bare et glimt av en komponent i Vue.js. La oss ta en titt på bruken, organisasjonen og dataflyten mellom komponentene litt.

Importer og bruk komponenter

For å bruke komponenten, må vi først importere komponenten. Ellers hvordan kan Vue.js vet om det? Vi kan ganske enkelt importere en komponent ved å legge til en "Import" -uttalelse i begynnelsen av skriptekoden og erklære den komponenten i "komponenter" -objektet, ved hjelp av følgende syntaks.

Etter at vi har importert komponenten, kan vi bruke den i malen slik