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

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?

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 .

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/

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>

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

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>