JavaWeb—Vue

vue介绍

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

特点：轻量级、js语法、入门及上手快

vue与jQuery比较：

jQuery关注dom；vue关注数据，不关注dom

vue初步使用介绍

1、引入外部文件

2、构造Vue对象

3、使用{{}}将数据和DOM对象绑定

4、改变数据即可查看结果

eg：用Vue在浏览器页面显示"Hello World"

	
	
	
	
	
	


	

		

			

				
{{content}}
			
		
	

显示结果：

Vue对象介绍

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

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

methods：事件处理方法对象

eg：使用vue实现checkbox、radio、password、select

	
	
	
	
	
	


	

		

			

				苹果
				香蕉
				{{fruits}}
				
				{{name}}
				苹果
				香蕉
				{{fruit}}
				
					选项1
					选项2
					选项3
				
				{{sel}}
			
		
	

显示结果：

vue事件处理

v-on:<事件名>

       v-on:click

eg：点击按钮在文本框中显示信息

	
	
	
	
	
	


	

		

			

				姓名：
				Say Hi
			
		
	

显示结果：

数据绑定

绑定指令

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

绑定位置

文本：文本可以出现的地方

属性：dom对象的属性，如title，src等

css：包括style和class绑定

vue常用指令

条件指令

v-if、

显示

、v-else-if、v-else、v-show

循环指令

v-for、

、

、

表单绑定

v-model

eg1：常用指令的演示，其中通过点击按钮会控制地址的显示与隐藏，隐藏的结果就是被其他字取代

	
	
	
	
	
	


	

		

			

				showhide
				
{{addr.city}},{{addr.street}}
				
地址被隐藏了
				
{{showtime()}}
				

					
{{item}}，序号：{{index}}
					
{{key}}={{value}}，序号：{{index}}
				
				
			
		
	

显示结果：

eg2：省市联动：默认显示第一条数据

过滤器：将时间中的秒过滤出来以及定义人民币符号"￥"

	
	
	
	
	
	


	

		

			

				省份：
					{{item.name}}
				
				城市：
					{{item.name}}
				
				
{{time | formatdate}}
				
{{100 | currency}}
			
		
	

显示效果：

vue自定义组件

组件：页面中完成某个特定功能的模块

使用组件的原因：代码复用。DRY(Don't Repeat Yourself)原则

结构：

        Vue.component('组件名',{props:['属性名'],template:'模板内容'})

       自定义组件使用

              <组件名>

       自定义组件属性绑定

              v-bind:属性名='实际对象'

  

eg：一个简单的组件演示

显示结果：