Vue.Komponenty js

Vue.js to progresywny framework javascript, który służy do tworzenia interfejsów użytkownika (interfejsów użytkownika) i SPA (aplikacji jednostronicowych). Możemy zacząć budować aplikacje webowe w Vue.js z podstawową znajomością HTML, CSS i Javascript. Vue.js jest budowany przez połączenie najlepszych funkcji z istniejących już frameworków Angular i React. Programiści uwielbiają kodować i czuć swobodę i wygodę podczas tworzenia aplikacji w Vue.js.

To podejście oparte na komponentach zostało w zasadzie zainspirowane i wybrane z ReactJS. Piszemy kod w postaci komponentów, dzięki czemu możemy zaimportować ten komponent i użyć go ponownie tam, gdzie go potrzebujemy. Vue.js oferuje komponent jednoplikowy, co czyni go luźno powiązanym kodem, który można ponownie wykorzystać.

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

W tym artykule przyjrzymy się składnikowi jednoplikowemu, który ma .rozszerzenie vue. Spójrzmy więc na bardzo prosty przykład komponentu Vue i zrozummy 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 oddzielenie troski, będąc jednocześnie w jednym .plik vue. Mamy nasz szablon (HTML), logikę w JavaScript i stylizację wewnątrz komponentu.

• Szablon
• Scenariusz
• Styl

Szablon

W tym tagu szablonu piszemy nasz kod HTML. W tym również możemy wiązać zmienne za pomocą Vue.js składnia wiązania danych i możemy w tym również dodać kilka innych funkcjonalności za pomocą Vue.js dostarczył składnię dla odpowiednich funkcjonalności.

Scenariusz

To jest sekcja, w której możemy napisać logikę komponentu w javascript, postępując zgodnie ze składnią Vue.js. Tutaj znajdują się wszystkie funkcje i logika komponentu. Na przykład,

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

Styl

Tutaj piszemy stylizację w CSS komponentu lub możemy użyć dowolnego preprocesora, którego chcemy użyć.

To tylko rzut oka na komponent w Vue.js. Rzućmy okiem na wykorzystanie, organizację i przepływ danych między komponentami.

Importuj i używaj komponentów

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

Po pomyślnym zaimportowaniu komponentu możemy go użyć w szablonie w ten sposób