Vue v-model数据双向绑定

<div id="app">
   <input type="text" v-model="username" value=""/>
   <h3>{{username}}</h3>
</div>
<script type="text/javascript>"
  let app=new Vue({
     el："#app",
     data:{
         username:""
     }     
  })    
</script>

这样就实现了数据的双向绑定

v-model实现原理：

<input type="text" name="" id="username" value=""/>
<h1></h1>
<script type="text/javascript">
   let inputDom=document.querySelector("#username")
   inputDom.oninput=function(){
      document.querySelector("h1").innerHTML=inputDOM.value
   }
   
</script>

同样可以实现以下效果：

   <input type="text" v-model="username" value=""/>
   <input type="text" @input="username=$event.target.value" :value="username" name="" id="">
  

v-model 等同于这两步：@input="username=$event.target.value" :value="username"