Vue.js Komponenter

Vue.js är ett progressivt javascript-ramverk som används för att bygga användargränssnitt (användargränssnitt) och SPA (enkelsidiga applikationer). Vi kan börja bygga webbapplikationer i Vue.js med grundläggande kunskaper om HTML, CSS och Javascript. Vue.js är byggd genom att kombinera de bästa funktionerna från redan existerande ramar för Angular och react. Utvecklare älskar att koda och känna frihet och komfort när de bygger applikationer i Vue.js.

Detta komponentbaserade tillvägagångssätt inspirerades i princip av och valdes från ReactJS. Vi skriver kod i form av komponenter så att vi kan importera den och återanvända den vart vi behöver den. Vue.js erbjuder en komponent med en fil, vilket gör den till en löst kopplad och återanvändbar kod.

Vue.js erbjuder det bästa komponentbaserade tillvägagångssättet, som vad en utvecklare behöver; han kan hitta den i en singel .vue-fil. Utvecklare känner sig så bekväma och lugna när de inte behöver oroa sig för eller ta hand om den extra strukturen hos en komponent.

I den här artikeln kommer vi att titta på komponenten med en fil, som har en .vue-förlängning. Så låt oss ta en titt på ett mycket enkelt Vue-exempelsexempel och förstå det.

Detta är ett mycket enkelt och grundläggande exempel på en Vue-komponent. I vilken vi kan se att koden är uppdelad i tre lager. Denna treskiktssyntax är den bästa delen av Vue.js. Det tillfredsställer åtskillnaden mellan oro och är i en enda .vue-fil. Vi har vår mall (HTML), logik i Javascript och styling inuti en komponent.

• Mall
• Manus
• Stil

Mall

I den här malltaggen skriver vi vår HTML-kod. Vi kan också binda variabler i detta med Vue.js databindande syntax, och vi kan också lägga till några andra funktioner i detta med Vue.js tillhandahöll syntax för respektive funktionalitet.

Manus

Detta är avsnittet där vi kan skriva komponentens logik i javascript genom att följa syntaxerna för Vue.js. Här går alla funktioner och logik hos en komponent. Till exempel,

• Importera andra komponenter och paket som behövs.
• Variabel deklaration
• Metoder / funktioner
• Livscykel krokar
• Beräknade egenskaper och tittare
• Och så vidare…

Stil

Det är här vi skriver stylingen i CSS för komponenten, eller så kan vi använda vilken förprocessor vi vill använda.

Detta är bara en glimt av en komponent i Vue.js. Låt oss ta en titt på användningen, organisationen och dataflödet mellan komponenterna lite.

Importera och använd komponenter

För att använda komponenten måste vi först importera komponenten. Annars, hur kan Vue.js vet om det? Vi kan helt enkelt importera en komponent genom att lägga till ett "Importera" -uttalande i början av skripttaggen och förklara den komponenten i "komponenter" -objektet med följande syntax.

Efter att ha importerat komponenten framgångsrikt kan vi använda den i mallen så här