java开发工程师入门第二阶段(08-web前端(VUE-01))_通过点击事件,使用异步抛送小红,小明信息-CSDN博客

本文链接：https://blog.csdn.net/javaLkx/article/details/123771893

文章目录

- - - Vue

Vue

1.vue概述和入门案例

1.1 框架概述

框架(framework)
== 前端框架: 为开发前端代码服务的
比如: vue.js, node.js,reactive.js 等等
== 后端框架: 为开发后端代码服务的
比如: spring, mybatis, springboot,springcloud
== 自定义框架
比如: 刚才定义的前端框架 a.js
小结:
框架是一个"半成品"的应用, 我们实际开发中,基于框架开发,提高开发效率

1.2 Vue概述

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
框架: vue前端框架,作用: 提高前端代码的开发效率
渐进式框架: 基于vue框架进行二次开发,满足我们公司项目的需求
视图层: 指的html+css,指的在html进行数据的展示,不关心前端业务逻辑的书写
业务逻辑: 可以这样理解在js代码里面写的判断以及循环这些代码.

特点: 1. 好学 2. 好用

问题: 在网页中如何使用vue? 只需要在html网页里面引入vue.js就可以了
- 入门案例时
  在html引入vue.js
  在html里面,使用div指定vue的作用范围
  创建vue对象,vue对象的参数是一个json
  el : 通过选择器,来指定vue在html网页里面的作用范围
  data: 用来在html网页里面展示数据的
  methods: 用来定义函数

1.3 入门案例(抽奖系统)

抽奖系统,随机抽取获奖的幸运用户

1.先在js文件里面创建函数

2.在html里面进行调用函数

//定义函数:返回一个随机数0-6
//解决方案:将数组的长度传进来,根据数组的长度,获取随机索引
function getRandom(arr){
	//1.调用Math对象的random()
	var n1=Math.random();
	//获取长度
	var arrLe=arr.length;
	//根据数组长度获取索引
	var n2 =n1*arrLe;
	//3.0-6
	var n3=Math.floor(n2);
	//返回
	return n3;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--引入外部的js文件: 定义的前端框架,提高开发效率-->
		<script src="js/b.js" type="text/javascript" ></script>
		<script>
			/*
			 *  需求:抽奖系统,随机抽取获奖的幸运用户.
     			分析思路:
     			1. 数组: 保存多个用户的姓名
     			2. 随机索引就可以了: 通过随机索引获取数组中的人名
			 */
			//1.定义一个数组:保存多个用户的姓名
			// 9个人名: 0-8
			var arr = ["小闹","小平","小黑","小明"];
			//2. 使用外部框架定义好的方法
			var index = getRandom(arr);
			//3.根据index从数组中获取人名: 人名也是随机的
			var name =arr[index];
			document.write(name);
		</script>
	</body>
</html>

1.4 Vue的入门案例

1.先把Vue.js导入项目

2.在html中直接用src调用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--div指定vue的作用范围-->
		<div id="app">
			{{msg}}
		</div>
		<!--在html引入vue.js-->
		<script src="vue.js" type="text/javascript"></script>
		<script>
			/**
			 * 如何使用Vue
			 * 1.在网页里面引入vue.js
			 * 2.在html网页里面指定vue的作用范围.通常情况下使用div指定范围
			 * 3.创建vue对象,给vue对象赋值,那个值就是一个json数据
			 * */
			 //定义vue对象的参数
			 var config={
				 "el":"#app",
				 "data":{
					 "msg":"hello vue",
				}
			}
			//创建vue对象
			new Vue(config);
		</script>
	</body>
</html>

1.5Vue的入门升级案例(带有方法)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			{{msg}}
		</div>
		<script src="vue.js" type="text/javascript"></script>
		<script>
			//定义vue参数
			var config ={
				"el":"#app",
				"data":{
					"msg":"hello vue",
				},
				"methods":{
					test1(){
						document.write("定义方法的test1");
					}
				}
			}
			//创建vue对象
			var vu=new Vue(config);
			//通过vue调用方法
			vu.test1();
		</script>
	</body>
</html>

2.Vue常用指令

2.1 Vue常用指令

指令: 指的带 v-指令的名称, 不同的指令有不同的作用
指令使用的位置: 指令通常使用在标签的属性. 比如:<a 指令>xx
常见指令: v-html : 给标签设置标签体(等同于innerHTML)

v-if v-else-if v-else 作用: 如果符合条件,显示数据,反之不显示内容

v-show 作用: 如果符合条件,显示数据,反之不显示内容

条件指令的区别 : v-if v-else-if v-else: 条件不成立时,删除标签
v-show : 条件不成立时,使用dispaly:none隐藏标签

在这里插入图片描述

2.2 文本插值(v-html)

把文本解析为 HTML 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<a href="http://www.baidu.com" v-html="msg"></a>
		</div>
		<script type="text/javascript" src="vue.js"></script>
		<script>
			//创建对象,传递json参数
			new Vue({
				"el":"#app",
				"data":{
					"msg":"点击我,去达内官网",
				},
			});
		</script>
	</body>
</html>

2.3 绑定属性(v-bind)

为 HTML 标签绑定属性值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<a v-bind:href="url">点击我去达内</a>
		</div>
		<script type="text/javascript" src="vue.js"></script>
		<script>
			//创建对象,传递json参数
			new Vue({
				"el":"#app",
				"data":{
					"url":"http://www.tedu.cn",
				},
			});
		</script>
	</body>
</html>

2.4 条件渲染(v-if /v=else/v-else-if /v-show)

v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。
v-else：条件性的渲染。
v-else-if：条件性的渲染。
v-show：根据条件展示某元素，区别在于切换的是display属性的值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!--
			v-if条件指令:条件表达式,用比较运算符,可以用逻辑远算符
			num>2:条件成立,返回的结果是true
			-->
			<a href="index.html" v-if="num>20">点击访问</a>
			<hr />
			<a href="index.html" v-else-if="num>3">点击访问11</a>
			<hr />
			<a href="index.html" v-show="num>20">点击访问</a>
		</div>
		<script type="text/javascript" src="vue.js"></script>
		<script>
			//创建对象,传递json参数
			//只要是key:value,就要加逗号
			//json中value:数字可以不加引号.
			new Vue({
				"el":"#app",
				"data":{
					"num":10,
					"name":"jack",
				},
			});
		</script>
	</body>
</html>

2.5 事件绑定(v-on)

v-on：为 HTML 标签绑定事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--2.指定vue的指定范围-->
		<div id="app">
			<button v-on:click="test1()">方式一绑定</button>
			<button @click="test2()">方式二绑定</button>
		</div>
		<!--1.引入vue.js-->
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//3.创建vue对象
			//json参数里面:el,data,methods都是固定的
			new Vue({
				"el":"#app",
				"methods":{
					//4.方式一绑定
					test1:function(){
						console.log(1111);
					},
					//5.方式二绑定
					test2(){
						console.log(2222);
					},
				}
			});
		</script>
	</body>
</html>

2.6 循环指令(v-for)

v-for：列表渲染，遍历容器的元素或者对象的属性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--2.指定vue作用范围-->
		<div id="app">
			<ul>
				<li v-for="ele in names">{{ele}}</li>
			</ul>
		</div>
		<!--1.引入vue.js-->
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//3.创建vue对象
			new Vue({
				"el":"#app",
				"data":{
					"names":["小明","小红","小黑","小白"],
				}	
			});
		</script>
	</body>
</html>

2.7 循环指令json数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--2.指定vue作用范围-->
		<div id="app">
			<ul>
				<li v-for="ele in users">{{ele.id}},{{ele.name}}</li>
			</ul>
		</div>
		<!--1.引入vue.js-->
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//3.创建vue对象
			new Vue({
				"el":"#app",
				"data":{
					"users":[
						{"id":1,"name":"jack"},
						{"id":2,"name":"rose"},
						{"id":3,"name":"cz"},
					],
				},
			});
		</script>
	</body>
</html>

2.8 双向绑定( v-model )

指的改变vue里面data选项的数据,会影响html网页中的数据
改变html网页中的数据,同时也会改变vue里面data选的数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			{{count}}
			<form >
				商品的库存:<input type="text" name="count" v-model="count" />
			</form>
		</div>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				"el":"#app",
				"data":{
					"count":3,
				}
			});
		</script>
		
	</body>
</html>

2.9 案例(模拟电商网站数量加减)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品个数的加和减</title>
	</head>
	<body>
		<div id="a">
			<button @click="multiProduct">+</button>
			<button @click="subProduct">-</button>
			<input type="text" name="count" v-model="s" />
		</div>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			new Vue({
				"el":"#a",
				"data":{
					"s":1,
				},
				"methods":{
					//this表示vue对象
					//增加购买数据
					//方式一:this.&data.count
					//方式二:this.count
					multiProduct(){
						//问题2:用户输入数据,获取时就是字符串,效果是字符串拼接
						//解决:pareeInt();
						//var s1=parseInt(this.s);
						//this.s=s1+1;
						//this.s++ 写法,自带类型转换
						this.s++
					},
					subProduct(){
						//this.s--;
						//1.问题一:商品个数不能为负数
						if(this.s>=2){
							this.s--;
						}else{
							this.s=1;
						}
					}
				}
			});
		</script>
	</body>
</html>

在这里插入图片描述

3.vue的生命周期

3.1. Vue对象的生命周期:

指的从Vue对象开始创建,以及过程数据的显示,数据更新等等,以及Vue对象销毁
特点:
vue整个生命周期过程中,与生命周期相关的函数,都是自动执行的.
细节: 生命周期相关的函数,又称之钩子函数

3.2. 生命周期的八个阶段

在这里插入图片描述

1.beforeCreate:function(){}
特点: vue对象没有创建, 也不能获取data里面的数据
2.created:function(){}
特点: vue对象已经创建,可以获取数据,
但是vue对象没有挂载(vue对象还没有加载到浏览器)
3.beforeMount:function(){}
特点: vue对象已经创建,并且在浏览器中存在
并且数据未挂载
4.mounted:function(){}
特点: vue对象已经创建,并且在浏览器中存在
并且数据已经挂载了
5.beforeUpdate:function(){}
特点: vue对象已经创建,并且在浏览器中存在
并且数据已经挂载了,在浏览器的内存中显示的未修改的
6.updateed:function(){}
特点: vue对象已经创建,并且在浏览器中存在
并且数据已经挂载了,在浏览器的内存中显示的已经修改的
7.beforeDestroy
特点: vue对象在浏览器中存在,数据依然显示
8.destroyed
特点: vue对象在浏览器中不存在,数据依然显示
与vue对象绑定的一切全部解绑.

3.3.生命周期总结

1.vue生命周期相关的函数一共分为8个阶段,执行顺序从1到8

2.自动执行的
beforeCreated() created() beforeMounte() mounted()
当data数据发生改变时才会执行
beforeUpdate() updated()
当vue对象销毁时,才会执行
beforeDestroy(),destroyed()

3.4.生命周期案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			{{msg}}
		</div>
		<script src="vue.js" type="text/javascript" ></script>
		<script type="text/javascript">
			var vm=new Vue({
				"el":"#app",
				"data":{
					"msg":"hello",
				},
				//1.第1个生命周期函数
				//第一阶段:指的vue对象还没有创建
				beforeCreate:function(){
					console.group("~~beforeCreate的状态~~");
					console.log("vue对象"+this.$el);
					console.log("数据"+this.msg);
				},
				//2.第2个生命周期函数
				//如果json的key是自定义的:获取时不加$
				//如果json的key是vue规范的:获取时需加$
				created:function(){
					console.group("~~created的状态~~");
					console.log("vue对象"+this.$el);//vue对象现在已创建
					console.log("data"+this.$data);//可以获取数据,没有挂载
					console.log("msg"+this.msg);//可以获取数据,没有挂载
				},
				//第3个生命周期函数
				//挂载前状态
				beforeMount:function(){
					console.group("~~beforeMount的状态~~");
					console.log("vue对象:"+this.$el);//vue对象现在已创建,在浏览器中可以打印出来
					console.log("data:"+this.$data);//可以获取数据
					console.log("msg:"+this.msg);//可以获取数据
				},
				//第4个生命周期函数
				//挂载完毕:完全展示数据
				mounted:function(){
					console.group("~~mounted的状态~~");
					console.log("vue对象:"+this.$el);//vue对象现在已创建,在浏览器中可以打印出来
					console.log("data:"+this.$data);//可以获取数据
					console.log(this.msg);//可以获取数据
				},
				//第5个生命周期函数
				//%c%s:用来拼接字符串的表达式
				beforeUpdate:function(){
					console.group('beforeUpdate 更新前状态===============》');
					let dom = document.getElementById("app").innerHTML;
					console.log(dom);
					console.log("%c%s", "color:red", "el     : " + this.$el);
					console.log(this.$el);
					console.log("%c%s", "color:red", "data   : " + this.$data);
					console.log("%c%s", "color:red", "message: " + this.msg);
				},
				//第6个生命周期函数
				//
				updated:function(){
					console.group('Update 更新后状态===============》');
					let dom = document.getElementById("app").innerHTML;
					console.log(dom);
					console.log("%c%s", "color:red", "el     : " + this.$el);
					console.log(this.$el);
					console.log("%c%s", "color:red", "data   : " + this.$data);
					console.log("%c%s", "color:red", "message: " + this.msg);
				},
				//第7个生命周期函数
				//
				beforeDestroy:function(){
					console.group('beforeDestroy 销毁前状态===============》');
					let dom = document.getElementById("app").innerHTML;
					console.log(dom);
					console.log("%c%s", "color:red", "el     : " + this.$el);
					console.log(this.$el);
					console.log("%c%s", "color:red", "data   : " + this.$data);
					console.log("%c%s", "color:red", "message: " + this.msg);
				},
				//第8个生命周期函数
				//
				destroyed:function(){
					console.group('destroyed 销毁后状态===============》');
					let dom = document.getElementById("app").innerHTML;
					console.log(dom);
					console.log("%c%s", "color:red", "el     : " + this.$el);
					console.log(this.$el);
					console.log("%c%s", "color:red", "data   : " + this.$data);
					console.log("%c%s", "color:red", "message: " + this.msg);
				},
			});
			//更新data中的数据
			vm.msg="hello world";
		</script>
	</body>
</html>

4. 异步操作

4.1 同步操作

指的我们在向后台提交数据时,提交整个网页.
client客户端(浏览器)----->server后台(java程序)
前台提交数据到后台?
client----提交数据–>server
后台响应数据到前台?
client<----响应数据–server
同步缺点:
当后台响应慢,用户看到的"留白"
同步优点:
向后台提交的次数少(因为需要等后台响应完以后),
后台的访问压力比较轻

4.2 异步操作

指的我们在后台提交数据时,提交网页的一部分.
client客户端(浏览器)----->server后台(java程序)
异步优点:
当后台响应慢,用户依然可以看到网页,不会有"留白"
异步缺点:
向后台提交数据的次数(异步提交的是网页一部分,不需要等后台响应)
后台访问压力大.

4.3 ajax异步请求的四个步骤(了解)

步骤一: 创建异步请求对象: xmlHttp
步骤二: 发送http请求(向后台提交数据):open(提交方式,后台地址,是否支持异步);
参数一:提交方式,比如: get 或者 post
参数二:后台地址,比如:http://www.xx.servelt;
参数三:是否支持异步请求,取值是true或者false
步骤三: 调用send()方法: 请求以及数据全部发送到后台
步骤四 : 获取后台服务器响应的数据:
xmlHttp.responseText: 接收后台响应的字符串数据
xmlHttp.responseXML: 接收后台响应的xml格式数据

4.4 axios.js异步请求框架(掌握)

步骤一: 在html引入axios.js,也需要引入vue.js
步骤二: 在html网页里面指定vue的作用范围
步骤三: 在script标签里面创建vue对象
步骤四: 在methods选项里面,定义异步请求方法
注意: axios异步请求框架中,使用response(resp)来接收后台响应的数据
前台(response来接收后台响应的数据)<---------后台

4.5 异步操作案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--指定vue的范围-->
		<div id="app">
			<!--定义一个button标签,点击事件发送异步请求-->
			<button @click="test1()">发送get的异步请求</button>
			<button @click="test2()">发送post的异步请求</button>
		</div>
		<script src="vue.js" ></script>
		<script src="axios/axios-0.18.0.js"></script>
		<script type="text/javascript">
			/**
			 * 步骤一: 在html引入axios.js,也需要引入vue.js
			 * 步骤二: 在html网页里面指定vue的作用范围
			 * 步骤三: 在script标签里面创建vue对象
			 * 步骤四: 在methods选项里面,定义异步请求方法
			 * 注意: axios异步请求框架中,使用response(resp)来接收后台响应的数据
			 * 前台(response来接收后台响应的数据)<---------后台
			 * */
			new Vue({
				"el":"#app",
				"data":{
					"msg":"hello",	
				},
				"methods":{
					test1(){
						/**2.发送异步请求:get
						 *get方法:指定请求地址,参数是一个string
						 *then方法:接收后台响应的数据,参数是一个函数
						 *catch方法:处理前台和后台代码的异常,参数一个函数
						 * 细节:axios名称,get名称,then名称,catch名称都是固定写法
						 * 定义一个json文件:模拟后台地址
						 * get方法的参数:json文件的地址
						 **/
						 var url="server.json";
						axios.get(url).then(
							function(resp){
							//用来接收后台响应的数据
							var user=resp.data;
							console.log(user.id+","+user.name)
							}).catch();
					},
					//2.定义异步请求方法
					test2(){
						//当代码出现问题时,执行catch方法
						axios.post("server.json").then(function(resp){
							var u=resp.data;
							console.log(u.id+","+u.name)
						}).catch(
							function(){
								window.alert("代码出问题了")
							}
						)
					},
				}
			});
		</script>
	</body>
</html>

5.组件

1. 概述

组件是Vue框架非常重要的功能之一,它主要对html元素进行封装,可以复用.
简单来说,使用vue组件方法对html元素进行定义.

2. 为什么使用组件？

需要在其它网页里面需要使用有弧度按钮
在每个网页的每个按钮中,设置style=“border-radius: 10px;”
怎么解决这个问题?
vue提供的组件来解决这个问题.
步骤一 1: 定义模板,其实对html标签进行自定义
步骤二 2: 定义的模板注册到组件(全局组件)
全局组件: 一次定义,到处使用,就能解决原始html中代码重复的问题

3. 组件使用方式

方式一:
1.定义模板:var tem = Vue.extend({
“template”:“定义标签,设置样式等”
});
2.注册组件 Vue.component(组件名称,模板对象);
方式二:
Vue.component(组件名称,“template”:“定义标签,设置样式等”);

注意事项:

1.调用方法时, Vue的V必须大写
2.设置参数时, template名称是固定的
3.定义组件名称时,推荐写法一
写法一: 英文单词(都是小写的)-英文单词(都是小写的)
比如: el-button
写法二: 英文单词(首字母大写,其它小写)英文单词(首字母大写,其它小写)
比如:ElButton
写法三: 英文单词(首字母小写,其它小写)英文单词(首字母大写,其它小写)
比如: elButton

4.组件入门案例1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<el-button></el-button>
		</div>
		<script src="vue.js" type="text/javascript" ></script>
		<script>
			//1.定义模板
			var tem=Vue.extend({
				"template":"<button style='border-radius: 10px;'>自定义样式</button>",
			});
			//2.注册组件
			Vue.component("el-button",tem);
			//创建vue对象
			new Vue({
				"el":"#app",
			});
		</script>
	</body>
</html>

5.组件入门案例2(自定义标签属性)

入门三: 自定义标签属性

<button style='border-radius: 10px;'>自定义样式按钮</button>

解决入门二的问题:
props:
作用可以自定义组件的属性,给组件里面的标签灵活赋值
比如:<el-button 属性名称=“赋值”> 赋值设置到组件的标签里面了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<el-button title="1111"></el-button>
			<el-button title="2222"></el-button>
		</div>
		<script src="vue.js" type="text/javascript" ></script>
		<script>
			//1.定义模板(template ,props固定的)
			//var tem=Vue.extend({
				//"props":["title"],
				//"template":"<button style='border-radius: 10px;'>{{title}}</button>",
			//});
			//2.组件注册:将模板绑定到自定义的组件名称
			Vue.component("el-button",{
				"props":["title"],
				"template":
				"<button style='border-radius: 10px;'>{{title}}</button>"
				});
			//3.创建vue对象
			new Vue({
				"el":"#app",
			});
		</script>
	</body>
</html>

6.组件绑定事件

入门四:自定义的组件绑定事件,改变组件的文本值 data函数:{ }

定义模板时:
     Vue.extend({
         "props" :["属性名称1","属性名称2",----"属性名称N"],
         "template":"html标签,设置自定义的样式等等",
         "data":function(){
                       方法体;
          },
     });
     props选项,给自定义组件设置多个属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<el-button></el-button>
		</div>
		<script src="vue.js" type="text/javascript" ></script>
		<script>
			//1.定义模板(template ,props,data固定的)
			var tem=Vue.extend({
				"data":function(){
					return{"count":1,}
				},
				"template":"<button style='border-radius: 10px;'>{{count}}</button>",
			});
			//2.组件注册:将模板绑定到自定义的组件名称
			Vue.component("el-button",tem);
			//3.创建vue对象
			new Vue({
				"el":"#app",
			});
		</script>	
	</body>
</html>