vue之路 v-model

<div>
      <input type="text" @input="handleInput" placeholder="">
      <p>不使用v-model输入内容:{{message}}</p>
      <input v-model="message2">
      <p>使用v-model输入内容：{{message2}}</p>
      <input type="text" :value="message3" @input="message3=$event.target.value">
      <p>v-model真实实现：{{message3}}</p>
</div>
<script>
    handleInput(val){
      this.message=val.target.value;
    }
</script>

v-model实现了表单输入的双向绑定 是一个特殊的语法糖：使用v-model时，如果用中文输入法输入中文，一般在没有选定词组之前（拼音阶段）vue是不会更新数据的，当敲下汉字时触发更新。如果希望总是实时更新，可以用@input来替代v-model。

v-model 真正实现如下：
1.将输入框中的值绑定到message3变量上，这是单向绑定，意味着改变message3变量的值可以改变input的value
2.监听input事件（input输入框都有该事件，当输入内容时自动触发该事件），当输入框输入内容就单向改变message3的值

总结：

• v-bind只能实现单向绑定
• v-model（v-bind+触发的input事件）实现双向绑定

参考文章：https://www.cnblogs.com/wind-lanyan/p/7899428.html