Vue.js——v-model 和 v-bind 的区别答案

【问题标题】：Vue.js——v-model 和 v-bind 的区别
【发布时间】：2017-07-04 18:06:36
【问题描述】：

我正在通过在线课程学习 Vue，讲师给了我一个练习，让我使用默认值制作输入文本。我使用v-model完成了它，但是教练选择了v-bind:value，我不明白为什么。

有人可以简单解释一下这两者之间的区别以及何时更好地使用它们吗？

【问题讨论】：

v-model 主要用于输入和表单绑定，因此在处理各种输入类型时使用它。v-bind 指令允许您通过键入一些在大多数情况下的 JS 表达式来产生一些动态值案例取决于数据模型中的数据 - 因此，请考虑将 v-bind 作为指令，当您想要处理一些动态事物时应该使用它。
在某些情况下，您可以使用它们中的每一个。有时不是，例如：<div v-bind:class="{ active: isActive }"></div> - 你不能使用模型绑定 html 属性，你应该使用 v-bind 指令。对于表单的元素，您将需要使用 v-model 指令 - “它会根据输入类型自动选择正确的方式来更新元素。”
@Alexander 短语“绑定 HTML 属性”帮助我更好地思考这个问题。很高兴看到您对此进行权衡，并就这两种构造实际发生的情况提供更完整的答案。
@Alexander Esp 在组件data 和props...的上下文中...

标签： javascript mvvm frameworks vue.js frontend

【解决方案1】：

来自 here - 记住：

<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 值。 js 值必须存在于您的data 或inject 中。

尽可能使用v-model。必要时使用v-bind/v-on :-) 我希望您的回答被接受。

v-modelworks with all the basic HTML input types（文本、文本区域、数字、单选、复选框、选择）。如果您的模型将日期存储为 ISO 字符串 (yyyy-mm-dd)，您可以使用 v-model 和 input type=date。如果您想在模型中使用日期对象（当您要操作或格式化它们时，这是一个好主意），do this。

v-model 有一些额外的聪明之处，值得留意。如果您使用的是 IME（许多移动键盘，或中文/日文/韩文），则 v-model 将在一个单词完成之前不会更新（输入空格或用户离开该字段）。 v-input 会更频繁地触发。

v-model 也有修饰符.lazy、.trim、.number，覆盖在the doc。

【讨论】：

'尽可能使用 v-model。必要时使用 v-bind/v-on'。很棒的总结！非常感谢！
v-model和v-bind:xxx.sync有什么区别？
@ElMac v-model 是 Vue 组件和 javascript 模型之间的双向绑定。源（绑定的模型端）在 Vue 组件的数据中声明。像这样，Vue 允许您从组件中提取状态，然后直接从组件中修改此状态。这是一种简单的状态管理模式，是 Vue 的标志（在 Angular 和 React 中很难/隐藏/不可能/不鼓励）。 v-bind:xxx.sync 是 Vue 组件与其父组件之间的双向绑定]。状态保持封装状态。它“属于”父母。这不一定更好！
“本质上与”相同——错误。当您使用v-model 时，它会“接触”对象，所有输入都将被重绘，即使是使用v-bind 的输入。当您分配 something = $event.target.value - 它不会重绘
@Alex 你怎么知道的？它有什么实际区别？当您说“所有输入”时，您一次对一个输入使用 v-model。

【解决方案2】：

简单来说 v-model 用于双向绑定，意思是：如果你改变输入值，绑定的数据也会改变，反之亦然。

但v-bind:value 被称为单向绑定，这意味着：您可以通过更改绑定数据来更改输入值，但不能通过元素更改输入值来更改绑定数据。

看看这个简单的例子：https://jsfiddle.net/gs0kphvc/

【讨论】：

' 如果你改变输入值，绑定的数据也会改变，反之亦然。 ' - 即使从小提琴示例中也无法理解“反之亦然”部分。你能解释一下吗？
如果你通过元素改变输入值，绑定数据也会改变，如果你通过例如 Vue API 改变绑定数据，你的输入元素值也会改变。
如何通过Vue API改变绑定数据？
在小提琴示例中，假设我们有一个方法可以像这样this.data_source = 'Some new value' 更改 data_source
data_source，你的意思是从input注入到DOM的HTML，对吧？

【解决方案3】：

v-model
它是双向数据绑定，用于绑定html输入元素，当你改变输入值时，绑定的数据就会改变。

v-model 仅用于 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 它是双向数据绑定'：这两种方式具体是什么？

【解决方案4】：

v-model 用于两种方式的绑定，意思是：如果你改变输入值，绑定的数据也会改变，反之亦然。但是 v-bind:value 被称为单向绑定，这意味着：您可以通过更改绑定数据来更改输入值，但不能通过元素更改输入值来更改绑定数据。

v-model 旨在与表单元素一起使用。它允许您将表单元素（例如文本输入）与 Vue 实例中的数据对象联系起来。

示例：https://jsfiddle.net/jamesbrndwgn/j2yb9zt1/1/

v-bind 旨在与组件一起使用以创建自定义道具。这允许您将数据传递给组件。由于 prop 是响应式的，如果传递给组件的数据发生变化，那么组件将反映这种变化

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

希望这可以帮助您了解基本知识。

【讨论】：

【解决方案5】：

在某些情况下您不想使用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>

【讨论】：