Vue中v-model和v-bind:value的区别以及手动实现v-model

以下都以input为例：

一、Vue中v-model和v-bind:value的区别

1. v-model

//html
<div>
   <input type="text" v-model="message" />
   <div>{
   
   {message}}</div>
</div>

//js
export default {
  data(){
      return{
       message:'123'
      }
  }, 
}

当修改输入框中的数据时，data中的message也会跟着变化，所以上下都是显示的"123456"

2. v-bind:value

//html
<div>
   <input type="text" v-bind:value="message" />
   <div>{
   
   {message}}</div>
</div>

//js
export default {
  data(){
      return{
       message:'123'
      }
  }, 
}

可以看到当修改输入框中的值时，data中的message并没有跟着改变，所以｛｛message｝｝中仍然显示的是初始时候的“123”

小结：

（1）v-model实现了视图和data中数据的双向绑定，二者有一个改变，另一个也会随之改变。

（2）v-bind:value 只是在初始化的时候把data中的数据绑定到input上，修改input的值不会改变data中的数据。

二、手动实现v-model （v-bind:value+事件）

注意：input的change和input事件都可以实现，区别是input是实时触发而change是失去焦点或者按回车时才会触发。

（实际上,在默认情况下，v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步）

因为我们想要实时改变的效果，所以这里我们选择监听input事件

//html
<div>
     <input type="text" @input="handleInput" :value="message" />
     <div>{
   
   {message}}</div>
     
</div>

//js
export default {
  data(){
      return{
       message:'123'
      }
  }, 
  methods:{
    handleInput(e){
      this.message = e.target.value;
    }
  }
}

或者直接简写：

<input type="text" @input="message=$event.target.value" :value="message" />

v-model原理：

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

v-bind绑定一个value属性
v-on指令给当前元素绑定input事件