Vue.js-componenten

Vue.js is een progressief javascript-framework dat wordt gebruikt om UI's (gebruikersinterfaces) en SPA's (toepassingen met één pagina) te bouwen. We kunnen beginnen met het bouwen van webapplicaties in Vue.js met de basiskennis van HTML, CSS en Javascript. Vue.js is gebouwd door de beste functies van reeds bestaande Angular en react Frameworks te combineren. Ontwikkelaars houden van coderen en voelen vrijheid en comfort tijdens het bouwen van applicaties in Vue.js.

Deze op componenten gebaseerde benadering is in feite geïnspireerd door en gekozen uit de ReactJS. We schrijven code in de vorm van componenten, zodat we die component kunnen importeren en hergebruiken waar we het nodig hebben. Vue.js biedt een component met één bestand, waardoor het een losjes gekoppelde en herbruikbare code is.

Vue.js biedt de beste op componenten gebaseerde benadering, zoals alles wat een ontwikkelaar nodig heeft; hij kan het in één vinden .vue-bestand. Ontwikkelaars voelen zich zo comfortabel en op hun gemak als ze zich geen zorgen hoeven te maken over de extra structuur van een onderdeel.

In dit artikel zullen we de component met één bestand bekijken, die een .vue-extensie. Laten we dus een heel eenvoudig voorbeeld van een Vue-component bekijken en het begrijpen.

Dit is een heel eenvoudig en eenvoudig voorbeeld van een Vue-component. Waarin we kunnen zien dat de code is verdeeld in drie lagen. Deze syntaxis met drie lagen is het beste deel van Vue.js. Het voldoet aan de scheiding van zorg en toch in één zijn .vue-bestand. We hebben onze sjabloon (HTML), logica in Javascript en styling in een component.

• Sjabloon
• Script
• Stijl

Sjabloon

In deze sjabloontag schrijven we onze HTML-code. We kunnen hierin ook variabelen binden met behulp van de Vue.js data-bindende syntaxis, en we kunnen hier ook enkele andere functionaliteiten aan toevoegen met behulp van de Vue.js leverde syntaxis voor de respectieve functionaliteiten.

Script

Dit is de sectie waar we de logica van de component in javascript kunnen schrijven door de syntaxis van Vue . te volgen.js. Alle functionaliteiten en logica van een component komen hier. Bijvoorbeeld,

• Andere benodigde componenten en pakketten importeren.
• Variabele declaratie
• Methoden/functies
• Levenscyclushaken
• Berekende eigenschappen en kijkers
• Enzovoorts…

Stijl

Hier schrijven we de styling in CSS van de component, of we kunnen elke preprocessor gebruiken die we willen gebruiken.

Dit is slechts een glimp van een onderdeel in Vue.js. Laten we eens kijken naar het gebruik, de organisatie en de gegevensstroom tussen componenten.

Componenten importeren en gebruiken

Om de component te gebruiken, moeten we eerst de component importeren. Anders, hoe kan Vue.js weet ervan? We kunnen eenvoudig een component importeren door een "Import" -instructie aan het begin van de scripttag toe te voegen en die component in het "componenten" -object te declareren, met behulp van de volgende syntaxis.

Nadat het onderdeel succesvol is geïmporteerd, kunnen we het als volgt in de sjabloon gebruiken