Vue.js - różnica między modelem v i v-bind

208

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?

Gustavo Dias
źródło
8
v-modeljest 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-binddyrektywa 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.
Belmin Bedak
5
W niektórych przypadkach możesz użyć każdego z nich. Czasami nie, na przykład: <div v-bind:class="{ active: isActive }"></div>- nie możesz powiązać atrybutu HTML za pomocą modelu, powinieneś użyć v-binddyrektywy. W przypadku elementów formularza będziesz chciał użyć v-modeldyrektywy - „automatycznie wybiera właściwy sposób aktualizacji elementu na podstawie typu danych wejściowych”.
Alexander
1
@Alexander Wyrażenie „wiąż atrybut HTML” pomogło mi lepiej o tym pomyśleć. Byłoby dobrze, gdybyś zastanowił się nad tym z pełniejszą odpowiedzią na temat tego, co faktycznie dzieje się z tymi dwoma konstruktami.
Tom Russell,
@Alexander Esp w kontekście komponentu datai props...
Tom Russell

Odpowiedzi:

429

Od tutaj - Pamiętaj:

<input v-model="something">

jest zasadniczo taki sam jak:

<input
   v-bind:value="something"
   v-on:input="something = $event.target.value"
>

lub (skrócona składnia):

<input
   :value="something"
   @input="something = $event.target.value"
>

Podobnie v-modeljest dwukierunkowe wiązanie dla danych wejściowych formularza . Łączy on w sobie v-bind, który przynosi wartość js do adiustacji i v-on:inputdo aktualizacji wartości js .

Użyj, v-modelkiedy możesz. Użyj v-bind/ v-onkiedy 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-modelze input type=datejeś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-modelma 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-inputbędzie strzelał znacznie częściej.

v-modelma także modyfikatory .lazy, .trim, .number, pokryte doc .

bbsimonbb
źródło
33
„Używaj modelu v, kiedy możesz. Użyj v-bind / v-on, kiedy musisz '. Świetne podsumowanie! Dziękuję Ci bardzo!
尤川豪
Jaka jest różnica między v-modeli v-bind:xxx.sync?
El Mac
2
Model v @ElMac to dwukierunkowe wiązanie między składnikiem Vue a modelem javascript. Źródło (strona modelu powiązania) jest zadeklarowane w danych komponentu Vue. W ten sposób Vue pozwala wyodrębnić stan ze składników, a następnie zmodyfikować ten stan bezpośrednio ze składnika. To prosty wzór zarządzania stanem, który jest znakiem rozpoznawczym Vue (trudny / ukryty / niemożliwy / zniechęcony w Angular i React). v-bind: xxx.sync to dwukierunkowe wiązanie między komponentem Vue a jego elementem nadrzędnym]. Stan pozostaje zamknięty. „Należy” do rodzica. To niekoniecznie jest lepsze!
bbsimonbb
45

W prostych słowach v-modeljest dwukierunkowy wiązań środków: w przypadku zmiany wartości wejściowej, dane związane zostaną zmienione i vice versa .

ale v-bind:valuenazywa 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/

Madmadi
źródło
„jeśli zmienisz wartość wejściową, powiązane dane zostaną zmienione i odwrotnie. „- nie rozumie części„ vice versa ”nawet na przykładzie skrzypiec. możesz to wyjaśnić ?
Istiaque Ahmed
jeśli zmienisz wartość wejściową za pośrednictwem elementu, powiązane dane zostaną zmienione, a także jeśli zmienisz powiązane dane za pomocą na przykład interfejsów API Vue, wartość elementu wejściowego ulegnie zmianie.
Madmadi
jak zmienić powiązane dane za pomocą Vue API?
Istiaque Ahmed
Na przykład skrzypce, powiedzmy, że mamy metodę, która zmienia dane data_source w ten sposóbthis.data_source = 'Some new value'
Madmadi,
przez data_source, masz na myśli HTML wstrzyknięty do DOM z input, prawda?
Istiaque Ahmed
3

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

ex: <input type="text" v-model="name" > 

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="">

<a v-bind:href="home/abc" > click me </a>
Prashant Gurav
źródło
„V-model to dwukierunkowe wiązanie danych”: jakie są te 2 sposoby?
Istiaque Ahmed
2
v-model is for two way bindings means: if you change input value, the bound data will be changed and vice versa. but v-bind:value is called one way binding that means: you can change input value by changing bound data but you can't change bound data by changing input value through the element.

v-model is intended to be used with form elements. It allows you to tie the form 
 element (e.g. a text input) with the data object in your Vue instance.

Example: https://jsfiddle.net/jamesbrndwgn/j2yb9zt1/1/ 

v-bind is intended to be used with components to create custom props. This allows you to pass data to a component. As the prop is reactive, if the data that’s passed to the component changes then the component will reflect this change

 Example: https://jsfiddle.net/jamesbrndwgn/ws5kad1c/3/

Mam nadzieję, że pomoże to w podstawowym zrozumieniu

sda87
źródło
1

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-modeli podziel go, jak wskazano powyżej, odpowiedź

<input
   :value="something"
   @input="something = $event.target.value"
>

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:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input :value="extendedCost" @input="_onInputExtendedCost" />
  <p> {{ extendedCost }}
</div>

<script>
  var app = new Vue({
    el: "#app",
    data: function(){
      return {
        extendedCost: 0,
      }
    },
    methods: {
      _onInputExtendedCost: function($event) {
        this.extendedCost = parseInt($event.target.value);
        // Go update other inputs here
    }
  }
  });
</script>

Vincent Tang
źródło