Vue 双向数据绑定

之前通过v-bind来完成的数据绑定，属性值和表达式进行绑定，表达式的值发生变化了属性值也跟着发生变化。

单向数据绑定：

    
    
    

 
  

    

        单向数据绑定：           
    
         
    
 

 v-bind最大特点就是单向数据绑定，修改了data里面的值容器里面的值也会跟着改变，但是修改容器里面的值data里面的值是不会发生变化的。

还有另外一个指令可以完成双向的绑定。也就是页面中的值发生变化还能够影响到data的值，这就需要使用v-model指令了。

    
    
    
    

 
  

    

        单向数据绑定：

        双向数据绑定：
    
         
    
 

但是需要注意的是v-modle是不能使用在如h2这种标签上面的。v-model只能应用在表单类元素上（输入类元素，也就是得有value值才行）。

随着输入，删除你的value值是在发生改变的，而h2这种标题类型的是不能够输入的。不能够输入就是没有value值，没有value值就证明不能捕获用户的输入，连输入的值都不能捕获那怎么可能影响数据的变化呢？所以这就是v-model的设计意义和value值绑定。

input 单选框 多选框 select框 多行输入 有很多的表单元素，这些表单元素都有一个特点就是都有value值，因为v-model就是对value进行说话。

Vue中有2种数据绑定的方式：
1.单向绑(v-bind):数据只能从data流向页面（单方向）
2.双向绑定(V-mode1):数据不仅能从data流向页面，还可以从页面流向data（双方向）

备注：
1.双向绑定一般都应用在表单类元素上(如：input、select等)
2.v-model:value可以简写为v-model，因为v-mode1默认收集的就是value值

最后简写如下：

    

        单向数据绑定：

        双向数据绑定：