Vue.JS -komponenter

Vue.JS er et progressivt JavaScript-rammeverk, som brukes til å bygge brukergrensesnitt (brukergrensesnitt) og spa (en-siders applikasjoner). 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 kantete og reagere rammer. Utviklere elsker å kode og føle frihet og komfort mens de bygger applikasjoner i Vue.JS.

Denne komponentbaserte tilnærmingen var i utgangspunktet inspirert av og plukket fra ReactJS. Vi skriver kode i form av komponenter slik at vi kan importere den komponenten og gjenbruke den uansett hvor vi trenger den. Vue.JS tilbyr en enkeltfilkomponent, 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 .vue -fil. Utviklere føler seg så komfortable og rolig når de ikke trenger å bekymre seg for eller ta seg av den ekstra strukturen til en komponent.

I denne artikkelen vil vi se på en-fil-komponenten, som har en .VUE -forlengelse. 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 tre-lags syntaks er den beste delen av Vue.JS. Det tilfredsstiller separasjon av bekymring, men likevel å være i en singel .vue -fil. Vi har malen vår (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 binde variabler i dette også ved å bruke VUE.JS Data-Binding Syntax, og vi kan legge til noen andre funksjoner i dette også ved å bruke VUE.JS ga syntaks for de respektive funksjonalitetene.

Manus

Dette er delen der vi kan skrive logikken til komponenten i JavaScript ved å følge syntaksene til Vue.JS. Alle funksjonalitetene og logikken til en komponent går hit. For eksempel,

• Importere andre komponenter og pakker som trengs.
• Variabel erklæring
• Metoder/funksjoner
• Livssyklus kroker
• Beregnede egenskaper og seere
• 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 se på bruk, organisering og dataflyt mellom komponenter litt.

Importere og bruke 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 skriptetoden og erklære den komponenten i "komponenter" -objektet, ved å bruke følgende syntaks.

Etter å ha importert komponenten med hell, kan vi bruke den i malen slik