v-model的理解与使用

v-model的学习

步骤：
1、了解v-model的本质
2、了解v-model的使用方法

v-model的本质

如下代码<input v-model="test">，本质上是<input :value="test" @input="test = $event.target.value">，其中@input是对输入事件的一个监听:value="test"是将监听事件中的数据放入到input，并且，v-model不仅可以给input赋值还可以获取input中的数据，而且数据的获取是实时的，因为语法糖中是用@input对输入框进行监听的。可以在如下div中加入<p>{{ test }}</p>获取input数据，然后去修改input中数据会发现<p></p>中数据随之改变，即v-model可以用于在表单控件或者在组件上创建双向绑定。

<div id="app">
  <input v-model="test">
  <!-- <input :value="test" @input="test= $event.target.value">--> <!--语法糖-->
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      test: '这是一个测试'
    }
  });
</script>

v-model的使用方法

第一步：在页面引入vue

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>

第二步：表单控件上使用v-model

如下面代码，分别是v-model在input不同的组件中的应用，但是大体用法相同。注意：像下面代码中复选框这样需要接收多条数据的情况下，在data里面应该由数组与其对应二不是字符串。

<!--下拉框-->
<div id="app">
  <select v-model="selected">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      selected: ''
    }
  })
</script>

<!--单选按钮-->
<div id="app">
  <input type="radio" id="A" value="AAAA" v-model="picked">
  <label for="A">A</label>
  <br>
  <input type="radio" id="B" value="BBBB" v-model="picked">
  <label for="B">B</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      picked: ''
    }
  })
</script>

<!--复选框-->
<div id="app">
  <input type="checkbox" id="one" value="A" v-model.lazy="checkedNames">
  <label for="one">选项一</label>
  <input type="checkbox" id="two" value="B" v-model.lazy="checkedNames">
  <label for="two">选项二</label>
  <input type="checkbox" id="three" value="C" v-model.lazy="checkedNames">
  <label for="three">选项三</label>
  <br>
  <span>Checked: {{ checkedNames }}</span>
</div>
<script>
new Vue({
    el: '#app',
    data: {
    checkedNames: []
    }
})

第三步（可选项）：v-model的修饰符使用

v-model也可以和.lazy、.trim、.number、.stop这些修饰符一起使用

<!-- 在每次 input 事件触发后将输入框的值与数据进行同步，添加 lazy 修饰符，从而转变为使用 change 事件
进行同步 -->
<input v-model.lazy="msg" >

<!--去除字符串首尾的空格-->
<input v-model.trim="msg">

<!--将数据转化为值类型-->
<input v-model.number="age" type="number">

<!--阻止冒泡-->
<input v-model.stop="op" type="text">

总结

以上便是我总结出来的vue中v-model的理解与使用，v-model是学习vue过程中的一个基础的知识点，虽然用法很简单，但是它的原理和修饰符扩展却也需要我们牢记。在学习过程中，我们也始终要保持一个谦虚的态度，即便已经学有所成，也要对以前学过的知识不断复习，已达到温故知新的效果。学习，是一个有苦到甜的过程，就如在逆战班中学习的时候，虽然初学vue时很是艰苦，但是当一个个知识点被自己理解透彻时，那种成功的喜悦却是发自内心的。