Vue.Komponenty JS

Vue.JS to progresywna framework JavaScript, który służy do budowania interfejsów użytkowników (interfejsy użytkownika) i spa (aplikacje jednostronicowe). Możemy zacząć budować aplikacje internetowe w Vue.JS z podstawową wiedzą o HTML, CSS i JavaScript. Vue.JS jest zbudowany przez połączenie najlepszych funkcji już istniejących ram kątowych i react. Deweloperzy uwielbiają kodować i czuć wolność i komfort podczas budowania aplikacji w Vue.JS.

To podejście oparte na komponentach zostało zasadniczo zainspirowane i wybrane z ReactJS. Piszemy kod w postaci komponentów, abyśmy mogli zaimportować ten komponent i ponownie go wykorzystać, gdziekolwiek go potrzebujemy. Vue.JS oferuje komponent pojedynczego pliku, który czyni go luźno sprzężonym i wielokrotnym kodem wielokrotnego użytku.

Vue.JS oferuje najlepsze podejście oparte na komponentach, takie jak wszystko, czego potrzebuje programista; Może to znaleźć w jednym .plik vue. Deweloperzy czują się tak komfortowo i swobodnie, gdy nie muszą się martwić lub dbać o dodatkową strukturę komponentu.

W tym artykule przyjrzymy się komponentowi jednego pliku, który ma .rozszerzenie vue. Rzućmy więc okiem na bardzo prosty przykład komponentu vue i zrozum go.

To bardzo prosty i podstawowy przykład komponentu vue. W którym widzimy, że kod jest podzielony na trzy warstwy. Ta trójwarstwowa składnia jest najlepszą częścią Vue.JS. Spełnia rozdział troski, a jednocześnie będąc w jednym .plik vue. Mamy nasz szablon (HTML), logika w JavaScript i stylizacja wewnątrz komponentu.

• Szablon
• Scenariusz
• Styl

Szablon

W tym znaczniku szablonu piszemy nasz kod HTML. Możemy w tym również wiązać zmienne za pomocą vue.Składnia wiązania danych JS i możemy dodać w tym inne inne funkcje za pomocą vue.JS dostarczył składnię dla odpowiednich funkcji.

Scenariusz

Jest to sekcja, w której możemy napisać logikę komponentu w JavaScript, przestrzegając składni Vue.JS. Wszystkie funkcje i logika komponentu trafiają tutaj. Na przykład,

• Importowanie innych potrzebnych komponentów i pakietów.
• Deklaracja zmienna
• Metody/funkcje
• Haczyki cyklu życia
• Obliczone właściwości i obserwatorzy
• I tak dalej…

Styl

W tym miejscu piszemy styl w CSS komponentu lub możemy użyć dowolnego preprocesora, którego chcemy użyć.

To tylko spojrzenie na komponent w vue.JS. Rzućmy okiem na użycie, organizację i przepływ danych między komponentami.

Importować i używać komponentów

Aby użyć komponentu, najpierw musimy zaimportować komponent. W przeciwnym razie jak Vue może.JS wiedz o tym? Możemy po prostu zaimportować komponent, dodając instrukcję „import” na początku znacznika skryptu i deklarując ten komponent w obiekcie „komponentów”, używając następującej składni.

Po pomyślnym zaimportowaniu komponentu możemy go użyć w takim szablonie