Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。（学习视频分享：vue视频教程）

一、安装vue

直接使用script标签引入

二、Vue模板案例

步骤

1、引入vue框架 2、定义1个盒子（根节点） 3、定义1个script标签3.1、定义js对象（根组件） 3.2、通过vue创建1个应用 3.3、将应用挂载到根节点（第二步中创建的盒子）

data()：存放页面中显示数据的地方

立即学习“前端免费学习笔记（深入）”；

	
		
		
		
		

	
	
		
		

			
{{title}}
			
{{name}}
		
		
		
		
		
	

三、基础模板（记住）

四、vue的指令和插值

1、{{}}：插值表达式的语法

{{}}：可以在html中引用data中定义的数据

{{name}}

2、v-text：填充纯文本内容（data中的值）

效果和innerText一样

3、v-html：填充html（data中的值）

效果和innerHtml一样

4、v-pre：填充原始数据

防止vue对标签进行渲染（标签中写的什么，就显示什么）

	
		
		
		
		
	
	
		
		

			
{{name}}
			
{{age}}
			
{{sex}}
			
info中的a1:{info.a1}
			
info中的a2:{info.a2}
			

			

			

			

			
显示两个花括号，中间为js：{{}}
		
		
		
		
	

效果展示：

5、v-bind：属性绑定

语法：
v-bind:属性=‘值’
简写 :属性=‘值’

{{aInfo.title}}
简写
{{aInfo.title}}

	
		
		
		
		
	
	
		
		

			{{aInfo.title}}
			
			{{aInfo.title}}
		
		
		
		
	

样式绑定

	
		
		
		
		
	
		
	
	
		
		

			
			
js
		
		

			
		
py

		
		
	

6、v-on：事件绑定

云网OA

采用JSP开发的办公自动化产品、基于B/S结构，运行环境：JDK v1.5、Tomcat v5.5、MySQL v4.1，三者均为以上版本其他相关内容：可视化流程设计： 流程支持串签、会签和分支流程，可以设置流程节点的修改、删除权限，并可指定流程中各个用户在表单中可以填写的域。智能表单所见即所得设计： 智能设计，自动在数据库中生成表格，方便优化程序 公共交流： 集论坛、博客、聊天室于一体文件柜：C

下载

语法：v-on：事件名称=‘执行的方法’
简写
@事件名=‘执行的方法’

切换显示
简写
切换显示

7、v-show：控制元素显示和隐藏的指令

控制元素显示隐藏的指令：
v-show 值为True则显示，值为false为隐藏

methods：定义页面操作过程中调用的函数（vue组件的方法）
注意点：不要直接把方法定义为箭头函数

例如

switchShow()
定义页面操作过程中调用的函数（vue组件的方法）
注意点：不要直接把方法定义为箭头函数

	
		
		
		
		
	
	
		
		

			
			切换显示
			
			
			
py
		
		
		
		
		
	

8、v-model：数据的双向绑定

双向绑定只用于表单和组件
页面修改数据会变，数据改变，页面也会改

	
		
		
		
		
	
		
		
		
		
		
		

			
账号:
			
密码:
			登录
		
		
		
		
	

9、v-if、v-else-if、v-else：条件渲染

通过条件来控制元素是否渲染到页面

v-if
v-else-if
v-else

	
		
		
		
		
	
	

		

			
{{item}}
			
{{item}}
			
{{item}}
		
		
		
		
	

10、v-for：遍历对象、数组

案例：根据不同的结果，展示不同文字颜色

	
		
		
		
		
	
	
		
		

			

				
				

					
id
					
title
					
result
					
操作
				
				
				

					
{{item.id}}
					
{{item.title}}
					
					
{{item.result}}
					
{{item.result}}
					
{{item.result}}
					
{{item.result}}
					

				
				
				
			
			
		
		
		
		
	

（学习视频分享：web前端开发、编程基础视频）