Vue之for列表渲染、methods事件和model表单绑定

文档：https://cn.vuejs.org/v2/guide/list.html

v-for指令可以绑定数组的数据来渲染一个项目列表

v-for指令需要使用item in items形式的特殊语法，items是源数据数组并且item是数组元素迭代的别名。

		

			
			

				
				

					{{ todo.text }}
				

			

		

效果

		

			
			

				{{ todo.text }}-{{index}}
			

		

文档：https://cn.vuejs.org/v2/guide/list.html#%E5%9C%A8%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94%A8-v-for

		

			
			

				
				

					{{ value }}
				

			

		

效果

		

			
			

				
				

					{{ item.title }}~~~{{item.author}}~~~{{item.publishedAt}}
				

			

		

效果

文档：https://cn.vuejs.org/v2/guide/events.html

【methods事件一般包括鼠标点击、鼠标滑动和鼠标触碰等】

可以用v-on指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

		

			Add 1
			

				The button above has been clicked {{ counter }} times.
			

		

效果

然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在v-on指令中是不可行的。因此v-on还可以接收一个需要调用的方法名称

		

			Add 1
		

		

			Add {{counter}}
		

v-on: 简写 @

• 单行文本框

• 多行文本框

• 单选框

• 多选框
• 下拉框

文档：https://cn.vuejs.org/v2/guide/forms.html

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

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

		

			
			
				
				
					
					
						
						
							用 户 名
						

						
							
						

					

					
						
						
							密码
						

						
							
						

					

					
						
						
							确认密码
						

						
							
						

					

					
						
						
							性别
						

						
							男女
						

					

					
						
						
							爱好
						

						
							足球篮球兵乓球
						

					

					
						
						
							所在城市
						

						
							北京上海广州深圳
						

					

					
						
						
							个人简介
						

						
							
						

					

				

			
注册
		

效果