v-model双向绑定的原理

什么是v-model双向绑定？

用户在输入框中输入内容value和开发人员定义的数据data，当用户输入内容改变，data也改变，相应的在页面中渲染的相关的值也会变化，开发人员修改data时，输入框中的value也会跟着变化。

 

双向绑定如何实现的，手写一个双向绑定的实现？

<template>
<div id="app">
  <input v-bind:value="message" @input="changeValue">
  <span>{{ message }}</span>
</div>
</template>

<script>
  new Vue({
    el: '#app',
    data: {
      message: "Hello Vue!"
},
    methods: {
      changeValue(event) {
        this.message = event.target.value;
      }
    }
});
</script>

这样就利用v-bind和v-on实现了双向绑定。