JavaWeb——vue

VUE

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动，相比于jQuery关注DOM，Vue更关注于数据。

Vue的优点：

vue轻量级，使用熟悉的js语法，入门上手比较快

Vue对象介绍

el：Vue的作用域，即只有在这个作用域里面的dom受Vue控制

data：vue页面的数据模型，该数据模型为一个javascript对象，且在运行过程中该对象的属性不允许增加，因此页面数据模型必须提前定义好

methods：事件处理方法对象

vue事件处理：v-on:<事件名>例如：    v-on:click

绑定指令：
v-bind
{{}}
v-html:以原始数据方式绑定

绑定位置：
文本。文本可以出现的地方
属性。dom对象的属性，如title,src等
css。包括style和class绑定

vue常用指令：

条件指令
v-if

显示

v-else-if
v-else
v-show
循环指令
v-for

表单绑定
v-model

vue自定义组件：使用组件来减少代码的重复，即实现代码复用

下面使用例子来逐步讲解这些特性：

	
	






	

		

			

				
				苹果
				香蕉
				吃饭
				睡觉
				选择年级
					大一
					大二
					大三
					大四
				
				姓名
				密码

			

				省份:
						{{item.name}}
				
				城市:
						{{i.name}}
				
			
			
		
		

			

				sayhello
				showorhide
				
{{time}}

				
{{time|gettime}}

				
{{address.city}}{{address.street}}
				
地址被隐藏了
				
{{time}}
				

					
{{item}},序号:{{index}}
					

			
		
	

效果显示：