Uczę się Vue na kursie online, a instruktor dał mi ćwiczenie, aby utworzyć tekst wejściowy z wartością domyślną. Ukończyłem go używając modelu v, ale instruktor wybrał v-bind: wartość i nie rozumiem dlaczego.
Czy ktoś może dać mi proste wyjaśnienie różnicy między tymi dwoma i kiedy lepiej użyć każdego z nich?
javascript
mvvm
frameworks
vue.js
frontend
Gustavo Dias
źródło
źródło
v-model
jest używany głównie do licytowania danych wejściowych i formularzy, więc używaj go, gdy masz do czynienia z różnymi typami danych wejściowych.v-bind
dyrektywa pozwala na wygenerowanie pewnej wartości dynamicznej przez wpisanie wyrażenia JS, które w większości przypadków zależy od danych z modelu danych - pomyśl więc o v-bind jako dyrektywie, której powinieneś użyć, gdy chcesz poradzić sobie z pewnymi dynamicznymi rzeczami.<div v-bind:class="{ active: isActive }"></div>
- nie możesz powiązać atrybutu HTML za pomocą modelu, powinieneś użyćv-bind
dyrektywy. W przypadku elementów formularza będziesz chciał użyćv-model
dyrektywy - „automatycznie wybiera właściwy sposób aktualizacji elementu na podstawie typu danych wejściowych”.data
iprops
...Odpowiedzi:
Od tutaj - Pamiętaj:
jest zasadniczo taki sam jak:
lub (skrócona składnia):
Podobnie
v-model
jest dwukierunkowe wiązanie dla danych wejściowych formularza . Łączy on w sobiev-bind
, który przynosi wartość js do adiustacji iv-on:input
do aktualizacji wartości js .Użyj,
v-model
kiedy możesz. Użyjv-bind
/v-on
kiedy musisz :-) Mam nadzieję, że twoja odpowiedź została zaakceptowana.v-model
współpracuje ze wszystkimi podstawowymi typami wprowadzania HTML (tekst, obszar tekstowy, liczba, radio, pole wyboru, wybierz). Można korzystaćv-model
zeinput type=date
jeśli przechowuje daty jako ciągi modelu ISO (rrrr-mm-dd). Jeśli chcesz używać obiektów daty w swoim modelu (dobry pomysł, gdy tylko będziesz nimi manipulować lub sformatować), zrób to .v-model
ma kilka inteligentnych cech, o których warto wiedzieć. Jeśli korzystasz z edytora IME (wiele klawiatur mobilnych lub chiński / japoński / koreański), model v nie będzie aktualizowany, dopóki słowo nie zostanie uzupełnione (spacja zostanie wprowadzona lub użytkownik opuści pole).v-input
będzie strzelał znacznie częściej.v-model
ma także modyfikatory.lazy
,.trim
,.number
, pokryte doc .źródło
v-model
iv-bind:xxx.sync
?W prostych słowach
v-model
jest dwukierunkowy wiązań środków: w przypadku zmiany wartości wejściowej, dane związane zostaną zmienione i vice versa .ale
v-bind:value
nazywa się to wiązaniem jednokierunkowym, co oznacza: możesz zmienić wartość wejściową, zmieniając powiązane dane, ale nie możesz zmienić powiązanych danych, zmieniając wartość wejściową przez element .sprawdź ten prosty przykład: https://jsfiddle.net/gs0kphvc/
źródło
this.data_source = 'Some new value'
data_source
, masz na myśli HTML wstrzyknięty do DOM zinput
, prawda?Model v
to dwukierunkowe wiązanie danych, służy do wiązania elementu wejściowego HTML podczas zmiany wartości wejściowej, a następnie ograniczane są dane powiązane.
Model v jest używany tylko dla elementów wejściowych HTML
v-bind
to jednokierunkowe wiązanie danych, oznacza, że możesz powiązać dane tylko z elementem wejściowym, ale nie możesz zmienić ograniczonego elementu danych zmieniającego dane. v-bind służy do wiązania atrybutu HTML
np:
<input type="text" v-bind:class="abc" v-bind:value="">
źródło
Mam nadzieję, że pomoże to w podstawowym zrozumieniu
źródło
Są przypadki, w których nie chcesz używać
v-model
. Jeśli masz dwa dane wejściowe i każdy z nich zależy od siebie, możesz mieć problemy z referencjami cyklicznymi. Typowe przypadki użycia to budowanie kalkulatora księgowego.W takich przypadkach używanie obserwatorów lub obliczanych właściwości nie jest dobrym pomysłem.
Zamiast tego weź swój
v-model
i podziel go, jak wskazano powyżej, odpowiedźW praktyce, jeśli oddzielasz swoją logikę w ten sposób, prawdopodobnie będziesz wywoływał metodę.
Tak to wyglądałoby w scenariuszu z prawdziwego świata:
źródło