【vue】双向绑定__v-model指令如何帮你简化代码

测开也需懂的前端小知识

双向绑定------ v-model指令

双向绑定

Vue bom和dom层的双向绑定，实现数据实时更新。而传统的单向数据绑定一般是数据影响页面，页面不影响数据。
在Vue中数据改变，视图无需刷新即可实时改变，而jQuery中数据改变，视图需要用户手动刷新才会改变。
也就是说，对于vue，bom 层只需一个变量，变量值更新，dom层任何地方都可以同步到这个更新后的变量值。无论是前端去更新还是后台去更新这个变量，只要使用到该变量的任何地方都会实时更新。

Vue是通过 v-model 指令在表单 、 及 元素上创建双向数据绑定。

示例如下：

bom层

<script>
export default {
  name: 'home',
  data() {
    return {
      message: 'default data',
    };
  },
}
<script>

dom层

<input v-model="message" placeholder="edit me" />
<p>Message1 is: {{ message }}</p>
<input v-model="message" placeholder="edit me" />
<p>Message2 is: {{ message }}</p>

测试：修改第1个输入框的效果图

测试：修改第2个输入框的效果图

v-model 指令会根据控件类型自动选取正确的方法来更新元素。本质上就是个语法糖。它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理。