v-model的实现

方法一：

<template>
  <div>
    <input type="text" v-bind:value="message" v-on:input="valueChange">{
   
   {message}}
  </div>
</template>
<script>
export default {
  data(){
    return{
      message:""
    }
  },
  methods: {
    valueChange(event){
      console.log(event)//结果见注解
      this.message=event.target.value
    }
  },

• event 为event事件，这里为形参，可以为任意值。
• input 事件在用户输入时触发，它是在元素值发生变化时立即触发；
• v-on:input="valueChange"中valueChange不能写为valueChange（event）,否则显示event未定义。（event）省略。
• console.log(event)结果

 其中target指向事件本身，value为输入的值。

方法二：

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

• $event是指当前触发的是什么事件（鼠标事件，键盘事件等）
• $event.target则指的是事件触发的目标，即哪一个元素触发了事件，这将直接获取该dom元素