Vue.js - разница между v-моделью и v-bind

Я изучаю Vue с помощью онлайн-курса, и инструктор дал мне упражнение для ввода текста со значением по умолчанию. Я закончил это, используя v-модель, но преподаватель выбрал v-bind: value, и я не понимаю почему.

Может кто-нибудь дать мне простое объяснение разницы между этими двумя и когда лучше использовать каждый?

От здесь - Запомнить:

<input v-model="something">

по сути то же самое, что и:

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

или (сокращенный синтаксис):

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

Так v-modelчто двусторонняя привязка для ввода формы . Она сочетает в себе v-bind, что приносит значение Js в разметку, и v-on:inputчтобы обновить Js значения .

Используйте, v-modelкогда можете. Используйте v-bind/ v-onкогда вы должны :-) Я надеюсь, что ваш ответ был принят.

v-model работает со всеми основными типами ввода HTML (текст, текстовое поле, число, радио, флажок, выберите). Вы можете использовать v-modelс , input type=dateесли ваша модель хранит даты как строки ISO (гггг-мм-дд). Если вы хотите использовать объекты даты в вашей модели (хорошая идея, как только вы собираетесь манипулировать или форматировать их), сделайте это .

v-modelесть несколько дополнительных умов, о которых стоит знать. Если вы используете IME (много мобильных клавиатур, или китайская / японская / корейская), v-модель не будет обновляться, пока не будет заполнено слово (введен пробел или пользователь покидает поле). v-inputбудет стрелять гораздо чаще.

v-modelтакже имеют модификаторы .lazy, .trim, .number, покрытые в доке .

Проще говоря v-model, для двухстороннего связывания это означает: если вы измените входное значение, связанные данные будут изменены, и наоборот .

но v-bind:valueназывается односторонним связыванием, что означает: вы можете изменить входное значение, изменив связанные данные, но вы не можете изменить связанные данные, изменив входное значение через элемент .

посмотрите на этот простой пример: https://jsfiddle.net/gs0kphvc/

v-модель -
это двухсторонняя привязка данных, она используется для привязки html-элемента ввода, когда вы меняете входное значение, тогда ограниченные данные будут изменены.

v-модель используется только для элементов ввода HTML

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

v-bind -
это односторонняя привязка данных. Это означает, что вы можете только привязать данные к элементу ввода, но не можете изменить ограниченные данные, изменяя элемент ввода. v-bind используется для привязки атрибута html,
например:
<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/

Надеюсь, что это поможет вам с базовым пониманием

Есть случаи, когда вы не хотите использовать v-model. Если у вас есть два входа, и каждый зависит друг от друга, у вас могут быть циклические проблемы со ссылками. Обычные случаи использования, если вы строите бухгалтерский калькулятор.

В этих случаях не рекомендуется использовать наблюдатели или вычисляемые свойства.

Вместо этого возьмите v-modelи разделите его, как указано выше.

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

На практике, если вы разделяете свою логику таким образом, вы, вероятно, будете вызывать метод.

Вот как это будет выглядеть в сценарии реального мира:

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