Vue学习笔记之表单绑定

1. 概述

1.1. 什么是数据的双向绑定

Vue.js是一个MV VM框架， 即数据双向绑定， 即当数据发生变化的时候， 视图也就发生变化， 当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。 ??值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vue x那么数据流也是单项的，这时就会和双向数据绑定有冲突。

1.2. 为什么要实现数据的双向绑定

在Vue.js中，如果使用vuex， 实际上数据还是单向的， 之所以说是数据双向绑定，这是用的UI控件来说， 对于我们处理表单， Vue.js的双向数据绑定用起来就特别舒服了。即两者并不互斥，在全局性数据流使用单项，方便跟踪；局部性数据流使用双向，简单易操作。

2. 在表单中使用双向数据绑定

你可以用v-model指令在表单、及元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇， 但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 ??注意：v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将Vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值

2.1. 单行文本

主要代码：

Message is: {{ message }}

完整代码：

	
		
		
		
		
	
	
		

			
			
Message is: {{ message }}
		
		
	

实现效果:

2.2. 多行文本

主要代码：

Multiline message is:
{{ message }}

完整代码：

	
		
		
		
		
	
	
		

			Multiline message is:
			
{{ message }}
			

			
		
		
	

实现效果:

2.3. 单复选框

主要代码：

{{ checked }}

完整代码：

	
		
		
		
		
	
	
		

			
			{{ checked }}
		
		
	

实现效果:

2.4. 多复选框

多个复选框，绑定到同一个数组：
主要代码：

Jack

John

Mike


Checked names: {{ checkedNames }}

完整代码：

	
		
		
		
		
	
	
		

			
			Jack
			
			John
			
			Mike
			

			Checked names: {{ checkedNames }}
		
		
	

实现效果:

2.5. 单选按钮

主要代码：

  
  One
  

  
  Two
  

  Picked: {{ picked }}

完整代码：

	
		
		
		
		
	
	
		

			

				
				One
				

				
				Two
				

				Picked: {{ picked }}
			
		
		
	

实现效果:

2.6. 下拉框

主要代码：

  
    请选择
    A
    B
    C
  
  Selected: {{ selected }}

完整代码：

	
		
		
		
		
	
	
		

			

				
					请选择
					A
					B
					C
				
				Selected: {{ selected }}
			
		
		
	

实现效果:

2.7. 多选框

主要代码：

  
    A
    B
    C
  
  

  Selected: {{ selected }}

完整代码：

	
		
		
		
		
	
	
		

			

				
					A
					B
					C
				
				

				Selected: {{ selected }}
			
		
		
	

实现效果:

3. 参考资料

[1]表单输入绑定 — Vue.js 中文文档

[2]Vue课堂笔记/04表单双绑、组件.md · 卢泽华/Vue - 码云 - 开源中国