Phenquestions
Vue.js je progresivni javascript okvir koji se koristi za izradu korisničkog sučelja (korisničko sučelje) i SPA-a (aplikacije na jednoj stranici). U Vueu možemo početi graditi web aplikacije.js s osnovnim znanjem HTML-a, CSS-a i Javascripta. Vue.js je izrađen kombinirajući najbolje značajke već postojećih Angular i Frame Frame. Programeri vole kodirati i osjećaju slobodu i udobnost dok grade aplikacije u Vueu.js.
Ovaj pristup zasnovan na komponentama u osnovi je nadahnut i izabran iz ReactJS-a. Kôd pišemo u obliku komponenata kako bismo ga mogli uvesti i ponovno upotrijebiti gdje god nam zatreba. Vue.js nudi komponentu u jednoj datoteci, što ga čini slobodno povezanim i ponovnim kodom.
Vue.js nudi najbolji pristup zasnovan na komponentama, poput onoga što programer treba; može ga pronaći u jednom .vue datoteka. Programeri se osjećaju tako ugodno i lagodno kad ne trebaju brinuti ili se brinuti o dodatnoj strukturi komponente.
U ovom ćemo članku pogledati komponentu jedne datoteke koja ima .vue produžetak. Dakle, pogledajmo vrlo jednostavan primjer Vue komponente i shvatimo ga.
message Svijet
Ovo je vrlo jednostavan i osnovni primjer Vue komponente. U kojem možemo vidjeti da je kod podijeljen u tri sloja. Ova troslojna sintaksa najbolji je dio Vuea.js. Zadovoljava razdvajanje brige koja je još uvijek u jednom jedinom .vue datoteka. Imamo svoj predložak (HTML), logiku u Javascriptu i stil unutar komponente.
- Predložak
- Skripta
- Stil
Predložak
U ovu oznaku predloška upisujemo naš HTML kôd. I u ovo možemo vezati varijable koristeći Vue.js sintaksa vezanja podataka, a u to možemo dodati i neke druge funkcionalnosti koristeći Vue.js je osigurao sintaksu za odgovarajuće funkcionalnosti.
Skripta
Ovo je odjeljak u kojem možemo napisati logiku komponente u javascriptu slijedeći sintakse Vue.js. Ovdje idu sve funkcionalnosti i logika komponente. Na primjer,
- Uvoz ostalih komponenata i potrebnih paketa.
- Deklaracija varijable
- Metode / funkcije
- Kuke životnog ciklusa
- Računska svojstva i promatrači
- I tako dalje…
Stil
Ovdje zapisujemo stil u CSS komponente ili možemo koristiti bilo koji pretprocesor koji želimo koristiti.
Ovo je samo uvid u komponentu u Vueu.js. Pogledajmo malo upotrebu, organizaciju i protok podataka između komponenata.
Uvoz i upotreba komponenata
Da bismo koristili komponentu, prvo moramo uvesti komponentu. Inače, kako Vue.js znaju za to? Komponentu možemo jednostavno uvesti dodavanjem izraza „Uvoz“ na početku oznake skripte i deklariranjem te komponente u objektu „komponente“, koristeći sljedeću sintaksu.
Nakon uspješnog uvoza komponente možemo je koristiti u ovakvom predlošku
Ovo je način na koji jednostavno možemo uvesti i koristiti komponentu u bilo kojoj drugoj komponenti.
Organiziranje komponenata
Kao i bilo koja druga aplikacija, organizacija Components djeluje poput ugniježđenog stabla. Na primjer, jednostavno web mjesto koje uključuje zaglavlje, bočnu traku i neke druge komponente u spremniku. Organizacija komponente bila bi ovakva.
Slika od Vue.js službeni dokumenti
Protok podataka između komponenata
Mogu biti dvije vrste protoka podataka između komponenata: Nadređena komponenta za podređenu komponentu
Podatke s roditeljske komponente možemo poslati na podređenu komponentu pomoću rekvizita: Podređena komponenta roditeljskoj komponenti
Podatke možemo poslati emitiranjem događaja iz komponente Child i preslušati ga s druge strane (Nadređena komponenta).
Završavati
U ovom smo članku prošli čitav put razumijevanja osnovne komponente u Vueu.js na njegovu upotrebu, hijerarhiju, organizaciju i implementaciju uvoza, korištenja i znanja o komunikaciji između komponenata. Ovaj članak pokriva velik opseg komponenata, ali ipak postoji mnogo detaljnog znanja o komponentama. Dakle, slobodno posjetite Vue.js službeni dokumenti za više informacija.
