Oto, co musisz wiedzieć o wiązaniu danych w Vue

Wiązanie danych w aplikacjach internetowych tworzy łącze między instancją aplikacji a interfejsem użytkownika (interfejsem użytkownika). Instancja aplikacji zarządza danymi, zachowaniem i komponentami, podczas gdy interfejs użytkownika reprezentuje aspekt wizualny, z którym użytkownicy wchodzą w interakcję. Wiązanie danych umożliwia tworzenie dynamicznych aplikacji internetowych.

Tutaj poznasz różne wiązania w Vue, w tym wiązania jednokierunkowe i dwukierunkowe. Nauczysz się również implementować te powiązania za pomocą szablonów wąsów i dyrektyw, takich jak v-bind i v-model.

Interpolacja w Vue

Interpolacja to jeden z najpopularniejszych rodzajów wiązania danych w Vue. Interpolacja umożliwia wyświetlanie wartości danych w znacznikach Hyper Text Markup Language (HTML) za pomocą szablonu wąsów, często oznaczanego podwójnymi nawiasami klamrowymi ({{ }}).

Dzięki szablonowi wąsów możesz zintegrować dynamiczną zawartość aplikacji, taką jak dane i właściwości metod, z kodem HTML. Można to osiągnąć, załączając nazwy właściwości danych lub metod z pliku

obiekt opcji w Vue w tych nawiasach klamrowych.

Oto przykład aplikacji Vue wykorzystującej szablon wąsów do uzyskania interpolacji w Vue:

<ciało>
<dzID=„aplikacja”>
<h1>{{ tytuł }}h1>
<P>{{ text.toUpperCase() }}P>
dz>
<scenariusz>
 const aplikacja = Vue.createApp({
 dane() {
 powrót {
 tytuł: „Witamy”,
 tekst: „To jest twój świat?”,
 };
 },
 });
 app.mount("#aplikacja");
scenariusz>
ciało>

Powyższy blok kodu wykorzystuje szablon wąsów do wyświetlania wartości właściwości tytułu w obiekcie danych aplikacji Vue. Możesz także wyświetlać wyniki wyrażeń JavaScript z interpolacją. Na przykład {{text.toUpperCase()}} wyrażenie w P wyświetla wartość tekstową pisaną wielkimi literami, jak pokazano na poniższym obrazku:

Kiedy montujesz aplikację Vue, Vue ocenia wyrażenia w szablonach i renderuje wynikowe wartości w treści HTML. Wszelkie zmiany właściwości danych aktualizują odpowiednie wartości w interfejsie użytkownika.

Na przykład:

<scenariusz>
 const aplikacja = Vue.createApp({
 dane() {
 powrót {
 tytuł: "Cześć",
 tekst: „To jest twój świat?”,
 };
 },
 });
 app.mount("#aplikacja");
scenariusz>

Powyższy blok kodu zmienia właściwość tytułu na „Cześć". Ta zmiana zostanie automatycznie odzwierciedlona w interfejsie użytkownika, ponieważ aplikacja Vue wiąże właściwość tytułu z elementem interfejsu użytkownika, jak pokazano poniżej:

Interpolacja generuje dane tylko wtedy, gdy podwójne nawiasy klamrowe znajdują się między otwierającymi i zamykającymi znacznikami HTML.

Jednokierunkowe wiązanie danych z dyrektywą v-bind

Podobnie jak interpolacja, jednokierunkowe wiązanie danych łączy instancję aplikacji z interfejsem użytkownika. Różnica polega na tym, że wiąże właściwości, takie jak dane i metody, z atrybutami HTML.

Jednokierunkowe powiązanie danych obsługuje jednokierunkowy przepływ danych, uniemożliwiając użytkownikom wprowadzanie zmian wpływających na właściwości danych w wystąpieniu aplikacji. Jest to przydatne, gdy chcesz wyświetlić dane użytkownikowi aplikacji, ale uniemożliwić użytkownikowi ich modyfikowanie.

Możesz osiągnąć jednokierunkowe wiązanie danych w Vue za pomocą v-bind dyrektywa lub jej skrócony charakter (:):

 dyrektywę v-bind 
<wejścietyp="tekst"v-bind: wartość="tekst">
 znak skrócony 
<wejścietyp="tekst":wartość="tekst">

Blok kodu przedstawia użycie dyrektywy v-bind i jej skrót w celu powiązania wartości wejściowego znacznika HTML z właściwością danych tekstowych. Oto przykład aplikacji Vue wykorzystującej v-bind dyrektywa w celu uzyskania jednokierunkowego powiązania danych:

<ciało>
<dzID=„aplikacja”>
<wejścietyp="tekst"v-bind: wartość="tekst">
<P>{{tekst}}P>
dz>
<scenariusz>
 const aplikacja = Vue.createApp({
 dane() {
 powrót {
 tekst: „Vue jest niesamowity!”
 }
 }
 })
 app.mount('#aplikacja')
scenariusz>
ciało>

Powyżej pole wprowadzania i element akapitu wyświetlają wartość tekst nieruchomość. The wartość atrybut pola wejściowego jest powiązany z właściwością tekstową za pomocą metody v-bind dyrektywa.

Ten blok kodu tworzy powiązanie jednokierunkowe, w którym zmiany w tekst właściwość zaktualizuje wartość pola wejściowego, ale zmiany wprowadzone w polu wejściowym nie spowodują aktualizacji tekst właściwość w instancji aplikacji Vue.

Aby to pokazać, możemy zacząć od wartości początkowej tekst nieruchomość, "Vue jest niesamowity!”:

Po zmianie wartości pola wejściowego na „Witaj świecie!", zauważ, że aplikacja Vue nie została zaktualizowana, a tekst w tagu akapitu pozostał taki sam:

Jednak gdy zmienimy wartość tekst nieruchomość do Witaj świecie! w instancji aplikacji Vue zamiast z pola wejściowego pole wejściowe zostanie zaktualizowane, aby odzwierciedlić nową wartość:

Ten sposób wiązania danych jest przydatny w scenariuszach, w których chcesz wyświetlić dane użytkownikowi, ale uniemożliwić użytkownikowi ich bezpośrednie modyfikowanie. Wykorzystując v-bind w Vue.js, możesz ustanowić wiązanie jednokierunkowe, łatwo łącząc dane aplikacji z elementami interfejsu użytkownika.

Dwukierunkowe wiązanie danych z dyrektywą v-model

Dwukierunkowe powiązanie danych umożliwia automatyczne odzwierciedlenie zmian wartości elementu interfejsu użytkownika w bazowym modelu danych i odwrotnie. Najbardziej front-end Frameworki JavaScript tak jak Kątowe wykorzystują dwukierunkowe wiązanie udostępniać dane i obsługiwać zdarzenia w czasie rzeczywistym.

Vue.js umożliwia dwukierunkowe wiązanie z model v dyrektywa. The model v dyrektywa tworzy dwukierunkowe powiązanie danych między elementem wejściowym formularza a właściwością danych. Gdy wpisujesz w elemencie wejściowym, wartość jest automatycznie aktualizowana we właściwości danych, a wszelkie zmiany we właściwości danych spowodują również aktualizację elementu wejściowego.

Oto przykład aplikacji Vue, która wykorzystuje model v dyrektywa w celu osiągnięcia dwukierunkowego wiązania danych:

<głowa>
<tytuł>Dwukierunkowe wiązanie danych w Vuetytuł>
<scenariuszźródło=" https://unpkg.com/vue@3/dist/vue.global.js">scenariusz>
głowa>
<ciało>
<dzID=„aplikacja”>
<wejścietyp="tekst"model v="tekst">
<P>{{tekst}}P>
dz>
<scenariusz>
 const aplikacja = Vue.createApp({
 dane() {
 powrót {
 tekst: „Vue jest niesamowity!”
 }
 }
 })
 app.mount('#aplikacja')
scenariusz>
ciało>

Powyższy blok kodu zawiera element wejściowy z rozszerzeniem model v dyrektywę wiążącą ją z tekst właściwość danych. The tekst właściwość jest początkowo ustawiona na "Vue jest super!".

Pole wprowadzania aktualizuje właściwość tekstu podczas wpisywania w nim i odzwierciedla zmiany właściwości tekstu w pliku P etykietka. Vue.js używa dyrektywy v-model i elementu wejściowego, aby osiągnąć dwukierunkowe wiązanie danych.

Podczas gdy v-bind umożliwia jednokierunkową komunikację z aplikacji Vue do interfejsu użytkownika, v-model zapewnia dwukierunkową komunikację między aplikacją Vue a interfejsem użytkownika. Ze względu na możliwość umożliwienia komunikacji dwukierunkowej, model v jest często używany podczas pracy z elementami formularzy w Vue.

Poszerz swoją wiedzę w zakresie tworzenia aplikacji Vue

Poznałeś wiązanie danych w Vue, w tym interpolację oraz dyrektywy v-bind i v-model. Te powiązania danych są niezbędne, ponieważ stanowią podstawę aplikacji Vue.

Vue ma wiele innych dyrektyw do przypadków użycia, takich jak renderowanie list, wiązanie zdarzeń i renderowanie warunkowe. Zrozumienie dyrektyw Vue pomoże Ci zbudować dynamiczny i interaktywny front-end dla Twoich aplikacji internetowych.