Interpolacja i dyrektywy
Wykorzystają Państwo interpolację mustache i podstawowe dyrektywy w szablonach.
Interpolacja i dyrektywy to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 1 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 3 lekcji w sumie.
Przegląd składni szablonów
Szablony Vue są prawidłowym kodem HTML rozszerzonym o specjalną składnię:
- Interpolacja Mustache służy do wyświetlania tekstu
- Dyrektywy (atrybuty z prefiksem v-) służą do definiowania zachowania
Vue kompiluje je do wydajnych funkcji renderujących.
Interpolacja Mustache
Podwójne nawiasy klamrowe, czyli składnia mustache, wyświetlają tekst.
Ich zawartość jest wyrażeniem JavaScript, a nie tylko nazwą zmiennej.
<span>Hello, {{ userName }}</span>
<span>{{ price * quantity }}</span>
<span>{{ isActive ? "On" : "Off" }}</span>v-bind dla atrybutów
Mustache nie działają wewnątrz atrybutów HTML. Użyj v-bind, aby powiązać dane z atrybutem.
<a v-bind:href="profileUrl">Profile</a>
<img v-bind:src="imagePath" v-bind:alt="caption" />
<button v-bind:disabled="isLoading">Submit</button>Skrócona składnia v-bind
v-bind jest tak często używane, że ma skróconą składnię: wystarczy dwukropek.
<!-- Full syntax -->
<a v-bind:href="url">Link</a>
<!-- Shorthand -->
<a :href="url">Link</a>v-on dla zdarzeń
Dyrektywa v-on nasłuchuje zdarzeń DOM i uruchamia procedury obsługi.
<button v-on:click="handleClick">Click me</button>
<input v-on:input="onType" />
<form v-on:submit="onSubmit">...</form>Skrócona składnia v-on
v-on również ma skróconą składnię: symbol małpy.
<!-- Full syntax -->
<button v-on:click="save">Save</button>
<!-- Shorthand -->
<button @click="save">Save</button>Procedury obsługi inline a metody
Procedury obsługi zdarzeń mogą być wyrażeniami inline albo nazwami metod.
<!-- Inline expression -->
<button @click="count++">Add</button>
<!-- Method handler -->
<button @click="increment">Add</button>
<!-- Inline with the event object -->
<button @click="log($event)">Log</button>v-text
Dyrektywa v-text ustawia zawartość tekstową elementu. Jest równoważna interpolacji mustache.
<!-- These two are equivalent -->
<span v-text="message"></span>
<span>{{ message }}</span>v-html
Dyrektywa v-html renderuje ciąg znaków jako prawdziwy kod HTML, a nie jako tekst z zabezpieczonymi znakami.
<div v-html="rawHtml"></div>
<!-- If rawHtml = "<b>Bold</b>",
it renders actual bold text -->v-html i ostrzeżenie dotyczące XSS
Ostrzeżenie: v-html jest niebezpieczne w przypadku niezaufanej zawartości.
- Może wstrzyknąć złośliwe skrypty (ataki XSS)
- Należy używać go wyłącznie z zawartością, której całkowicie Państwo ufają
- Nigdy nie należy bezpośrednio renderować kodu HTML przesłanego przez użytkownika
W przypadku zwykłego tekstu zawsze należy preferować interpolację mustache, która zabezpiecza kod HTML.
Argumenty dyrektyw
Niektóre dyrektywy przyjmują po dwukropku argument, na przykład nazwę atrybutu lub zdarzenia.
<!-- argument is the attribute name -->
<a :href="url">Link</a>
<!-- argument is the event name -->
<button @click="run">Run</button>
<!-- dynamic argument -->
<a :[attrName]="value">Dynamic</a>Szybkie sprawdzenie
Sprawdź swoją wiedzę na temat interpolacji i dyrektyw.
Podsumowanie: interpolacja i dyrektywy
Poznali Państwo podstawy szablonów Vue:
- {{ }} w składni mustache wyświetla wyrażenia tekstowe
- v-bind (skrót :) wiąże atrybuty
- v-on (skrót @) obsługuje zdarzenia
- v-text ustawia zawartość tekstową
- v-html renderuje surowy HTML (ryzyko XSS, należy używać ostrożnie)
Następnie: poznają Państwo instrukcje warunkowe i pętle.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 42
- Lekcje
- 156
Często zadawane pytania
Czy lekcja „Interpolacja i dyrektywy” jest bezpłatna?
Tak — pełny tekst „Interpolacja i dyrektywy” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 3 lekcji w sumie.
Co nauczysz się w „Interpolacja i dyrektywy”?
Wykorzystają Państwo interpolację mustache i podstawowe dyrektywy w szablonach. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Vue Academy?
Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 3.
Ile czasu zajmuje lekcja „Interpolacja i dyrektywy”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?
Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Interpolacja i dyrektywy
- Warunki i pętle
- Powiązania atrybutów i klas