Vue - v-model原理

v-model相当于一个自定义指令，通过事件监听和属性绑定实现双向数据绑定。

    
        
        
        
        
    
    
        

            
            {{msg}}
            改变msg
        
        
    

• 1. 使用:value绑定msg到input上
• 2. 使用@input监听输入事件，当输入时把输入的内容又赋值给msg

总结：

• data -> view : 通过v-bind实现数据绑定
• view -> data : 通过oninput监听输入并修改data

扩展：在子组件中实现v-model

 

    
        
        
        
        
    
    
        

            
            {{msg}}
            修改data
        
        
    

• 在子组件中只不过是添加了父子组件传值的过程而已
  其中
  等价于