vue v-model 语法糖

今天我们来讲解一下 v-model 语法糖的知识。

1，v-model 本质

v-model，只是一个指令，本质上是一个语法糖。如下代码

本质上是，其中@input是对输入事件的一个监听，:value="test"是将监听事件中的数据放入到input；
在这边需要强调一点，v-model不仅可以给input赋值还可以获取input中的数据，而且数据的获取是实时的，通过绑定value值，当input改变子组件值，让子组件通过事件传递给父组件，进行修改，以达到v-model的绑定原理

2，v-model 常见用法

1，v-model 优势

使用 v-model 来进行双向数据绑定值，

2，v-model 修饰符

1，.lazy(取代 input 监听 change 事件)、

      
我的 v-model 绑定 input 框
      
      
展示 input中值：{{inputValue}}


      
我的 v-model.lazy 绑定 input 框
      
      
展示 input中值：{{inputValueLazy}}

注：只绑定v-model时，input中输入什么，下方就展示什么，频繁触动change事件，但是加上修饰符.lazy时，只有按回车时候，才会触发change事件
同时，绑定的input值，输出的 typeOf 类型是 String

git.gif

2，.number(输入字符串转为有效的数字)、

     
我的 v-model 绑定 input 框
     
     
展示 input中值：{{inputValue}}


      
我的 v-model.number 绑定 input 框
      
      
展示 input中值：{{valueNumber}}

注: v-model绑定的input值，输出的 typeof 类型是 String，它不限制输入的值
但是下方用 number 修饰，只能输入数值，并且输出的 typeof 类型是 Number

git.gif

3，.trim(输入首尾空格过滤)。

      
我的 v-model 绑定 input 框
      
      
展示 input中值：{{inputValue}}


      
我的 v-model.trim 绑定 input 框
      
      
展示 input中值：{{valueTrim}}

注: v-model绑定的input值，它打印出来的值包括收尾的空格
但是下方用 trim 修饰，输入值，它打印出来的值会过滤掉收尾的空格

git.gif

3，v-model 通常绑定的元素

1，radio 单选框绑定

   
v-model绑定radio，单选时，只能绑定一个值sex
   
        男
   
   
        女
   
   
radio 值：{{sex}}


input[type='radio']{
    margin-right:10px
}

注：一般我们使用单选框时，建议使用 label 与 input，这样不管点击radio还是后面的文字，都可以选中。
当单选时候，v-model绑定的应该是同一个值

git.gif

2，checkbox

    
v-model绑定checkbox，多选时，绑定的是一个数组
    苹果
    橘子
    西瓜
    柚子
    荔枝
    芒果
    
你喜欢吃的水果有：{{fruit}}

注：这里多选绑定的值是一个数组

git.gif

3，select

    
v-model绑定select，只能绑定一个值
      
        西瓜
        柚子
        荔枝
        芒果
     
   
喜欢的水果：{{value}}

注：这里绑定的值，是一个value值

git.gif

3，v-model 原理

双向绑定得的实现主要依赖于Object.defineProperty(),通过这个函数可以监听到get,set事件

image.png

其中observer是最主要的部分，用Object.defineProperty来实现数据的劫持，然后用他的set,get方法来通知订阅者，触发update方法，从而实现更新视图

image.png

订阅者模式：每一个{{name}} v-model=‘name’都会添加一个订阅者，从而监听不同部分的变化，每一部分变化时都会循环触发相应的订阅者，更新到页面中。