vue双向绑定，指令v-model

1.v-model指令

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

2.v-model指令实现：表单元素和数据的双向绑定
  特点：
   1.之前是用Mustache语法将数据在元素中显示，现在是用v-model将数据绑定在属性里；
     (表单中很多标签是没有反标签的)
   2.之前修改data数据，界面中显示会响应，
      使用v-model指令，则表单中修改绑定的数据，则data中的也会改变；

<div id="app">
   <input type="text" v-model="message">
   //v-model="message" ，这样就实现了双向绑定message 
   //之前用Mustache语法将数据在元素中显示，现在是用v-model将数据绑定在属性里
   //之前修改data数据，界面中显示会响应，现在在表单中修改message值，则data中的也会改变
   <h2>{
   {
   message}}</h2>
   //显示data中message实时的值
</div>

<script>
  const app = new Vue({
   
    el:"#app",
    data:{
   
      message:"你好啊"
    }
  })
</script>

2.v-model的原理

1.v-model的原理
    :v-model是一个语法糖，它的背后本质上是包含两个操作：
    1. v-bind绑定一个value属性;
       (特点1.实现将数据绑定在元素的属性里,动态绑定属性值)
    2. v-on指令给当前元素绑定input事件;
       (特点2.input事件响应，将data中message的值改为输入框中的值(value值))
        控件的value(显示的内容) = data中的值
                   
       //input标签里，有一个input事件，用于监听我们用户输入内容,当输入框中输入内容时，该事件响应；

    注：input事件：用户在输入框中输入内容时，该事件响应。

2.所以：
<input type="text" v-model="message">
   等同于
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">

<div id="app">
  <input type="text" v-model="message">
  // v-model的两个特点是用用v-bind指令和v-on指令来实现的
  <input type="text" v-bind:value="message">
  //特点1.实现将数据绑定在元素的属性里
  <input type="text" v-on:input="message=$event.target.value">
  //特点2.事件响应，就会将data中message的值改为输入框中的值(value值)
  //input标签里，有一个input事件，用于监听我们用户输入内容
  //input事件：用户在输入框中输入内容时，该事件响应；
  //该事件对象的value，即输入框中的值(value值)
  <h2>{
   {
   message}}</h2>
</div>

<script>
  const app = new Vue({
   
    el:"#app",
    data:{
   
      message:"你好啊"
    },
    methods:{
   
      get(event){
   
        this.message=event.target.value;
      }
    }
  })
<