v-model的使用和原理（重要）

表单绑定v-model

表单控件在实际开发中是非常常见的，特别是对用户信息的提交，需要大量的表单。
Vue中使用v-model指令来实现表单元素和数据的双向绑定。

案例解析：
1.当我们在输入框输入内容时
2.因为input中的v-model绑定了message,所以会实时将输入的内容传递给message,message发生改变。
3.当message发生改变时，因为我们上面使用Mustache语法，将message的值插入到DOM中,所以DOM会发生响应的改变。
4.所以，通过v-model实现了双向的绑定。

<div id="app">
  <!--<input type="text" v-model="message">-->
  <!--<input type="text" :value="message" v-on:input="valueChange">-->
  <input type="text" :value="message" @input="message=$event.target.value">
  {{message}}</div>

<script src="../vue.min.js"></script>
<script>
  const app=new Vue({
    el:'#app',
    data:{
      message:'hello',
    },
    methods:{
      valueChange(event){
        // console.log('-----')
        this.message=event.target.value;
      }
    }
  })
</script>

当然，我们也可以将v-model用于textarea元素。
用法二：绑定textarea元素

 <textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>
  <p>输入的内容是：{{message}}</p>

v-model原理

v-model其实是一个语法糖，它的背后本质上是包含两个操作：
1.v-bind绑定一个value值
2.v-on指令给当前元素绑定input事件