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;
      }
    }
  })
</script>

3.在radio(单选框)、checkbox(复选框)、select(选择框)中使用

1.v-model在radio中的使用

*单选框中不能显示内容
*用v-model绑定数据后，单选框中value值  等于 data数据中的值，
     则选中单选框data的值会改变，
     则data的值与value相同时，单选框默认被选中。

 注：这里选择框和前面输入框是一样的，
       选择框中 选择了就相当于输入框中 输入了内容。

 v-model双向绑定，都会实时响应给data数据
 data中的数据值 会改为输入框/选择框中的值 (value值)

<div id="app">
  <label for="male">     
    <input type="radio" id="male"  value="男" v-model="sex">男
  </label>
  //两个单选框中v-model相同或name相同时，则只能选一个
  <label for="female">
    <input type="radio" id="female"  value="女" v-model="sex">女
  </label>
  //单选框选择谁就显示谁，
  //选择谁sex()，谁就是单选框的value值，data的值双向绑定value值。 

  <h2>你选择的性别是：{{sex}}</h2>
</div>

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

2.v-model在checkbox中的使用：

复选框分为两种情况：单个勾选框和多个勾选框
  *单个勾选框：
     v-model对应一个布尔值。
     此时input的value并不影响v-model的值。

  *多个复选框：
     当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组。
     当选中某一个时，就会将input的value添加到数组中。

 注：这里选择框和前面输入框是一样的，
     选择框中 选择了就相当于输入框中 输入了内容，

     v-model双向绑定，都会实时响应给data数据，
     data中的数据值 会改为输入框/选择框中的值 (value值)

<div id="app">
  <label for="agree">   
    <input type="checkbox" id="agree" v-model="is" >同意协议
     //单个勾选框
     //复选框中，点击文字也可以被选中
  </label>
  //v-model="true" ,则v-model=value="true"，则被选中；v-model="false"，则未被选中
  //选中时：则value= v-model="true"  ，则数据is为true
  //未选中时：则value= v-model="false"  ，则数据is为false  
  
  <h2>你选择的是：{{is}}</h2>
  //同意，按钮不禁用；不同意，按钮禁用；则是取反的
  <button v-bind:disabled="!is">下一步</button>

  //多个复选框
  <label for="">     
  //复选框中，点击文字也可以被选中
    <input type="checkbox" value="篮球"  v-model="hobbies">篮球
    <input type="checkbox" value="足球"  v-model="hobbies">足球
    <input type="checkbox" value="乒乓球"  v-model="hobbies">乒乓球
    <input type="checkbox" value="羽毛球"  v-model="hobbies">羽毛球
  </label>

  //复选框中，若中谁，就显示谁，则hobbies就修改为谁
  //v-model=value="篮球" ，则hobbies="篮球"，即将篮球加入数组hobbies
  //所以选中谁，就把的value加入到数组hobbies中
  <h2>你爱好是：{{hobbies}}</h2>
</div>

<script>
  const app = new Vue({
    el:"#app",
    data:{
      is:false,              //单选框时
      hobbies:[ ]            //多选框时
    }
  })
</script>

3.v-model在select中的使用

和checkbox一样，select也分单选和多选两种情况。
  *单选：只能选中一个值。
     v-model绑定的是一个值。
     当我们选中option中的一个时，会将它对应的value赋值到mySelect中

  *多选：可以选中多个值。
     v-model绑定的是一个数组。
     当选中多个值时，就会将选中的option对应的value添加到数组mySelects中

<div id="app">
   //1.单选，只能选一个
   <select name="abc" v-model="fruit">
     <option value="苹果">苹果</option>
     <option value="香蕉">香蕉</option>
     <option value="榴莲">榴莲</option>
     <option value="葡萄">葡萄</option>
   </select>
   //在标签属性中：双向绑定为fruit香蕉，则显示为香蕉，
   //当选择一种水果时，修改显示内容，则修改了v-model="fruit"，中的数据的fruit值，
   //修改了data中fruit的值，则会进行不同的响应

   <h2>你选择的水果是：{{fruit}}</h2>

  //2.多选：可以选中多个值。
  //标签中加入multiple后就可以进行多选了, 按ctrl键 进行多选
   <select name="abc" v-model="fruits"  multiple>
     <option value="苹果">苹果</option>
     <option value="香蕉">香蕉</option>
     <option value="榴莲">榴莲</option>
     <option value="葡萄">葡萄</option>
   </select>
  //双向绑定，默认显示为空，选择水果后，显示出水果
  //双向绑定了则显示后，会修改data中数据fruits；
   <h2>你选择的水果是：{{fruits}}</h2>
 </div>

 <script>
   const app = new Vue({
     el:"#app",
     data:{
       fruit:"香蕉",          //默认选择香蕉
       fruits:[]
     }
   })
 </script>

4.v-model的值绑定

1.值绑定就是动态的给value赋值：
     我们前面的value中的值，可以回头去看一下，都是在定义input的时候直接给定的。
     但是真实开发中，这些input的值可能是从网络获取或定义在data中的。
     所以我们可以通过v-bind:value动态的给value绑定值。

2.值绑定
    ：可以直接将复选框中的value绑定一个数组，然后将数组中数据遍历赋值
      则选中哪个就显示哪个值，双向绑定则修改了data中数据。

<div id="app">
  <label for="">
    <input type="checkbox" value="篮球"  v-model="hobbies">篮球
    <input type="checkbox" value="足球"  v-model="hobbies">足球
    <input type="checkbox" value="乒乓球"  v-model="hobbies">乒乓球
    <input type="checkbox" value="羽毛球"  v-model="hobbies">羽毛球
 </label>
 //之前的写法： 将value写死

 //值绑定，则不需要一个个去写固定, 有时候这些值是不可以写死的。
 //一般都可以放在label里面，这样，可以直接在label中遍历origin的每一项
 <label v-for="item in origin">
   <input type="checkbox" v-bind:value="item" v-model="hobbies">{{item}}
 </label>
 
 <h2>你爱好是：{{hobbies}}</h2>
</div>

<script>
  const app = new Vue({
    el:"#app",
    data:{
      is:false,              //单选框时
      hobbies:[ ],           //多选框时
      origin:["篮球","足球","乒乓球","羽毛球"]
    }
  })
</script>

5.v-model的修饰符

1.lazy修饰符：
    默认情况下，v-model默认是在input事件中同步输入框的数据的，
    也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变，
    lazy修饰符可以让数据在失去焦点或者回车时才会更新。

2.number修饰符：
    默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理，
    但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理，
    number修饰符可以让在输入框中输入的内容自动转成数字类型。

3.trim修饰符：
    如果输入的内容首尾有很多空格，通常我们希望将其去除，
    trim修饰符可以过滤内容左右两边的空格。

<div id="app">
  <input type="text" v-model.lazy="message">
   //1.lazy修饰符：则输入好内容后，按enter后就可以的响应了
   //不会实时的修改data数据，输入一个就修改一个
  <h2>{{message}}</h2>

  <input type="number" v-model.number="age">
  //2.number修饰符,可以让在输入框中输入的内容自动转成数字类型。
  <h2>{{typeof age}}</h2>

  <input type="text" v-model.trim="name">
   //3.trim修饰符,在输入框中输入了空格时将空格过滤，name值中不含空格。
   //解决方法：
   //   1.手动获取name值，然后去空格
   //   2.在v-model后面加.trim  ，则输入框中输入了空格时，绑定的name值里面不会有空格  
  <h2>你输入的名字：{{name}}</h2>
</div>

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