Składnia szablonów ​

Vue wykorzystuje składnię szablonów opartą na HTML, która pozwala deklaratywnie powiązać renderowany DOM z danymi bazowej instancji komponentu. Wszystkie szablony Vue są składniowo poprawnym kodem HTML, który może być analizowany przez przeglądarki i parsery HTML zgodne ze specyfikacją.

"Pod spodem" Vue kompiluje szablony do wysoko zoptymalizowanego kodu JavaScript. W połączeniu z systemem reaktywności Vue inteligentnie określa minimalną liczbę komponentów do ponownego renderowania i stosuje minimalne manipulacje DOM przy zmianie stanu aplikacji.

Jeśli znasz koncepcję Wirtualnego DOM-u i preferujesz czystą moc JavaScriptu, możesz także bezpośrednio pisać funkcje renderujące, zamiast szablonów, z opcjonalnym wsparciem JSX. Jednak nie będą one cieszyć się tym samym poziomem optymalizacji w czasie kompilacji, co szablony.

Interpolacja tekstu ​

Najprostszą formą wiązania danych jest interpolacja tekstu przy użyciu składni „wąsy” (podwójne nawiasy klamrowe):

<span>Wiadomość: {{ msg }}</span>

Znacznik podwójnych nawiasów klamrowych zostanie zastąpiony wartością właściwości msgz odpowiadającego komponentu. Wartość ta zostanie zaktualizowana za każdym razem, gdy właściwość msg się zmieni.

Surowy HTML ​

Podwójne nawiasy klamrowe interpretują dane jako zwykły tekst, a nie HTML. Aby wyrenderować rzeczywisty HTML, użyj dyrektywy v-html:

<p>Używanie interpolacji tekstu: {{ rawHtml }}</p>
<p>Używanie dyrektywy v-html: <span v-html="rawHtml"></span></p>

Tutaj napotykamy coś nowego. Atrybut v-html, który widzisz jest nazywany dyrektywą. Dyrektywy mają przedrostek v-, aby wskazać, że są to specjalne atrybuty dostarczane przez Vue i jak możesz się domyślić, stosują specjalne reaktywne zachowanie do renderowanego DOM-u. Tutaj zasadniczo mówimy "utrzymój wewnętrzny kod HTML tego elementu na bieżąco z właściwością rawHtml w bieżącej aktywnej instancji".

Zawartość elementu span zostanie zastąpiona wartością atrybutu rawHtml, interpretowanego jako czysty HTML - powiązania danych są ignorowane. Należy pamiętać, że nie można używać v-htmldo komponowania części szablonów, ponieważ Vue nie jest silnikiem szablonów opartym na ciągach znaków. Zamiast tego komponenty są preferowane jako podstawowa jednostka do ponownego używania w interfejsie użytkownika i kompozycji.

Wiązanie atrybutów ​

Nawiasy klamrowe nie mogą być używane w atrybutach HTML. Zamiast tego użyj dyrektywy v-bind:

<div v-bind:id="dynamicId"></div>

Dyrektywa v-bind instruuje Vue, aby synchronizowało atrybut id elementu z właściwością dynamicId komponentu. Jeśli wartość powiązana jest równa null lub undefined, atrybut zostanie usunięt z renderowanego elementu.

Skrócona składnia ​

Ponieważ v-bind jest często używane, ma specjalną skróconą składnię:

<div :id="dynamicId"></div>

Atrybuty zaczynające się od : mogą wyglądać nieco inaczej niż standardowe atrybuty HTML, ale w rzeczywistości są poprawne i wszystkie przeglądarki obsługiwane przez Vue potrafią je poprawnie parsować. Dodatkowo nie pojawiają się one w końcowym wyrenderowanym kodzie HTML. Skrócona składnia jest opcjonalna, ale prawdopodobnie docenisz jej wygodę, gdy poznasz jej dalsze zastosowania.

W dalszej części przewodnika będziemy używać skróconej składni w przykładach kodu, ponieważ jest to najczęstszy sposób korzystania z Vue.

Skrócona składnia dla atrybutów o tej samej nazwie ​

• Wsparcie tylko dla 3.4+

Jeśli atrybut ma tę samą nazwę co wartość JavaScript, do której jest przypisany, składnię można dodatkowo skrócić, pomijając wartość atrybutu:

<!-- to samo co :id="id" -->
<div :id></div>

<!-- to również działa -->
<div v-bind:id></div>

Jest to podobne do skróconej składni dla właściwości w obiektach JavaScript. Należy zauważyć, że ta funkcja jest dostępna wyłącznie w Vue 3.4 i nowszych wersjach.

Atrybuty logiczne (atrybuty boolean) ​

Atrybuty logiczne to atrybuty, które mogą oznaczać wartości true / false poprzez swoją obecność w elemencie. Na przykład disabled jest jednym z najczęściej używanych atrybutów logicznych.

v-bind działa to nieco inaczej:

<button :disabled="isButtonDisabled">Przycisk</button>

Atrybut disabled zostanie dodany, jeśli isButtonDisabled ma wartość wartość truthy. Zostanie on również dodany, jeśli wartość to pusty ciąg znaków, co jest zgodne z <button disabled="">. Dla innych wartości falsy atrybut zostanie pominięty.

Dynamiczne przypisywanie wielu atrybutów ​

Jeśli masz obiekt JavaScript reprezentujący wiele atrybutów, wyglądający tak:

const objectOfAttrs = {
  id: 'container',
  class: 'wrapper',
  style: 'background-color:green'
}

data() {
  return {
    objectOfAttrs: {
      id: 'container',
      class: 'wrapper'
    }
  }
}

Możesz przypisać je do pojedynczego elementu za pomocą v-bind bez argumentu:

<div v-bind="objectOfAttrs"></div>

Korzystanie z wyrażeń JavaScript ​

Do tej pory przypisywaliśmy tylko proste klucze właściwości w naszych szablonach. Jednak Vue obsługuje pełną moc JavaScriptu we wszystkich powiązaniach danych:

{{ number + 1 }}

{{ ok ? 'TAK' : 'NIE' }}

{{ message.split('').reverse().join('') }}

<div :id="`list-${id}`"></div>

Te wyrażenia będą oceniane jako kod JavaScript w zakresie danych bieżącej instancji komponentu.

W szablonach Vue wyrażenia JavaScript mogą być używane w następujących miejscach:

• W interpolacjach tekstu (podwójny nawias klamrowy)
• W wartości atrybutu dowolnej dyrektywy Vue (atrybuty zaczynające się od v-)

Tylko wyrażenia ​

Każde powiązanie może zawierać tylko jedno wyrażenie. Wyrażenie to fragment kodu, który możne zostać ewaluowane do wartości. Prostym testem jest sprawdzenie czy można go użyć po return.

Dlatego poniższe przykłady NIE będą działać:

<!-- to jest stwierdzenie, a nie wyrażenie: -->
{{ var a = 1 }}

<!-- sterowanie przepływem nie zadziała, użyj wyrażeń warunkowych (trójargumentowych) -->
{{ if (ok) { return message } }}

Wywoływanie funkcji ​

Można wywoływać metody komponentu wewnątrz wyrażenia powiązania:

<time :title="toTitleDate(date)" :datetime="date">
  {{ formatDate(date) }}
</time>

Ograniczony dostęp do obiektów globalnych ​

Wyrażenia w szablonie są izolowane i mają dostęp tylko do ograniczonej listy obiektówglobalnych. Lista zawiera popularne wbudowane obiekty, takie jak Math I Date

Obiekty globalne, które nie są jawnie uwzględnione na liście np. właściwości przypisane do window, nie będą dostępne w wyrażeniach szablonu. Możesz jednak wprost dodać dodatkowe obiekty globalne dla wszystkich wyrażeń Vue, dodając je do app.config.globalProperties.

Dyrektywy ​

Dyrektywy to specjalne atrybuty z prefiksem v-. Vue oferuje kilka wbudowanych dyrektyw, w tym v-html i v-bind , które zostały już przedstawione powyżej.

Wartości atrybutów dyrektywy powinny być pojedynczymi wyrażeniami JavaScript (z wyjątkiem v-for, v-on i v-slot, które zostaną omówione w odpowiednich sekcjach później). Zadaniem dyrektywy jest reaktywne stosowanie aktualizacji do DOM, gdy wartość jej wyrażenia ulega zmianie. Weźmy jako przykład v-if:

<p v-if="seen">Teraz mnie widzisz</p>

W tym przypadku dyrektywa v-if usunie/wstawi element <p> w zależności od prawdziwości wartości wyrażenia seen.

Argumenty ​

Niektóre dyrektywy mogą przyjmować „argument”, oznaczony dwukropkiem po nazwie dyrektywy. Na przykład dyrektywa v-bind jest używana do reaktywnej aktualizacji atrybutu HTML:

<a v-bind:href="url"> ... </a>

<!-- skrócona składnia -->
<a :href="url"> ... </a>

Tutaj href jest argumentem, który mówi dyrektywie v-bind, aby powiązała atrybut href elementu z wartością wyrażenia url. W skrócie, wszystko przed argumentem (tj. v-bind:) jest skondensowane do jednego znaku, :.

Innym przykładem jest dyrektywa v-on, która nasłuchuje zdarzeń DOM:

<a v-on:click="doSomething"> ... </a>

<!-- shorthand -->
<a @click="doSomething"> ... </a>

Tutaj argumentem jest nazwa zdarzenia do nasłuchiwania: click. v-on ma odpowiadający jej skrót, mianowicie znak @. Omówimy również obsługę zdarzeń bardziej szczegółowo.

Dynamiczne argumenty ​

Można również użyć wyrażenia JavaScript w argumencie dyrektywy, umieszczając je w nawiasach kwadratowych:

<!--
Należy pamiętać, że istnieją pewne ograniczenia dotyczące wyrażenia argumentu, jak wyjaśniono w sekcjach „Ograniczenia wartości argumentów dynamicznych" i „Ograniczenia składni argumentów dynamicznych" poniżej.
-->
<a v-bind:[attributeName]="url"> ... </a>

<!-- shorthand -->
<a :[attributeName]="url"> ... </a>

Tutaj attributeName zostanie dynamicznie ocenione jako wyrażenie JavaScript, a jego oceniona wartość zostanie użyta jako ostateczna wartość argumentu. Na przykład, jeśli Twoja instancja komponentu ma właściwość danych attributeName, której wartością jest "href", to to powiązanie będzie równoważne z v-bind:href.

Podobnie można użyć argumentów dynamicznych, aby powiązać obiekt obsługi z dynamiczną nazwą zdarzenia:

<a v-on:[eventName]="doSomething"> ... </a>

<!-- shorthand -->
<a @[eventName]="doSomething"> ... </a>

W tym przykładzie, gdy wartością eventName jest "focus", v-on:[eventName] będzie równoważne z v-on:focus.

Ograniczenia wartości argumentów dynamicznych ​

Oczekuje się, że argumenty dynamiczne będą oceniane jako ciąg znaków (string), z wyjątkiem null. Specjalna wartość null może być użyta do jawnego usunięcia powiązania. Każda inna wartość niebędąca stringiem spowoduje wyświetlenie ostrzeżenia.

Ograniczenia składni argumentów dynamicznych ​

Wyrażenia dynamicznych argumentów mają pewne ograniczenia składniowe, ponieważ niektóre znaki, takie jak spacje i cudzysłowy, są nieprawidłowe w nazwach atrybutów HTML. Na przykład poniższe jest nieprawidłowe:

<!-- to spowoduje wygenerowanie ostrzeżenia kompilatora -->
<a :['foo' + bar]="value"> ... </a>

Jeśli musisz przekazać złożony argument dynamiczny, prawdopodobnie lepiej będzie użyć właściwości obliczeniowej (computed), którą omówimy za chwilę.

Podczas korzystania z szablonów DOM (szablonów napisanych bezpośrednio w pliku HTML) należy unikać nazywania kluczy wielkimi literami, ponieważ przeglądarki wymuszą zapisywanie nazw atrybutów małymi literami:

<a :[someAttr]="value"> ... </a>

Powyższe zostanie przekonwertowane na :[someattr] w szablonach in-DOM. Jeśli Twój komponent ma właściwość someAttr zamiast someattr, Twój kod nie będzie działał. Szablony wewnątrz komponentów jednoplikowych nie podlegają temu ograniczeniu.

Modyfikatory ​

Modyfikatory to specjalne postfiksy oznaczone kropką, które wskazują, że dyrektywa powinna być powiązana w jakiś specjalny sposób. Na przykład modyfikator .prevent mówi dyrektywie v-on, aby wywołała event.preventDefault() na wywołanym zdarzeniu:

<form @submit.prevent="onSubmit">...</form>

Inne przykłady modyfikatorów zobaczysz później, dla v-on i dla v-model, gdy będziemy eksplorować te funkcje.

I na koniec, oto pełna wizualizacja składni dyrektywy: