目录

vue

概述

MVVM框架

入门案例 

 创建HTML文件,并引入vue.js

练习

Vue的基础语法

–1,运算符&函数

–2,解析类型丰富的data

–3,data的三种写法

二,Vue的指令

–1,概述

–2,v-model & v-cloak

-3,v-if & v-show & v-for

–4,v-on & v-bind

三,Vue组件Component

–1,概述

–2,全局组件

–3,局部组件

四,Vue的Ajax

–1,Ajax的概述

–2,Ajax的原理

–3,axios（导入）

–4,测试

五,Vue路由

–1,概述

–2,使用步骤（测试）

–3,总结

扩展：

–1观察者模式

HBuilderX自定义模板

–1,自定义HTML模板

–2,vue模板.txt

–3,创建新文件调用模板

vue

概述

是一个轻量级的前端框架.封装了HTML CSS JS的代码.
特点:
1, 是一个轻量级的 渐进式的框架, 按需配置
2, 实现了数据驱动/双向绑定 和 组件化的思想(高内聚)
3, vue框架可以避免了DOM的API
4, 遵循了MVVM设计模式,实现前端代码的松耦合
M是Model,是指数据
V是View,是指视图
VM是ViewModel,是指在指定视图里渲染指定数据
官网：

https://cn.vuejs.org/ #官网

https://cdn.jsdelivr.net/npm/vue/dist/vue.js #下载最新版本
 

MVVM框架

入门案例 

把vue.js导入到你的项目中

上面看似结构非常简单，其实却深藏奥秘。和传统框架不同，Vue采用了最新的MVVM框架，它最大的特点就是：传统js机制操作的是页面，如我们之前写的html+css+js案例，大家会发现页面和页面里的数据混杂在一起。

而MVVM框架体系引入后端早已深入人心的分层思想，是后端MVC框架的延伸，实现把数据和页面分离。我们可以在页面布局好后，只对数据进行操作，当数据改变，页面上的内容会自动随之改变，而无需开发者开发专门的代码去改变，如之前ajax技术实现的局部刷新。

简而言之，MVVM框架实现了页面和数据的分离，代码结构更加清晰，责任更加明确，同时实现自动化，数据变化，页面随之变化，无需写代码，非常棒的一个改进。这是javascript、jquery、bootstrap等无法做到的，也是前端为何开始推崇Vue这些框架的根本原因，也标示着jquery的终结。

 创建HTML文件,并引入vue.js

	
		
		
		
		
	
	
		
		
 {{message}} 
		
		
	

练习

	
		
		
		
		
	
	
		
		

			姓名:{{name}}
			年龄:{{age}}
		
		
		
	

Vue的基础语法

–1,运算符&函数

	
		
		
		
		
	
	
		
		

			加减乘除运算: {{3+2}} {{3-2}} {{3*2}} {{3/2}} {{3%2}}
			三元运算符: {{ age > 18 ? "成年人" : "未成年" }}
			字符串的常见操作:{{str}} {{str.length}} {{str.concat(100)}}
		
			调用函数: {{ show() }}  {{ print(100) }}  {{add(1,2)}}
		
		
		
	

–2,解析类型丰富的data

	
		
		
		
	
	
		

			{{name}}
			
解析vue对象的数据:
			
姓名:{{person.name}}  年龄:{{person.age}} 
			
解析vue数组的数据:
			
{{hobby}}  {{hobby[0]}}  {{hobby[1]}} 
 
			
			
{{persons[0].name}}  {{persons[1].age}}
		
		
	

–3,data的三种写法

	
		
		
		
		
	
	
		
{{msg}}
		
	

	
		
		
		
	
	
		

			{{msg}} {{hobby[0]}}
		
		
	

二,Vue的指令

–1,概述

就是Vue框架提供的一些有特殊意义的代码,都有v-的前缀
常见的指令: v-if v-for v-on …
使用方式: 在开始标签处,添加新的属性,有v-的前缀的标识

–2,v-model & v-cloak

	
		
		
		
		
	
	
		
		

			{{address}}  {{address}} {{address}}
			
			
		
		{{address}}
		
	

-3,v-if & v-show & v-for

	
		
		
		
	
	
		

			
{{name}}
			
			

			

			
			
年成人
 
			
年成人
 
			
			
金领
			
白领
			
屌丝
			
			
{{i}}
			
{{i}}--{{index}}
		
		
	

–4,v-on & v-bind

	
		
		
		
	
	
		
		按钮1
		百度一下
		
		

			
			按钮2
			按钮3
			按钮4
			
			
			百度一下1
			
			百度一下2
			百度一下3
		
		
	

三,Vue组件Component

–1,概述

好处:可以提高前端代码的复用性.
使用步骤:
1,定义组件: 全局组件 + 局部组件
2,使用组件: 就像使用HTML的标签一样

–2,全局组件

–3,局部组件

四,Vue的Ajax

–1,Ajax的概述

Ajax 即Asynchronous Javascript And XML( 异步的 )
Ajax并不是一种新的编程语言，而是多种技术的综合应用
Ajax是 客户端 的技术，它可以实现 局部刷新 网页
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
可以避免刷新整个网页,而实现了局部刷新的效果,异步访问的.
提高了网页的动态性,提高了网页的响应速度.
在Vue框架中,封装了Ajax的复杂语法,技术命名叫axios,
使用步骤: 导入vue.js + axios.js 文件
语法: axios.get(java程序的访问方式).then( a => { console.log(a); } )
 

–2,Ajax的原理

AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

–3,axios（导入）

1, Vue中封装了ajax并增强了它，在异步并发处理优于原生ajax。称为：axios（ajax input output system）
2, 使用步骤: 要使用一个单独的js文件,注意导入顺序

 3, 语法

axios.get("url地址信息","参数信息").then(res=>{
	console.log(res.data);
})

–4,测试

	
		
		
		
		
		
	
	
		

			按钮
		
		
	

五,Vue路由

–1,概述

说明: 用户发起一个请求,在互联网中经过多个站点的跳转.最终获取服务器端的数据. 把互联网中网络的链路称之为路由. (网络用语)
VUE中的路由: 根据用户的请求URL地址,展现特定的组件(页面)信息. (控制用户程序跳转过程)

基于Vue组件化的思想,
从用户发起一个请求,一直到展示指定组件,这个过程就是Vue路由负责的
使用步骤: vue.js + vue-router.js 引入到网页中 

–2,使用步骤（测试）

	
		
		
		
		
		
	
	
		
		

			
			主页
			帮助页
			
			
		
		
		
	

–3,总结

扩展：

–1观察者模式

设计模式是最精髓的东西，是软件思想的体现，是软件的灵魂。如三大框架SSM只所以傲视群雄，它的傲娇，它的底气就来自对经典设计模式的全面应用。所以如果只会应用不懂其义，那你只是个码农；如何能领会设计模式的奥义，你就有了高级程序员的潜力；如果你能自己仿写，你就有了架构师的入门证。

Vue这类为何称之为框架，就是其不是简单的编程，而是应用了经典的设计模式，那它应用了什么什么模式呢？它应用了"观察者设计模式"。

那什么是观察者设计模式呢？

观察者模式定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个目标对象，当这个目标对象的状态发生变化时，会通知所有观察者对象，使它们能够自动更新。

• 页面data中的address就是数据，get为获取当前数据，set为设置数据新值
• 观察者watcher就为那多个插值表达式和input文本框，在页面加载时这些关系进行绑定
• 当我们让数据变化时，如input文本框修改内容，其就调用数据的set的方法，把数据进行更新，其更新就被vue框架通知notify众多的观察者。如众多的插值表达式就会触发trigger，进行再次渲染re-render，修改虚拟dom树。最终vue框架局部宣传页面
• 同样，当我们利用谷歌浏览器改变数据v.address赋值时，就调用数据的setter方法进行数据更新，数据更新后，通知众多的观察者，观察者更新如上面的流程