Vue.js
Wiązanie danych

Tekst

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

<span>Message: {{ msg }}</span>

Znacznik wąsy zostanie zastąpiony wartością właściwości msg w odpowiednim obiekcie danych. Będzie również aktualizowany za każdym razem, gdy zmieni się właściwość msg obiektu danych.

Możesz także wykonać jednorazowe interpolacje, które nie aktualizują się po zmianie danych:

<span>This will never change: {{* msg }}</span>

Surowy HTML

Podwójne wąsy interpretują dane jako zwykły tekst, a nie HTML. Aby uzyskać prawdziwy HTML, musisz użyć potrójnych wąsów:

<div>{{{ raw_html }}}</div>

Zawartość jest wstawiana jako zwykły HTML - powiązania danych są ignorowane. Jeśli chcesz ponownie użyć elementów szablonu, powinieneś użyć części.

Atrybuty

Wąsów można również używać w atrybutach HTML:

<div id="item-{{ id }}"></div>

Zauważ, że interpolacje atrybutów są niedozwolone w dyrektywach i atrybutach specjalnych Vue.js. Nie martw się, Vue.js wyświetli ostrzeżenia, gdy wąsy zostaną użyte w niewłaściwych miejscach.

Filtry

Vue.js pozwala na dołączenie opcjonalnych „filtrów” na końcu wyrażenia, oznaczonych symbolem „potoku”:

{{ message | capitalize }}

„Przesyłamy” wartość wyrażenia message przez wbudowany filtr capitalize , który w rzeczywistości jest tylko funkcją JavaScript, która zwraca wielką literę. Vue.js zawiera wiele wbudowanych filtrów, a my porozmawiamy o tym, jak napisać własne filtry później.

Zauważ, że składnia potoku nie jest częścią składni JavaScript, dlatego nie można mieszać filtrów w wyrażeniach; możesz dodać je tylko na końcu wyrażenia.

Filtry mogą być powiązane:

{{ message | filterA | filterB }}

Filtry mogą również przyjmować argumenty:

{{ message | filterA 'arg1' arg2 }}

Funkcja filtrowania zawsze otrzymuje wartość wyrażenia jako pierwszy argument. Argumenty cytowane są interpretowane jako ciągi zwykłe, a argumenty niecytowane będą oceniane jako wyrażenia. Tutaj zwykły ciąg 'arg1' zostanie przekazany do filtra jako drugi argument, a wartość wyrażenia arg2 zostanie oszacowana i przekazana jako trzeci argument.