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输入类型（文本，文本区域，数字，单选，复选框，选择）。如果模型将日期存储为ISO字符串（yyyy-mm-dd）v-model，input type=date则可以使用with 。如果您想在模型中使用日期对象（一旦您要对它们进行操作或设置格式，这是一个好主意），请执行此操作。

v-model有一些额外的聪明之处，值得您注意。如果您使用的是IME（很多移动键盘，或者中文/日文/韩文），则v-model不会更新，直到单词完整（输入空格或用户离开字段）为止。v-input会更频繁地触发。

v-model也有修饰语.lazy，.trim，.number，覆盖的文档。

简而言之 v-model，绑定是两种方式：如果更改输入值，则绑定的数据将被更改，反之亦然。

但是v-bind:value被称为一种方式绑定，这意味着：您可以通过更改绑定数据来更改输入值，但是不能通过element通过更改输入值来更改绑定数据。

看看这个简单的例子：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>