首页 前端知识 04-Json/Ajax/Vue的知识

04-Json/Ajax/Vue的知识

2024-08-21 10:08:39 前端知识 前端哥 791 342 我要收藏

1. Json结构

1.1 Json概述

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,实现数据前后端交互。
它使得人们很容易的进行阅读和编写。同时也方便了机器进行解析和生成。 JSON采用完全独立于程序语言的文本格式。这些特性使JSON成为理想的数据交换语言。

1.2 Json基本格式

1.2.1 对象格式

对象(object)是无序的"key":value键值对集合,一个对象以“{”开始,“}”结束,每个"key"后面跟一个:,键值对之间使用,分隔。
例如:{"id":1,"name":"黑熊精","age":3000,"sex":"男"}

1.2.2 数组格式

数组(array)是值(value)的有序集合,一个数组以“[”开始,“]”结束,值之间使用“,”分隔。
例如:["张三","李四","不知火舞"]

1.2.3 嵌套格式

值是可以嵌套的。
例如:[{"id":1,"name":"黑熊精","age":3000,"sex":"男"},{"id":3,"name":"金角大王","age":3000,"sex":"男"}]
四层嵌套:[1,"张三",{"id":100,"name":"李四","hobby":["敲代码","打游戏",{"gender":"女"}]}]

2. 实现前后端交互

2.1 前端页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前后端交互</title>
	</head>
	<body>
		<!-- 需要准备一个表格,展现user的数据 -->
		<table border="1px" width="80%" align="center">
			<tr align="center" height="60px">
				<th colspan="5"><h1>用户列表</h1></th>
			</tr>
			<tr align="center" height="60px">
				<th>编号</th>
				<th>名称</th>
				<th>年龄</th>
				<th>性别</th>
				<th>操作</th>
			</tr>
			<tr align="center" height="60px">
				<th>1</th>
				<th>黑熊精</th>
				<th>3000</th>
				<th></th>
				<th></th>
			</tr>
		</table>
	</body>
</html>

2.2 jQuery动态获取数据

2.2.1 下载jQuery.js类库

官网地址:https://jquery.com/

2.3 Ajax异步调用

  • Ajax是实现前后端交互,最为常用的一种方式,其特点为:局部刷新 异步访问;
  • JQuery是JS的一种高级函数类库,JQuery提供了一种高效的Ajax的请求的方式;
  • 现阶段所使用的Ajax是由jQuery进行的动态封装,如果将来的前端不使用jQuery则应该采用另外的一种形式发起Ajax请求。

2.3.1 Ajax异步调用原理

  • 同步: 用户发起请求时,要求第一时间内服务器做出响应,在此期间用户不可以做其它操作,只能等待服务器返回数据,只能全局刷新1次。
  • 异步: 用户发起请求时,要求服务器做出响应,在此期间用户可以做其它的操作。如果后端服务器返回数据则通过回调函数通知客户端,并且可以局部刷新多次。

2.3.2 Ajax实现数据获取

<script>
//jQuery语法: 让整个页面浏览器加载完成之后,再次执行JS
$(function(){
	$.ajax({
		type: "get",	//请求类型
		url:  "http://localhost:8090/findAll", //url地址
		data: {id:100,name:"tom",age:18},
		//data: "id=100&name=tom&age=18",		   //参数
		success: function(data){
				console.log(data)
				}
			})
		})
</script>

2.3.3 data参数传递

  • 1.对象方式实现数据传参
    语法:{key1:value1,key2:value2}
  • 2.拼接字符串的方式
    语法:key1=value1&key2=value2

2.3.4 关于Ajax返回值数据说明

后台服务器返回的是JSON串,但是经过Ajax业务调用,则程序会自动的根据返回值类型进行解析,解析之后形成了JS的对象。
预期服务器返回的数据类型如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如XML MIME类型就被识别为XML。
虽然服务器的返回值是JSON,但是经过Ajax智能的判断,则动态的转化为JS的对象。

2.4 JS原生for循环写法

2.4.1 原生写法

for(var i=0;i<data.length;i++){
	console.log(data[i])
}

2.4.2 in关键字

其中index代表的是遍历的下标.,从0开始 0,1,2,3…

for(index in data){
	console.log(data[index])
}

2.4.3 of关键字

其中user代表的是遍历的对象。

for(user of data){
	console.log(user )
}

2.5 JS模版字符串语法

原生的JS中经常出现字符串拼接的现象,其中需要动态的拼接参数 则结构复杂,没有数据结构,导致阅读混乱.。
ES6-7 提供了新的模版语法 ,通过反引号来动态拼接字符串。

for(user of data){
	let tr = 
	`   <tr>
		<td>${user.id}</td>
		<td>${user.name}</td>
		<td>${user.age}</td>
		<td>${user.sex}</td>
		</tr>
	`

2.6 表格数据的动态展现

<!DOCTYPE html>
<html>
	<!-- 后端开发工程: 简单页面会写,复杂页面看懂即可 -->
	<head>
		<meta charset="utf-8">
		<title>前后端交互</title>
		<!--导入js函数类库-->
		<script src="js/jquery.min.js"></script>
		<script>
			//jquery语法:让整个页面浏览器加载完成之后,再次执行JS
			$(function(){
				$.ajax({
					type:"get",
					url:"http://localhost:8091/user/findAll",
					//data:"id=100&name=tom&age=22",
					success:function(data){
						//将data中的数据添加到表格中
						for(user of data){
							let tr =
							 `
								<tr>
									<td>${user.id}</td>
									<td>${user.name}</td>
									<td>${user.age}</td>
									<td>${user.sex}</td>
								</tr>				
							`
							$("#tab1").append(tr);//append将指定的元素进行追加
						}
					}
				})			
			})
		</script>
	</head>
	<body>
		<!-- 需要准备一个表格,展现user的数据 -->
		<table id="tab1" border="1px" width="80%" align="center">
			<tr align="center" height="60px">
				<th colspan="5"><h1>用户列表</h1></th>
			</tr>
			<tr align="center" height="60px">
				<th>编号</th>
				<th>名称</th>
				<th>年龄</th>
				<th>性别</th>
				<th>操作</th>
			</tr>
		</table>
	</body>
</html>

3. JS变量基本用法与Ajax小结

3.1 var 关键字

var id: 表示定义了一个变量,其名称为id。
该变量相当于在全局范围内声明了一个变量,该变量没有作用域的概念,是一个全局变量。
弊端: 由于没有作用域的规定,导致变量使用混乱。

3.2 let 关键字

从新版本的JS开始,兼容支持let,该关键字的用法与var一样,但是有作用域的范围,更加的通用。

3.3 const 关键字

该关键字用来标识常量, 该数据不变。

3.4 Ajax小结

  • Ajax是局部刷新,异步访问。
  • Ajax异步的核心在于Ajax引擎(代理)。
  • Ajax请求调用时,无论是否成功,都通过回调函数的方式进行响应。 success/error

4. 跨域说明

4.1 同源策略

只有浏览器的请求网址与Ajax的请求网址满足同源策略,浏览器才能解析Ajax,执行正确的请求。
什么是同源策略:
规定要求 —— 请求协议:// 域名:端口号
1.如果以上三者都满足,则符合同源策略,浏览器可以正确解析。
2.反之(有一个不满足)不满足同源策略,称之为跨域请求. 则浏览器不能正常解析Ajax请求。

4.2 同源策略的区别

(1)同域请求
浏览器地址: http://localhost:8090/userList.html
Ajax请求地址: http://localhost:8090/abc/b
(2)端口不同, 跨域请求
浏览器地址: http://localhost:80/userList.html
Ajax请求地址: http://localhost:8090/abc/b
(3)协议不同,跨域请求
浏览器地址: http://localhost:8090/userList.html
Ajax请求地址: https://localhost:8090/abc/b
(4)** 域名不同(即使映射也是跨域) ,跨域请求**
manage.jt.com 对应的IP假设为10.6.6.8
浏览器地址: http://manage.jt.com/userList.html
Ajax请求地址: http://10.6.6.8/abc/b
(5) 同域请求
http协议默认端口为80
浏览器地址: http://manage.jt.com:/userList.html
Ajax请求地址: http://manage.jt.com:80/aaa/bbb

5. Vue的使用

5.1 vue的概述

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

渐进式: 构建项目可以由简单到复杂

5.2 vue的优点

  1. 体积小 压缩后的文件只有33k;
  2. 运行效率更高 采用虚拟机DOM,一种可以预先通过javaScript对数据进行计算.把最终的DOM操作计算出来并且优化的技术,由于这个DOM操作属于预处理操作,并没有真实的操作DOM ,所以叫做虚拟DOM;
  3. 双向数据绑定,让开发者不再去操作DOM,将更多的经历投入到业务中;
  4. 生态丰富 市面上有大量的开源项目基于vue 进行开发 成熟稳定;

5.3 vue案例

5.3.1 vue入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>入门案例</title>
	</head>
	<body>
		<!-- 第一步:通过<div>定义vue的工作区域 -->
		<div id="app">
			<h1>vue入门案例</h1>
			<!-- 第四步:通过插值表达式“{{ }}”来对data中的数据进行引用 -->
			{{hello}}
		</div>
		<!-- 第二步:导入函数类库 -->
		<!-- 生产环境版本,优化了尺寸和速度 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<!-- 第三步:实例化Vue对象 -->
		<script>
			const app = new Vue({
				//el:标识vue对哪个元素有效
				el:"#app",
				data:{
					hello:"你好,vue"
				}
			})
		</script>
	</body>
</html>

5.3.2 vue指令:

在浏览器解析JS完成之前,用户看到的数据是{{msg}},直到浏览器加载完全部JS则{{msg}}才替换为具体的数据。
v-cloak 这个指令保持在元素上,直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue的指令</title>
		<style>
			/* 定义属性样式 */
			[v-cloak]{
			/*将元素进行隐藏  */
			   display: none;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 测试:v-cloak指令;需求:不想让用户看到没解析的数据,使用v-cloak的属性。 -->
			<h1 v-cloak>{{msg}}</h1>
			<hr/>
			<!-- 测试:v-text指令; v-text优化了v-cloak -->
			<h1 v-text="msg"></h1>
			<hr/>
			<!-- 测试:v-html指令;动态的展现html标签(让浏览器解析html之后再展现)-->
			<span v-html="html"></span>
			<hr/>
			<!-- 测试:v-pre指令;使得vue不解析该标签 -->
			<span v-pre>{{msg}}</span>
			<hr/>
			<!-- 测试:v-once指令;使得元素只解析一次,之后,在浏览器随意更改,数据不变。 -->
			<span v-once>{{one}}</span>		
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
			//一般工作中字符串写法提倡使用单引号
			const app = new Vue({
				el:"#app",
				data:{
					msg:"测试数据",
					html:"动态网址",
					one:"数据解析"
				}
			})
		</script>
	</body>
</html>

5.3.3 双向数据绑定

v-model指令: 数据绑定;只能标识可以编辑的标签;
1.数据与页面绑定,数据变化,则页面数据同步修改;
2.页面与数据绑定,页面值发生变化,则数据同步修改;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>双向数据绑定</title>
	</head>
	<body>
		<div id="app">
			数据录入:<input type="text" v-model="msg" />
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
			const app = new Vue({
				el:"#app",
				data:{
					msg:"hello,双向数据绑定"
				}
			})
		</script>
	</body>
</html>

5.3.4 MVVM思想

  • 字母解释
    M: model 数据
    V :view 视图
    VM: (view-model) 数据和视图的控制
  • 当页面数据发生变化时,则通过dom监听将数据传给model,当model的数据发生变化时,则通过数据绑定到页面中。

5.4 事件绑定

5.4.1 事件绑定 v-on 指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件的绑定</title>
	</head>
	<body>
		<div id="app">
			<!-- v-on指令,实现事件的绑定; -->
			<!-- 方式一:直接编辑操作内容 -->
			数值:{{num}}
			<button v-on:click="num++">增加:1</button>
			<!-- 方式二:v-on的简化操作@ -->
			<button @click="add2()">增加:2</button>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
			const app = new Vue({
				el:"#app",
				data:{
					num:1
				},
				methods:{//定义Vue对象中的方法
					add1:function(){
						alert("原始测试方法是否有效")
					},
					add2(){
						alert("已成功增加")
						this.num++;//使用this获取自家的属性
					}
				}
			})
		</script>
	</body>
</html>

5.4.2 事件访问修饰符

@click.stop@click.prevent

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件访问修饰符</title>
	</head>
	<body>
		<div id="app">
			数值:{{num}}
			<!-- 1.stop 阻止事件冒泡
			事件冒泡:由于嵌套关系,先执行内部事件,如果执行成功,则事件冒泡给外层事件 -->
			<div @click="add1()">
				<button @click="add2()">自增</button>      <!-- 未阻止冒泡 -->
				<button @click.stop="add2()">自增</button> <!-- 阻止冒泡 -->
			</div>
			
			<!-- 2.阻止默认行为
			编辑一个表单,属性:username,password
			需求:要求用户只执行login的操作,而不执行action的动作
			解决方案:prevent属性,阻止默认行为
			同类型案例:a标签阻止href跳转		 -->
			<form action="http://www.baidu.com">
			<input name="username" type="text" />
			<input name="password" type="password" />
			<button type="submit" @click.prevent="login()">提交</button>
			</form>
			
		
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
			const app = new Vue({
				el:"#app",
				data:{
					num:1
				},
				methods:{
					add1(){
						this.num++
					},
					add2(){
						this.num++
					},
					login(){
						alert("ajax提交")
					}
				}
			})
		</script>
	</body>
</html>

5.4.3 按键访问修饰符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>按键访问修饰符</title>
	</head>
	<body>
		<div id="app">
			<!--1.按键访问修饰符 回车触发
				keyup: 键位弹起 
				keydown: 键位按下
				keypress: 数字键盘-->
			回车触发:<input type="text" @keyup.enter="enter()" />
			空格触发:<input type="text" @keydown.space="space()" />
			
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
			const app = new Vue({
				el:"#app",
				data:{
					
				},
				methods:{
					enter(){
						alert("回车触发")
					},
					space(){
						alert("空格触发")
					}
				}
			})
		</script>
	</body>
</html>

5.4.4 综合案例

<!DOCTYPE html>
<!-- 要求用户输入两个数字,做加法运算
要求展现:总数:num1+num2
要求:
1.输入第二个数字时,回车触发
2.指定一个计算按钮 -->
<html>
	<head>
		<meta charset="utf-8">
		<title>计算器</title>
	</head>
	<body>
		<div id="app">
			数1:<input type="text" v-model="num1" /><br/>
			数2:<input type="text" v-model="num2" @keyup.enter="add()" /><br/>
			<button @click="add()">计算</button><br/>
			总数:<span v-text="num"></span>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
			const app = new Vue({
				el:"#app",
				data:{
					num1:'',
					num2:'',
					num:''
				},
				methods:{
					add(){
						//parsentInt()将字符型转换为整数类型
						this.num = parseInt(this.num1) + parseInt(this.num2)
					}
				}
			})
		</script>
	</body>
</html>

5.4.5 属性绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性的绑定</title>
		<style>
			.redClass{
				width: 200px;
				height:100px;
				background-color: aqua;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 属性绑定 -->
			<a href="http://www.baidu.com">百度</a>
			<a v-bind:href="url">网址</a>
			<!--简化写法-->
			<a :href="url">hello</a>
			<hr>
			<!-- 类型绑定 -->
			<!-- <div class="redClass"></div> -->
			<!-- 控制样式的绑定:根据boolean类型数据进行控制,true:样式绑定,false:样式不绑定 -->
			<div :class="{redClass: flag}"></div>
			<button @click="flag=!flag">切换样式</button>
			
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
			const app = new Vue({
				el:"#app",
				data:{
					url: 'http://www.jd.com',
					flag:'true'
				},
				methods:{//定义Vue对象中的方法
					
				}
			})
		</script>
	</body>
</html>

5.5 分支结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>分支结构</title>
	</head>
	<body>
		<div id="app">
			<!-- 分支结构语法:
			 1.v-if 如果满足条件则展现后续内容(可单独使用)
			 2.v-else-if 除了if之外的其他可能 (不接单独使用,必须与v-if联用)
			 3.v-esle 上述条件都不满足时,展现如下内容 (不接单独使用,必须与v-if联用)
			 
			 -->
			 <h1>考试成绩等级</h1>
			 录入成绩<input type="text" v-model="score" />
			 <div v-if="score>=90">优秀</div>
			 <div v-else-if="score>=80">良好</div>
			 <div v-else-if="score>=70">一般</div>
			 <div v-else-if="score>=60">及格</div>
			 <div v-else>不及格</div>
						
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
			const app = new Vue({
				el:"#app",
				data:{
					score: 40,
				},
				methods:{
					
				}
			})
		</script>
	</body>
</html>

5.6 循环结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>循环结构</title>
	</head>
	<body>
		<div id="app">
			<!-- 语法:v-for 遍历展现的是标签 -->
			
			<h1>循环遍历数组</h1>
			<!-- 方式1 -->
			<p v-for="item in hobby">{{item}}</p>
			<!-- 方式2 -->
			<p v-for="item in hobby" v-text="item"></p>
			<hr/>
			<h1>循环遍历对象</h1>
			<!-- 1.如果直接遍历对象,展现的是value的值 -->
			<div v-for="item in user">{{item}} </div>
			<!-- 2.如果不直接遍历对象,展现的是参数与值,arg1:value,arg2:key -->
			<div v-for="(value,key) in user"><p> {{key}}----{{value}}</p></div>
			<!-- 3.如果不直接遍历对象,展现的是参数与值,arg1:value,arg2:key,arg3:index-->
			<div v-for="(value,key,index) in user"><p> {{key}}----{{value}}-----{{index}}</p></div>
			<hr/>
			<h1>循环遍历集合</h1>
			<!-- 约定:key用来区分遍历的节点信息 -->
			<div v-for="user in userList" :key="user.id">
				<p> ID编号:{{user.id}}</p>
				<p>姓名:{{user.name}}</p>
				<p>年龄:{{user.age}}</p>
			</div>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
			const app = new Vue({
				el:"#app",
				data:{
					hobby:['电脑','手机','平板'],
					user:{
						name:"张三",
						age:22,
						address:"西安"
					},
					userList: [{id:100,name:"唐僧",age:100},
					{id:101,name:"孙悟空",age:120},
					{id:102,name:"猪八戒",age:220}]
				},
				methods:{
					
				}
			})
		</script>
	</body>
</html>

5.7 表单数据提交

5.7.1 表单数据提交

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单数据提交</title>
	</head>
	<body>
		<div id="app">
			<!-- vue使用双向数据绑定的结构:
			input文本输入框
			textarea 文本域
			select 下拉框
			radio 单选框
			checkbox 复选框			-->
			
			<form action="xxxx">
				<h1>表单数据提交</h1>
				姓名:<input type="text" v-model="user.name"/>
				<br/>
				详情:<textarea v-model="user.info"></textarea>
				<br/>
				城市:<select name="city" v-model="user.city">
					<!-- 如果下拉框支持多选,可添加multiple="true" -->
					<option value="北京">北京</option>
					<option value="西安">西安</option>
					<option value="杭州">杭州</option>
				</select>
				<br/>
				性别:
					<input type="radio" value="" name="gender" v-model="user.gender"/><input type="radio" value="" name="gender" v-model="user.gender"/><br/>
				爱好:
					<input type="checkbox" value="打篮球" name="hobby" v-model="user.hobby"/>打篮球
					<input type="checkbox" value="打羽毛球" name="hobby" v-model="user.hobby"/>打羽毛球
					<input type="checkbox" value="打排球" name="hobby" v-model="user.hobby"/>打排球
					<input type="checkbox" value="钓鱼" name="hobby" v-model="user.hobby"/>钓鱼
			</form>
			
			
			
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
			const app = new Vue({
				el:"#app",
				data:{
					user:{
						name:"张三",
						age: 12,
						gender:'男',
						city:"西安",
						info:"个人详情",
						hobby:["钓鱼","打篮球"]
					}
				},
				methods:{
					
				}
			})
		</script>
	</body>
</html>

5.7.2 双向绑定属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单数据提交</title>
	</head>
	<body>
		<div id="app">	
			<!-- 属性说明:
			1.number 将用户输入变为数值类型
			2.trim 去掉开头和结尾的空格
			3.lazy (懒加载),当鼠标离焦时生效,只加载一次 -->
			
			<input name="age" v-model.number="user.age"/>
			<button @click="add">扩大10倍</button>
			<br/>
			<input name="name" v-model.trim="user.name"/>
			name属性的长度: {{user.name.length}}
			<br />
			<input name="name" v-model.lazy="user.name"/>
			观察响应现象:{{user.name}}
			
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
			const app = new Vue({
				el:"#app",
				data:{
					user:{
						name:"张三",
						age: 12,
						gender:'男',
						city:"西安",
						info:"个人详情",
						hobby:["钓鱼","打篮球"]
					}
				},
				methods: {
					add(){
						this.user.age = 10 * this.user.age
					}
				}
			})
		</script>
	</body>
</html>

5.7.3 计算属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性</title>
	</head>
	<body>
		<div id="app">	
			<!-- s实现字符串数据反转
			函数:
				split 拆分
				reverse 反转数据
				join 将数组转化为字符串 -->
			用户输入:<input v-model.lazy="msg" />	<br/>
			数据展现:{{msg.split('').reverse().join('')}}<br/> <!-- 空串分隔 -->
			<!-- 计算属性:将需要计算的操作通过特定的方法先行计算之后再将结果进行展现 -->
			计算属性:{{reverse}}
			
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
			const app = new Vue({
				el:"#app",
				data:{
					msg:'1234'
				},
				methods: {
				},
				//定义计算属性
				computed: {
					//定义一个方法,要求必须有返回值!!!
					reverse(){
						return this.msg.split('').reverse().join('')
					}
				}
			})
		</script>
	</body>
</html>

5.8 vue生命周期

5.8.1 主要阶段

5.8.2 页面结构调用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试vue生命周期函数</title>
	</head>
	<body>
		<!-- 
		钩子函数:
		整个VUE有一个完整的执行过程,如果用户需要对vue的对象进行额外的扩展时,可以采用预留的“接口”进行扩展,
	    我们把项目中提前设定好的接口,在JS中称之为钩子函数。
		
		总结:
		1.钩子函数作用:对原有的操作进行扩展,8个函数。
		2.初始化函数 4个,修改函数2个,销毁函数2个。
		3.mounted() 函数标识Vue对象实例化成功。
		4.生命周期函数是VUE对象独有的内容,注意写法,不要放到methods方法中。 -->
		
		<div id="app">
			<h3 v-text="msg"></h3>
			<button @click="destroy">销毁</button>
		</div>
		
		<!--引入函数类库  -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
			const app = new Vue({
				el : "#app",
				data : {
					msg: "vue生命周期"
				},
				
				//在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
				beforeCreate(){
					console.log("beforeCreate")
				},
				//在实例创建完成后被立即调用
				created(){
					console.log("created")
				},
				//在挂载开始之前被调用:相关的 render 函数首次被调用。
				beforeMount(){
					console.log("beforeMount")
				},
				//实例被挂载后调用,这时 el 被新创建的 vm.$el 替换了。
				mounted(){
					console.log("mounted")	
				},
				//数据更新时调用,发生在虚拟 DOM 打补丁之前
				beforeUpdate(){
					console.log("beforeUpdate")
				},
				//由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
				updated(){
					console.log("updated")
				},
				//实例销毁之前调用。在这一步,实例仍然完全可用
				beforeDestroy(){
					console.log("beforeDestroy")	
				},
				//实例销毁后调用。
				destroyed(){
					console.log("destroyed")
				},
				methods:{
					destroy(){
						this.$destroy()
					}
				}
			})
		</script>
	</body>
</html>

5.9 Vue数组的操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组的操作</title>
	</head>
	<body>
		<!-- 
		push() 在最后追加元素
		pop() 从最后删除元素
		shift() 从开头删除元素
		unshift() 从开头追加元素
		splice() 替换数据
		sort() 按照字符编码顺序排序
		reserve() 字符反转 -->
		<div id="app">
		<span v-for="item in array">{{item}}</span>
		<br>
		<input type="text" v-model="num"/>
		<button @click="push">push</button>
		<br/>
		<button @click="pop">pop</button>
		<br/>
		<button @click="splice">替换</button>
		
			
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
			const app = new Vue({
				el:"#app",
				data:{
					array:[1,2,3,4,5],
					num:''
				},
				methods:{
					push(){
						this.array.push(this.num)
					},
					pop(){
						this.array.pop()
				},
					splice(){
						//arg1: 起始位置,从下标0开始
						//arg2: 终止位置
						//arg3: 替换值
						//this.array.splice(0,1,this.num)
						//this.array.splice(0,3,this.num,this.num,this.num) //给三个位置分别替换值
						this.array.splice(0,3) //实现删除功能
					}
				}
			})
		</script>
	</body>
</html>

6. VUE组件化

7. Vue前端交互

7.1 Promise概述

Promise是一种异步编程的解决方案,从语法上Promise是一个对象,从它身上可以获取异步调用的信息。
作用:
1.有效避免回调地狱问题 典型的Ajax嵌套问题 (闭包方式)
2.Promise对象提供了简洁的API 用法简单

7.2 Axios方式

7.2.1 Axios介绍

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
特点:
1.从浏览器中创建 XMLHttpRequests
2.从 node.js 创建 http 请求
3.支持 Promise API
4.拦截请求和响应
5.转换请求数据和响应数据
6.取消请求
7.自动转换 JSON 数据
8.客户端支持防御 XSRF

7.2.2 Axios入门案例

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16393.html
标签
评论
发布的文章

CSS3 动画

2024-04-17 21:04:24

JWT(JSON Web Token)

2024-08-30 03:08:56

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!