Vue.js je progresivno ogrodje javascripta, ki se uporablja za izdelavo uporabniških vmesnikov (uporabniški vmesniki) in SPA-jev (aplikacije na eni strani). V Vueju lahko začnemo graditi spletne aplikacije.js z osnovnim znanjem HTML, CSS in Javascripta. Vue.js je zgrajen tako, da združuje najboljše funkcije iz že obstoječih ogrodja Angular and response. Razvijalci radi gradijo programe v Vueju in se počutijo svobodno in udobno.js.
Ta pristop, ki temelji na komponentah, je bil v osnovi navdihnjen in izbran iz ReactJS. Kodo napišemo v obliki komponent, da jo lahko uvozimo in ponovno uporabimo, kjer koli jo potrebujemo. Vue.js ponuja komponento z eno datoteko, zaradi česar je ohlapno povezana in uporabna koda.
Vue.js ponuja najboljši pristop, ki temelji na komponentah, na primer vse, kar razvijalec potrebuje; lahko ga najde v enem samem .datoteka vue. Razvijalci se počutijo tako udobno in sproščeno, ko jim ni treba skrbeti ali skrbeti za dodatno strukturo komponente.
V tem članku si bomo ogledali komponento z eno datoteko, ki ima .razširitev vue. Torej, poglejmo si zelo preprost primer komponente Vue in ga razumemo.
message Svet
To je zelo preprost in osnovni primer komponente Vue. V katerem lahko vidimo, da je koda razdeljena na tri plasti. Ta troslojna sintaksa je najboljši del Vueja.js. Izpolnjuje ločitev skrbi, ki pa je še vedno v enem samem .datoteka vue. V komponenti imamo svojo predlogo (HTML), logiko v Javascriptu in slog.
- Predloga
- Skripta
- Slog
Predloga
V to oznako predloge napišemo kodo HTML. Tudi v tem lahko spremenljivke vežemo s pomočjo Vue.js, sintaksa vezave podatkov in v to lahko dodamo še nekatere druge funkcije s pomočjo Vue.js je zagotovil sintakso za posamezne funkcionalnosti.
Skripta
To je odsek, kjer lahko v javascript napišemo logiko komponente tako, da sledimo sintaksam Vue.js. Vse funkcionalnosti in logika komponente gredo sem. Na primer,
- Uvoz potrebnih drugih komponent in paketov.
- Deklaracija spremenljivke
- Metode / funkcije
- Kljuke v življenjskem ciklu
- Računalniške lastnosti in opazovalci
- In tako naprej…
Slog
Tu zapišemo slog v CSS komponente ali pa uporabimo kateri koli predprocesor, ki ga želimo uporabiti.
To je le vpogled v komponento v Vueju.js. Oglejmo si malo uporabo, organizacijo in pretok podatkov med komponentami.
Uvoz in uporaba komponent
Če želimo uporabiti komponento, jo moramo najprej uvoziti. V nasprotnem primeru, kako lahko Vue.js vedo o tem? Komponento lahko preprosto uvozimo tako, da na začetek oznake skripta dodamo stavek »Uvozi« in to komponento deklariramo v objektu »komponente« z uporabo naslednje sintakse.
Po uspešnem uvozu komponente jo lahko uporabimo v predlogi, kot je ta
Tako enostavno lahko komponento uvozimo in uporabimo v kateri koli drugi komponenti.
Organiziranje komponent
Tako kot katera koli druga aplikacija tudi organizacija Components deluje kot ugnezdeno drevo. Na primer preprosto spletno mesto, ki vključuje glavo, stransko vrstico in nekatere druge komponente v vsebniku. Organizacija komponente bi bila takšna.
Slika od Vue.js Uradni dokumenti
Pretok podatkov med komponentami
Med komponentama sta lahko dve vrsti pretoka podatkov: Nadrejena komponenta za podrejeno komponento
Podatke iz nadrejene komponente lahko podrejeni podrejeni komponenti pošljemo s pomočjo rekvizitov: Podrejena komponenta nadrejeni komponenti
Podatke lahko pošljemo tako, da oddajamo dogodek iz komponente Child in ga poslušamo na drugem koncu (Nadrejena komponenta).
Zavijanje
V tem članku smo preživeli celo pot razumevanja osnovne komponente v Vueju.js na njegovo uporabo, njegovo hierarhijo, organizacijo in izvajanje uvoza, uporabe in znanja o komunikaciji med komponentami. Ta članek zajema veliko področja uporabe komponent, vendar obstaja veliko poglobljenega znanja o komponentah. Torej, vas prosimo, da obiščete Vue.js Uradni dokumenti za več informacij.