Vue的v-model指令的双向绑定原理

基本使用

表单在实际开发中是非常常见的，特别是对于用户信息的提交，需要大量的表单。

Vue中使用v-model指令来实现表单元素和数据的双向绑定，代码示例：

<div id="app">
  <input type="text" v-model="message">
  <h2>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>

案例的解析：

• 当我们在输入框输入内容时，因为input中使用v-model指令绑定了message，所以会实时将输入的内容传递给Vue实例的data属性中的message，message会随着输入内容的改变而改变。

• 当message发生改变时，因为上面我们使用了Mustache语法，将message的值插入到DOM中，当message改变时，DOM也会随之改变。

注意：v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值，而总是将 Vue 实例的数据作为数据来源。
运行效果：{{message}}和data的值会随着输入框内容的改变而改变，{{message}}和输入框内容也会随着data的改变而改变。

双向绑定原理

v-model其实是一个语法糖，它的背后本质上是包含两个操作：

• v-bind指令绑定一个value属性

• v-on指令给当前元素绑定input事件

也就是说：

<input type="text" v-model="message">
等同于
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">

如果除了简单赋值外还有其他操作时，可以将事件处理逻辑封装成一个函数：

<div id="app">
  <input type="text" v-bind:value="message" v-on:input="inputChange">
  <h2>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    methods: {
      inputChange(event) {
        this.message = event.target.value
        // 其他操作...
      }
    }
  })
</script>