vue数据双向绑定

5.Vue数据双向绑定

5.1.什么是双向数据绑定

Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。

值得注意的是，我们所说的数据双向绑定，一定是对于 UI 控件来说的，非 UI 控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用 vuex，那么数据流也是单项的，这时就会和双向数据绑定有冲突。

5.2 怎么实现双向数据绑定

v-model

v-model 指令可以在表单及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

注意：v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值!

测试案例：

用非v-model方式的时候，是不能双向绑定的

		
	
     
        
        
{{msg}}
    
    
	 

改为v-model方式绑定：

     
        
        
{{msg}}
    
    
	 

案例2：

   

        
            --请选择--
            北京
            上海
            武汉
        
        
{{selected}}
    
     

案例3：

   

        
        吃饭
        
        睡觉
        
        打豆豆

        
选中的值: 
        

          
{{item}}
        
    
    
    
    

6.Vue事件绑定

v-on

  v-on:事件名 = “方法名”
  简写方式： @事件名 = “方法名”
  事件名有哪些： click|keydown|keyup|mouseover|mouseout|自定义事件名

测试案例1：

v-on： 可以简化为@

测试案例2：

	
		
		
		
	
	
		
		输入分数，按回车，显示等级
		
		

			
			
等级:{{level}}
			
			
			
		
		
		
		 
		
		
	

测试结果：

7.综合案例

根据前面学习的vue的基础语法和事件绑定，实现一下商品的查询，添加，删除功能。

测试案例：

    
    
    


    

        

            

                
商品操作页面
            
		 

		                 序号：
		                 名称：
		                 价格：
		      

		                   搜索：
                
            
        
        

                

            

                    
序号
                    
名称
                    
价格
                    
操作
                
            
        

            

                
{{ item.id }}
                
{{ item.name }}
                
{{ item.price }}
                
                
删除
            
        
      
    

    

测试结果：

8.Template 标签

template的作用是模板占位符，可帮助我们包裹元素，但在循环过程当中，template不会被渲染到页面上

比如：

{{value}}

这个循环是做在div上面的，如果需要循环的内容很多，比如span标签也要做这个循环

{{value}}
{{value}}

则需要把循环提出来,但这样会多一个div标签

    
{{value}}
    {{value}}

如果不想多一个标签，可以用template，template不会渲染到页面上

另外，template可以用到制作模板。

方法1：直接在vue对象中定义

方法2：写在template标签里

方法3：写在script标签里