v-model的基本使用，v-model原理；v-model绑定；v-model的值绑定；v-model修饰符

1_v-model的基本使用
表单提交是开发中常见功能，也是和用户交互的重要手段：

比如用户在登录、注册时需要提交账号密码；
比如用户在检索、创建、更新信息时，需要提交一些数据；
这些都要求可以在代码逻辑中获取到用户提交的数据，通常会使用v-model指令来完成：

v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定；
它会根据控件类型自动选取正确的方法来更新元素；
尽管如此， v-model 本质上是语法糖，它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理；
比如下面的代码，input利用v-model实现了双向绑定。输入框中的内容，通过数据message会同时显示在h2标签中
 

      

2_v-model的原理

v-model的原理其实是背后有两个操作：

• v-bind绑定value属性的值；
• v-on绑定input事件监听到函数中，函数会获取最新的值赋值到绑定的属性中；

• <input v-model="searchText">
  等价于
  <input :value="searchText" @input="searchText = $event.target.value">
  

  _v-model修饰符
  3_lazy
  默认情况下，v-model在进行双向绑定时，绑定的是input事件，那么会在每次内容输入后就将最新的值和绑定的属性进行同
  步；

  如果在v-model后跟上lazy修饰符，那么会将绑定的事件切换为 change 事件，只有在提交时（比如回车）才会触发；
   

      
      <input type="text" v-model.lazy="message">
      <h2>message: {{message}}h2>
  

  3_number
  v-model绑定后的值总是string类型，即使在设置type为number也是string类型；

  如果希望转换为数字类型可以使用 .number 修饰符。 另外，在进行逻辑判断时，如果是一个string类型，在可以转化的情况下会进行隐式转换的。 下面的score在进行判断的过程中会进行隐式转化的；
   

      <!-- 2.number: 自动将内容转换成数字 -->
      <input type="text" v-model.number="counter">
      <h2>counter:  {{counter}}-{{typeof counter}}</h2>
   
      <input type="number" v-model="counter2">
      <h2>counter: {{counter2}}-{{typeof counter2}}</h2>