Vue.js - різниця між v-моделлю і v-bind

Я вивчаю Vue за допомогою онлайн-курсу, і інструктор дав мені вправу зробити вхідний текст із значенням за замовчуванням. Я завершив його за допомогою v-model, але, інструктор вибрав 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
ex:
<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>