Vue.js Komponenter

Vue.js er en progressiv javascript-ramme, der bruges til at oprette brugergrænseflader (brugergrænseflader) og SPA'er (applikationer med en side). Vi kan begynde at opbygge webapplikationer i Vue.js med den grundlæggende viden om HTML, CSS og Javascript. Vue.js er bygget ved at kombinere de bedste funktioner fra allerede eksisterende kantede og reagerende rammer. Udviklere elsker at kode og føle frihed og komfort, mens de bygger applikationer i Vue.js.

Denne komponentbaserede tilgang blev dybest set inspireret af og valgt fra ReactJS. Vi skriver kode i form af komponenter, så vi kan importere komponenten og genbruge den, uanset hvor vi har brug for den. Vue.js tilbyder en enkeltfilskomponent, hvilket gør den til en løst koblet og genanvendelig kode.

Vue.js tilbyder den bedste komponentbaserede tilgang, ligesom hvad en udvikler har brug for; han kan finde det i en enkelt .vue-fil. Udviklere føler sig så behagelige og rolige, når de ikke behøver at bekymre sig om eller tage sig af den ekstra struktur af en komponent.

I denne artikel vil vi se på enkeltfilskomponenten, som har en .vue-udvidelse. Så lad os se på et meget simpelt Vue-komponenteksempel og forstå det.

Dette er et meget simpelt og grundlæggende eksempel på en Vue-komponent. I hvilken vi kan se, at koden er opdelt i tre lag. Denne syntaks i tre lag er den bedste del af Vue.js. Det tilfredsstiller adskillelsen af ​​bekymring og alligevel i en enkelt .vue-fil. Vi har vores skabelon (HTML), logik i Javascript og styling inde i en komponent.

• Skabelon
• Manuskript
• Stil

Skabelon

I dette skabelonmærke skriver vi vores HTML-kode. Vi kan også binde variabler i dette ved hjælp af Vue.js databindende syntaks, og vi kan også tilføje nogle andre funktioner i dette ved hjælp af Vue.js leverede syntaks for de respektive funktionaliteter.

Manuskript

Dette er det afsnit, hvor vi kan skrive komponentens logik i javascript ved at følge syntaksen for Vue.js. Alle funktionaliteter og logik i en komponent går her. For eksempel,

• Import af andre nødvendige komponenter og pakker.
• Variabel erklæring
• Metoder / funktioner
• Livscyklus kroge
• Beregnede egenskaber og overvågere
• Og så videre…

Stil

Det er her, vi skriver stylingen i CSS for komponenten, eller vi kan bruge en hvilken som helst forprocessor, vi vil bruge.

Dette er bare et glimt af en komponent i Vue.js. Lad os se lidt på brugen, organisationen og datastrømmen mellem komponenter.

Import og brug komponenter

For at bruge komponenten skal vi først importere komponenten. Ellers hvordan kan Vue.js kender til det? Vi kan simpelthen importere en komponent ved at tilføje en "Import" -erklæring i begyndelsen af ​​scriptetiketten og erklære den komponent i "komponenter" -objektet ved hjælp af følgende syntaks.

Efter at have importeret komponenten med succes, kan vi bruge den i skabelonen som denne