Vue基础之v-model表单双向绑定

1. 什么是双向绑定？

      在MVVM（Model View ViewModel ）中，具体来说Model值得是js代码，view指的是DOM对象，也就是HTML中的内容，ViemModel可以看成是二者之间的媒介，本文的媒介由Vue来承担。在MVVM出现之前，人们常常用jquery来处理HTML中的内容，过程大致为：找到标签===>更改标签属性或者标签中的内容。该过程为命令式编程范式，也就是一步一步指定计算机要去做什么。Vue与之不同，Vue使用的是响应式编程范式。何为响应式？当我们在js中对对象的内容进行更改的时候，HTML会立即对更改做出响应，此为响应式。

何为双向绑定？

      即就是既绑定了HTML又绑定了javascript，好处在于不管你是修改了HTML端还是js端，数据均能能够给很好的进行同步。例如当我向input框中输入hello，js代码中的对象变量的值会同步替换为hello

2. v-model实现与input和单选框raido的双向绑定

只需要加上一个v-model属性并和变量message关联就行了

 <input type="text" v-model="message"> 

完整代码

<div id="app">
    <input type="text" :v-model="message>   
    <h2>{{message}}</h2>
    男<input type="radio" value="male" v-model="gender">
    女<input type="radio" value="female" v-model="gender">
    <h2>{{gender}}</h2>
  </div>
  <script src="../static/vue.js"></script>
  <script>
    const app=new Vue({
      el:"#app",
      data:{
        message:"hello",
        gender:"male",
      },
      methods:{
        inputContent(event){
          console.log(event.target.value)
          this.message=event.target.value
        }
      }
    })
  </script>

其实vue在内部帮我们做了两件事情，第一是将变量message中的值放到HTML中，第二是监听HTML中的内容的变化，因为我们也可以自己来实现这两部来实现双向绑定的效果

<div id="app">
    <input type="text" :value='message' @input="inputContent">   
    <h2>{{message}}</h2>
</div>
  <script src="../static/vue.js"></script>
  <script>
    const app=new Vue({
      el:"#app",
      data:{
        message:"hello",
      },
      methods:{
        inputContent(event){
          this.message=event.target.value   //手动将监听到的内容复制给变量
        }
      }
    })
  </script>

3. 与checkbox实现双向绑定

<div id="app">
   <label for="篮球">
     <input type="checkbox" id="篮球" value="篮球" v-model="choice">篮球
   </label>
   <label for="足球">
     <input type="checkbox" id="足球" value="足球" v-model="choice">足球
   </label>
   <label for="羽毛球">
     <input type="checkbox" id="羽毛球" value="羽毛球" v-model="choice">羽毛球
   </label>
   <label for="乒乓球">
     <input type="checkbox" id="乒乓球" value="乒乓球" v-model="choice">乒乓球
   </label>
   <h2>{{choice}}</h2>
</div>
<script src="../static/vue.js"></script>
<script>
    const app=new Vue({
      el:"#app",
      data:{
        choice:[]
      }
    })
</script>

3. 与select实现双向绑定

<div id="app">
  <label for="1">
    <select id="1" v-model="provices" multiple>
      <option value="山东">山东</option>
      <option value="河南">河南</option>
      <option value="河北">河北</option>
      <option value="天津">天津</option>
    </select>
  </label>
  <h1>{{provices}}</h1>
</div>
<script src="../static/vue.js"></script>
<script>
  let app = new Vue({
    el: "#app",
    data: {
      provices:"山东",
    }
  })
</script>

4. 值绑定

实际开发过程中，数据并不是我们写死的，往往是从数据库中返回的数据，因为我们需要将返回的数据动态的放到HTML中，该过程称为值绑定

checkbox与select的值绑定代码实例

 <div id="app">
    <label v-bind:for="item" v-for="item in proviences" >
      <input type="checkbox" :id="item" :value="item" v-model="choice_proviences">  {{item}}
    </label>
    <h2>{{choice_proviences}}</h2>
  </div>
  <div id="app2">
    <label for="2">
      <span>省份</span>
      <select  id="2" v-model="select_proviences" multiple>
        <option :value="i" v-for="i in proviences_select" >{{i}}</option>
      </select>
    </label>
    <h2>{{select_proviences}}</h2>
  </div>
  <script src="../static/vue.js"></script>
  <script>
    let app = new Vue({
      el: "#app",
      data: {
        proviences: ["山东","河南","河北","天津","北京","贵州"],
        choice_proviences:[]
      }
    })
  </script>
  <script>
    let app2 = new Vue({
      el: "#app2",
      data: {
        proviences_select: ["山东","河南","河北","天津","北京","贵州"],
        select_proviences:["山东"],
      }
    })
  </script>

5. v-model的修饰符

1. .lazy
   拿input框来说，有时候我们并不希望数据立即相应input框中的内容做出更改，而当用户按下enter键或者当输入框失去焦点的时候在进行更改。用法 v-model.lazy=“variable”
2. .number
   v-model默认赋值的类型为字符串，如果我们不想要字符串类型而是数字类型，
3. .trim
   移除首尾的空格