notatki JS magda.t
<!–
Wyjaśnienie każdego elementu:
- <!DOCTYPE html> - deklaracja typu dokumentu, włącza tryb standardowy
- <html lang="pl"> - element główny, atrybut lang określa język (polski)
- <head> - sekcja metadanych niewidoczna dla użytkownika
- <meta charset="UTF-8"> - kodowanie znaków, obsługuje polskie znaki
- <meta name="viewport"> - konfiguracja dla urządzeń mobilnych
- <title> - tytuł w zakładce przeglądarki
- <body> - treść widoczna dla użytkownika
-->
pytania:
cz.I
- czym jest HTML?--> język do opisu struktury stron internetowych
- co oznacza <!DOCTYPE html> - deklaracja typu dokumentu html5
- do czego służy znacznik <html>: określa początek i koniec dokumentu html
- co zawiera sekcja <head>: metadane, tytył i odnośnik do plików
- za co odpowiada sekcja <body>: zawiera widoczną zawartośc strony
- do czego służy <meta charset="UTF-8">: ustawia kodowanie znaków strony
- który znacznik słuzy do nagłówków? : <h1> do <h6>
- jak wstawiamy zewnętrzny plik CSS?: za pomocą <link rel='stylesheet'href='style.css'>
- jak wczytać zewnętrzny skrypt JS?: za pomocą <script src='app.js'></script>
- jak działa <meta name="viewport"> - dostosowuje stronę do ekranów urządzeń
- ile poziomów nagłówków jest w HTML?: sześć (h1-h6)
- do czego słuzy znacznik <p>?: tworzy akapit tekstu
- jak wstawiamy nowa linię w html?: za pomocą tagu brake <br>
- co robi znacznik <hr>?: wstawia pozioma linię
- który element jest blokowy:<div>
- który element jest inline?: <span>
- do czego służy <strong>?: podkreśla wazność tekstu(pogrubienie)
- jak działa <em>?: zaznacza teks jako wyróżniony(kursywa)
- co robi znacznik <code>? oznacza fragment kodu programistycznego
- co oznacza pojęcie accessibility w HTML? dostępnośc stron dla osób z niepełnosprawnościami.
czII.
- lista nieuporządkowana w HTML? <ul>
- pojedynczy element listy HTML <li>
- tworzenie listy uporządkowanej <ol>
- lista definicji <dl>
- pary w liście definicji tworzą: <dt> i <dd>
- jak stworzyć zagnieżdżoną listę: wstawić <ul> lub <ol> w <li>
- breadcrumbs w nawigacji: to jest ścieżka nawigacyjna użytkownika
- który atrybut w <a> definiuje cel odnośnika: href
- jak otworzyć link w nowej karcie: target= "_blank"
- który atrybut<img> opisuje obraz dla czytników ekranu: alt
- jak wskazać alternat. źródła obrazu dla różnych rozdzielczości: srcset
- jaki atrybut w <img> opóźnia ładowanie poza ekranem?: loading="lazy"
- znacznik do osadzania pliku video: <video>
- które znaczniki definiują strukturę tabeli danych: <table>, ,thead>, <tbody>, <tfloot>
- do czego słuzy atrybut colspan w tabeli: łaczy kolumny w jednej komórce
- jak oznaczamy nagłowki kolumn w tabeli: <th>
- jakie znaczenie ma <caption> w tabeli: tytuł lub opis tabelki
- który atrybut <form> określa sposób przesyłania danych: method
- jakie typy obsługuje <input>: text, email, password, number
- jak wymusić wypełnienie pola w formularzu?: required.
cz.III
- proces nakładania się reguł CSS: cascading
- zapis koloru w formacie RGB z przeźroczystością: rgba(255,0,0,0.5)
- pogrubienie w CSS: font-weight
- która właściwość ustawia odstęp między literami: letter-spacing
- jak w CSS ustawić tło obrazkowe: background-image
- jakiego słowa używamy do definiowania zmiennej CSS? --nazwa
- które jednostki CSS są zależne od rozmiaru okna?:vw, vh
- jakie właściwości tworzy gradient promieniowy kolorów?: radial-gradient
- jak właczyć sprawdzanie poprawność formularza HTML: użyć atrybutów walidacyjnych.
cz.IV
1.Który element BOX Model znajduje się najbliżej zawartości:content
2. za odtstęp między zawartością a obramowaniem odpowiada właściwośc: Padding
3. która część Box modelu nie ma koloru tła elementu: Margin
4. jakie są dwie główne wartości właściwości box-sizing: content-box i border-box
5. w trybie content-box szerokość nie uwzględnia:paddingu i borderu
6. w trybie border-box width obejmuje: content, padding i border
7. jak obliczana jest całkowita szerokość elementu: width+padding+border+margin
8. do czego służy DevTools w kontekście Box Modelu: analiza marginesów i rozmiarów elementów
9. jakie wartości może mieć właściwość display: block, inline, flex, grid
10. jak zachowuje się element o display:inline --> nie zaczyna nowej linii
11. Jakie pozycjonowanie jest domyślne dla elementów? Static
12. Element z position:absolute jest pozycjonowany względem? Najbliższego przodka z pozycją inną niż static
13. Jak działa z-index? Określa kolejność nakładania się elementów
14. Jaką właściwość używamy do kontrolowania przepełnienia treści? Overflow
15. Czym różni się visibility:hidden od display:none? Hidden ukrywa bez usuwania miejsca
16. Które wartości należą do justify-content? Flex-start, center, space-between
17. Co robi właściwość flex-wrap? Zawija elementy do nowej linii
18. Jak ustawić różne odstępy między elementami w flexboxie? Użyć właściwości gap
19. Co określa grid-template-columns? Liczbę i szerokość kolumn siatki
20. Jak działają media queries w CSS? Dostosowują styl do rozmiaru ekranu
czV. JS: zmienne i typy danych
1. Gdzie najlepiej umieścić skrypt JS w HTML, by działał po załadowaniu strony? Na końcu body
2. Jak działa atrybut defer w znaczniku script? Wykonuje skrypt po załadowaniu DOM
3. Jak działa atrybut async w znaczniku script? Wykonuje skrypt gdy tylko się załaduje
4. Jaka jest różnica między var i let? Var ma function scope, let ma block scope
5. Dlaczego nie zaleca się używać var? Brak block scope i ryzyko nadpisania
6. Co to jest Temporal Dead Zone (TDZ)? Okres przed inicjalizacją zmiennej let/const
7. Co oznacza hoisting w JavaScript? Podnoszenie deklaracji na początek zakresu
8. Jaka konwencja nazewnictwa jest poprawna dla zmiennej boolean? isActive
9. Jak nazywać stałe w JS zgodnie z konwencją? UPPER_CASE
10. Jak pisać nazwy funkcji zgodnie z konwencją JS? camelCase z czasownikiem
11. Ile jest prymitywnych typów danych w JS? 7
12. Który z poniższych NIE jest typem prymitywnym? Object
13. Co zwróci typeof null? Object
14. Co zwróci typeof NaN? Number
15. Jak poprawnie sprawdzić czy wartość to NaN? Number.isNaN(x)
16. Jak utworzyć symbol z opisem w JS? Symbol(‘opis’)
17. Co oznacza BigInt w JS? Typ do przechowywania bardzo dużych liczb
18. Jaki wynik da typeof undefined? ‘undefined’
19. Jak sprawdzić czy wartość to liczba całkowita w JS? Number.isInteger(x)
20. Co robi funkcja prompt()? Wyświetla okno dialogowe i zwraca wpisany tekst
cz VI: Pętle i instrukcje warunkowe
1. Jaki operator służy do potęgowania w JavaScript? **
2. Co zwróci 7 % 3? 1
3. Który operator sprawdza równość bez konwersji typów? ===
4. Jaki będzie wynik ‘5’ – 2? 3
5. Co zwróci parseFloat(3.14px)? 3.14
6. Czym różni się do…while od while? Do…while wykona się co najmniej raz
7. Która z wartości jest falsy w JS? 0
8. Jaki będzie wynik ‘5’ + 2? 52
9. Jaki wynik da 2 == ‘2’? true
10. Jak działa operator &&? Zwraca pierwsze falsy lub ostatni truthy
11. Jaki wynik da: null ?? ‘wartość’? domyślne
12. Co zapewnia optional chaining ‘?.’ ? Bezpieczny dostęp przy null/undefined
13. Który operator ma wyższy priorytet: && czy || ? &&
14. Co zwróci false || ‘ok’ && ‘x’ ? x
15. Który operator przypisze tylko gdy wartość jest falsy? II=
16. Która konstrukcja sprawdza warunek i wykonuje blok kodu? If
17. Który wzorzec upraszcza zagnieżdżone ify? Guard clauses
18. Kiedy wybrać switch zamiast if-else? Gdy porównujemy jedną zmienną do wielu wartości
19. Jaki wynik dla age=17 w age>=18 ? ‘OK’ : ‘NO’ ? NO
20. Co robi continue w pętli for? Pomija bieżącą iterację
czVII: Pętle, cd i funkcje
1. Do czego służy pętla for…in w JS? Iteruje po kluczach obiektu
2. Co iteruje pętla for… of? Wartości elementów z iterowanych kolekcji
3. Dlaczego zagnieżdżone pętle mogą być wolne? Wykonują wiele iteracji w każdej pętli
4. Która technika może przyśpieszyć pętlę for? Buforowanie długości tablicy w zmiennej
5. Jak przerwać dwie zagnieżdżone pętle naraz? Użyć etykiety i instrukcji break
6. Co jest przykładem obiektu iterowalnego? Tablica używana w pętli for..of
7. Co zwraca metoda next () w iteratorze? Obiekt z polami value i done
8. Co wyróżnia deklarację funkcji od wyrażenia? Doklaracja jest hoistowana w całości
9. Co opisuje parametry funkcji? Nazwane zmienne zdefiniowane w deklaracji
10.Do czego służy obiekt arguments? Daje dostęp do wszystkich argumentów funkcji
11. Co robi instrukcja return w funkcji? Zwraca wartość i kończy działanie funkcji
12. Co jest prawdą o zasięgu funkcji? Zmienne w niej są niewidoczne na zewnątrz
13. Która nazwa funkcji najlepiej pasuje do konwencji JS? calculateTotalPrice
14. Jak zapiszesz funkcję strzałkową dodającą a i b? (a, b) => a + b
15. Czym różnią się arrow functions od zwykłych? Nie mają własnego this ani arguments
16. Jak ustawisz domyślny parametr count na 1? Function f(count = 1) {}
17. Co robi parametr …args w funkcji? Zbiera pozostałe argumenty do tablicy
18. Co to jest funkcja wyższego rzędu? Funkcja przyjmująca lub zwracająca funkcję
19. Co oznacza, że funkcje są pierwszej klasy w JS? Można je przekazywać i przechowywać jak dane
20. Które wywołanie używa funkcji wyższego rzędu? [1, 2, 3].map(x=> x * 2)
cz VIII: This, tablice i obiekty
1. Co zwraca this w globalnym kontekście przeglądarki? Window
2. Co zwraca this w funkcji wywołanej bez kontekstu w trybie strict? Undefined
3. Co określa kontekst this w metodzie obiektu? Obiekt przed kropką
4. Która metoda ustawia this i wywołuje funkcję natychmiast? Call
5. Która metoda przyjmuje argumenty jako tablicę i ustawia this? Apply
6. Która metoda zwraca nową funkcję z przypisanym this? Bind
7. Jak zachowuje się this w arrow function? Dziedziczy this z otoczenia
8. Co oznacza sparse array? Tablica z brakującymi indeksami
9. Co zwraca length przy sparse array? Najwyższy indeks +1
10. Jaka metoda dodaje element na końcu tablicy? Push
11. Jaka metoda usuwa pierwszy element tablicy? Shift
12. Co zwracam Array.isArray([]) ? True
13. Jaki typ zwraca typeof [] ? Object
14. Jaka metoda wykonuje funkcję dla każdego elementu bez zwrotu tablicy? forEach
15. Która metoda zwraca nową tablicę z przekształconych elementów? Map
16. Która metoda zwraca pierwszy element spełniający warunek? Find
17. Która metoda sprawdza, czy dowolny element spełnia warunek? Some
18. Która metoda sprawdza, czy tablica zawiera wartość? Includes
19. Co oznacza method chaining? Łączenie kilku metod po sobie
20. Jak odwołać się do właściwości obiektu o nazwie z zmiennej? Bracket notation
cz IX: Zaawansowane obiekty i tablice
1. Który zapis tworzy dynamiczną nazwę właściwości? Obj[klucz] = 1
2. Który zapis tworzy metodę w shorthand? Const o=[x(){}}
3. Co zwraca Object.keys(obj) ? Tablicę kluczy obiektu
4. Co robi Object.values(obj) ? Zwraca tablicę wartości
5. Object.entries(obj) zwraca…? Tablice [llucz, wartość]
6. Co opisują property descriptors? Sposób działania właściwości
7. Co robi reduce? Akumuluje wartości do jednej
8. Kiedy użyć reduceRight? Gdy liczymy od końca tablicy
9. Sort z compare function zwraca? Liczbę porównania
10. Metoda reverse? Odwraca tablicę mutując ją
11. Czym różni się slice od splice? Slice nie mutuje
12. Array destructuring pozwala? Wyciągnąć elementy do zmiennych
13. Default values w destrukturyzacji? Dają wartość gdy brak danych
14. Object destructuring z rename? Daje zmienną o innej nazwie
15. Spread w tablicach? Rozwija element do nowej tablicy
16. Rest operator w destrukturyzacji? Zbiera resztę danych
17. Object.assign służy do? Łączenia obiektów
18. Object.freeze? Blokuje modyfikacje obiektu
19. Podstawowy cel prototypu to? Dziedziczenie w obiektach
20. Constructor function służy do? Tworzenia instancji obiektów
cz X: Klasy, JSON, DOM
1. Po co używamy klas w JavaScript? Do tworzenia obiektów według wspólnego szablonu
2. Jak definiujemy klasę w JS? Słowem kluczowym CLASS
3. Co tworzy słowo kluczowe new? Instancję klasy
4. Co wyróżnia metodę statyczną? Wywołuje się ją na klasie, nie instancji
5. Jakim słowem realizujemy dziedziczenie? Extends
6. Co robi super() w konstruktorze? Wywołuje konstruktor klasy bazowej
7. Jak oznaczamy prywatne pola klasy? #nazwaPola
8. Co zapewnia enkapsulacja? Ukrywanie szczegółów implementacji
9. Co robi JSON.stringify? Konwertuje obiekt na tekst JSON
10. Co robi JSON.parse? Konwertuje tekst JSON na obiekt
11. Do czego służy replacer w stringify? Do filtrowania lub modyfikacji danych podczas serializacji
12. Czym jest reviver w JSON.parse? Funkcją modyfikującą wartości podczas parsowania
13. Co uniemożliwia JSON przy cyklicznych referencjach? Serializację bez specjalnej obsługi
14. Czym jest DOM? Reprezentacją dokumentu w pamięci jako drzewo
15. Jakie typy węzłów istnieją w DOM? Element, Text, Comment, Document
16. Jak pobrać element po ID? document.getElementById()
17. Co zwraca querySelectorAll? Statyczną NodeList
18. textContent vs innerHTML – różnica? innerHTML interpretuje HTML, textContent nie
19. Co opisuje relację parent-child w DOM? Węzeł zawiera inne węzły jako dzieci
20. Co wyróżnia HTMLCollection? Jest żywą kolekcją aktualizującą się wraz z DOM
cz XI: Manipulacja DOM, eventy
1. Co robi createElement w DOM? Tworzy nowy element HTML
2. Do czego służy createTextNode? Tworzy węzeł tekstowy
3. Co robi appendChild? Dodaje węzeł jako ostatnie dziecko
4. Jak działa insertBefore? Wstawia węzeł przed wskazanym
5. replaceChild wymaga? Nowego i starego węzła
6. removeChild usuwa? Wskazane dziecko z DOM
7. Co robi element.remove() ? Usuwa element z DOM
8. cloneNode(true) oznacza? Kopiowanie węzła razem z dziećmi
9. style vs classList – co prawda? classList dodaje i usuwa klasy
10. Do czego służy DocumentFragment? Tworzy grupę węzłów dla wydajności
11. Dlaczego addEventListener a nie onClick? Pozwala dodać wiele handlerów
12. Event object zawiera? Informacje o zdarzeniu i celu
13. Co robi preventDefault() ? Blokuje domyślne działanie dla danego elementu
14. stopPropagation zatrzymuje? Propagację zdarzenia
15. Dlaczego usuwać event listenery? Aby uniknąć wycieków pamięci np. przy usuwaniu elementu
16. Opcja capture w listenerze? Uruchamia zdarzenie zanim dotrze do elementu docelowego
17. Mouse event to? Click, dblclick, mousedown
18. Keyboard event to? Keydown, keyup
19. Focus event to? Focus i blur
20. Co jest kluczowe w event delegation? Obsługa zdarzeń na wspólnym rodzicu
cz.XII operacje asynchroniczne
1.SetTimeout wykonuje funkcję callback....--> raz po okreslonym czasie
2.jak przerwać nieskończona pętlę tworzona przez setInterval() --> clearInterval()
3.co to jest 'callback hell' --> to zagnieżdzone funkcje callback.
4.jak tworzyć nową operację asynchroniczną: new Promise()
5.co zwraca funkcja async ZAWSZE: Promise
6.które słowo kluczowe zatrzymuje wykonanie funkcji async do rozwiązania Promise? --> await
7.jaki jest początkowy stan nowo utworzonego Promise?--> pending
8.która metoda Promise czeka na WSZYSTKIE promise i zwraca tablice wyników: Promise.all
9.gdzie możemy używać słowa kluczowego await? tylko w funkcji async
10.która metoda tablicowa zwraca NOWA tablicę z przetworzonymi elementami: map
11.która pętla poprawniw czeka na async operacje z await? for...of
12.która metoda Promise wykonuje się ZAWSZe, niezależnie od wyniku:finally
13.co zwraca Promise.race--> wynik pierwszego zakończoego Promise
14.co robi metoda catch w Promise: obsługuje błędy
15.która metoda nie istnieje w Promise: Promise.wait
16.co jest 'non blocking-code' kod nie zatrzymujący wykonania programu
17.którą metode tablicową używamy gdy operacje są niezalezne i chcemy przyśpieszyć ? Promise.all z map
18.co robi metoda then w Promise: obsługuje sukces fulfilled
19.która funkcja AI jest najlepsza do długich kontekstów i code review: CLAUDE
20.jaki skrót w VS code akceptuje sugestię GitHub Copilot : Tab
JSON, HTML i XML
Istnieje wiele formatów służących do przechowywania i przesyłania danych w Internecie. Wśród najpopularniejszych można wymienić JSON, XML i HTML. JSON i XML to formaty używane do przechowywania i przesyłania danych, a każdy z nich ma inne zalety. HTML to używany do tworzenia struktury strony WWW język, któremu często towarzyszą wspomniane tu formaty magazynów danych.
Kluczowe różnice
- JSON (JavaScript Object Notation) to format powszechnie używany do przechowywania i przesyłania danych. JSON jest popularnym wyborem w przypadku aplikacji, które korzystają z prostego i łatwego w użyciu formatu danych.
- XML (Extensible Markup Language) to język znaczników ogólnego przeznaczenia, który jest podobny do JSON i pozwala na tworzenie bardziej złożonych struktur danych.
- HTML (Hypertext Markup Language) służy do tworzenia struktury i zawartości stron WWW. Jest on często używany z innymi językami, np. CSS (Cascading Style Sheets) i JavaScript, w celu ujednolicenia stylu witryny WWW i zwiększenia jej interaktywności.
AJAX (Asynchronous JavaScript and XML) to technika, która pozwala na asynchroniczną wymianę danych między przeglądarką a serwerem, bez konieczności przeładowywania całej strony internetowej. Dzięki AJAXowi, strony mogą dynamicznie aktualizować tylko części swojej zawartości, co sprawia, że aplikacje webowe stają się bardziej interaktywne i responsywne, poprawiając komfort użytkownika. Jak działa AJAX?
- Asynchroniczność: Przeglądarka wysyła żądanie do serwera w tle, podczas gdy użytkownik nadal może korzystać ze strony, która się nie przeładowuje.
- Pobieranie danych: Po otrzymaniu odpowiedzi z serwera (w formacie takim jak JSON, XML czy tekst), JavaScript przetwarza otrzymane dane i aktualizuje odpowiednie części strony bez konieczności pełnego odświeżenia.
- Interakcja: Zamiast ładować nową, całą stronę, AJAX pozwala na "odświeżanie bez przeładowywania", co umożliwia interakcje w czasie rzeczywistym.
Przykłady zastosowania AJAX
- Sklepy internetowe: Dynamiczne aktualizowanie koszyka, gdy dodajesz do niego produkty.
- Formularze: Sprawdzanie poprawności danych w formularzu w czasie rzeczywistym, zanim wyślesz go na serwer.
- Dynamiczne ładowanie treści: Wczytywanie kolejnych elementów strony, gdy przewijasz w dół, np. na mediach społecznościowych.
- Sugestie wyszukiwania: Wyświetlanie podpowiedzi, gdy wpisujesz tekst w pasek wyszukiwania.
Czym są dyrektywy Vue.js?
Dyrektywy to nic innego jak atrybut, który dodajemy do znaczników HTML, z tym, że nie są one częścią standardu HTML, a są intepretowane bezpośrednio przez Vue.js. Można również powiedzieć, że są mini-funkcjami, które zmieniają zachowanie i strukturę DOM. Każda dyrektywa rozpoczyna się od prefiksu v-, po którym dodajemy nazwę dyrektywy.
v-text
Podstawowa dyrektywa, której użyłem w niejawny sposób w poprzednim odcinku, dodaje tekst (ze zmiennej podanej jako parametr atrybutu) wewnątrz elementu, do którego została przypisana dyrektywa. Dyrektywy v-text używa się niejawnie stosując zapis klamrowy (mustache tag) i w gruncie rzeczy daje taki sam rezultat.
<div id="app">
<span> {{message}} </span>
<span v-text="message"></span>
</div> var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})v-html
Dyrektywa v-html jest bardzo podobna do v-text, z tą różnicą, że pozwala na przekazanie znaczników HTML, które są następnie interpretowane przez przeglądarkę internetową. W pierwszym przypadku zostanie zwrócony dokładnie i dosłownie tekst kryjący się w zmiennej message, natomiast w drugim tylko Hello from HTML.
<div id="app">
<span v-text="message"></span>
<span v-html="message"></span>
</div> var app = new Vue({
el: '#app',
data: {
message: "<strong>Hello from HTML</strong>"
}
})v-show
v-show jest dyrektywą warunkową, która po przyjęciu argumentu, który jest prawdą, spowoduje, że element do którego jest przypisana zostanie wyświetlony użytkownikowi. W przypadku fałszu do elementu zostanie dodany styl CSS display:none. Dyrektywa v-show nie usuwa elementu z DOM.
<div id="app">
<p v-show="enoughMoney">Buy it</p>
</div> var app = new Vue({
el: '#app',
data: {
enoughMoney: true
}
})v-if, v-else
Następną dyrektywą warunkową jest v-if. Na zewnątrz działa tak samo jak v-show, z tą różnicą, że jeżeli warunek nie jest spełniony to element do którego się odnosi nie zostanie dodany do DOM. v-else nie istnieje samodzielnie i zawsze występują w parze z v-if, jest wykonywana gdy pierwszy warunek nie został spełniony.
<div id="app">
<p v-if="enoughMoney">Buy it</p>
<p v-else>You don't have enough money</p>
</div> var app = new Vue({
el: '#app',
data: {
enoughMoney: true
}
})v-pre
Pozwala na wyświetlenie tekstu zawierającego znaki ````, interpreter Vue.js ominie wszystko, co znajduje się wewnątrz taga HTML (oraz jego dzieci) opatrzonego tą dyrektywą - zostanie zwrócony pre-formatowany tekst.
<div id="app">
<p v-pre> {{ message will be not compilated }} </p>
</div> v-once
Dyrektywa v-once powoduje, że element (oraz elementy podrzędne) zostanie przetworzony przez Vue.js tylko raz. Jakakolwiek zmiana wartości zmiennej message za pomocą konsoli czy też kodu JavaScript nie spowoduje, że zostanie ona przetwrzona i wyświetlona jej zaktualizowana wartość. Warto pamiętać, że wartość zmiennej zostanie zmieniona, natomiast nie nastąpi odświeżenie elementów DOMu.
<div id="app">
<p v-once> {{message}} </p>
</div> var app = new Vue({
el: '#app',
data: {
message: 'This message is genreated only once'
}Istnieje jeszcze kilka dyrektyw, które są bardziej zaawansowane, m.in.: v-for, v-model, v-bind
Tak, dyrektywy v-for, v-model i v-bind to kluczowe i zaawansowane dyrektywy w frameworku Vue.js służące do iteracji po elementach, dwukierunkowego wiązania danych oraz dynamicznego wiązania atrybutów. v-for służy do renderowania listy elementów na podstawie tablicy lub obiektu, v-model do łatwego tworzenia dwukierunkowych powiązań między elementem formularza a danymi aplikacji, a v-bind (skracane jako :) do dynamicznego przypisywania wartości atrybutów HTML lub właściwości komponentów.
v-for: Pozwala na iterowanie po elementach tablicy lub obiekcie i renderowanie ich na liście. Na przykład, można jej użyć do wyświetlania listy elementów na stronie lub do tworzenia tabel.v-model: Jest to skrót dla dwukierunkowego powiązania danych. Umożliwia łatwe synchronizowanie danych między elementami formularza (np. input, textarea, select) a właściwościami danych w komponencie Vue. Zmiana w elemencie formularza automatycznie aktualizuje dane, a zmiana danych powoduje aktualizację elementu formularza.v-bind: Służy do dynamicznego przypisywania atrybutów HTML lub właściwości komponentów. Zapisywany jest skrótem dwukropek (:) przed nazwą atrybutu (np.:src="imageUrl"). Pozwala na dynamiczne wiązanie wartości atrybutów, co jest przydatne w przypadkach, gdy wartość atrybutu zależy od stanu aplikacji.
co to conditional rendering-->
Renderowanie warunkowe to technika programistyczna, która pozwala na dynamiczne wyświetlanie lub ukrywanie elementów interfejsu użytkownika w zależności od określonych warunków. Działa na zasadzie sprawdzania pewnych warunków (np. statusu zalogowania użytkownika, danych z formularza, uprawnień) i na tej podstawie decyduje, co zostanie pokazane na ekranie. Kluczowe cechy i przykłady
- Dynamiczne dostosowywanie interfejsu: Pozwala na tworzenie interaktywnych aplikacji, które inaczej reagują na użytkownika.
- Przykłady:
- Wyświetlanie przycisku "Zaloguj" dla niezalogowanego użytkownika i "Wyloguj" dla zalogowanego.
- Pokazywanie lub ukrywanie elementów sterujących w zależności od poziomu uprawnień użytkownika.
- Wyświetlanie innego tekstu na banerze strony, w zależności od tego, skąd przyszedł użytkownik.
- Ukrywanie formularza rejestracji dla użytkowników, którzy już go wcześniej wypełnili.
