1月13-Vue高级

发布时间:2022-06-21 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了1月13-Vue高级脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

今日内容: 1.Vue的生命周期 2.异步操作 3.自定义组件(重点) 4.ElementUI(饿了吗公司团队开发的前端框架) 5.Vue脚手架

1.Vue的生命周期 *人的生命周期 1.出生阶段—呱呱坠地 2.少儿阶段—幼儿园,小学 中学 3.青年阶段—高中 大学 研究生 博士 4.中年阶段—非常难 5.老年阶段----退休 6.驾鹤西去 特点: 人的生命周期阶段都是自动执行

  • Vue对象的生命周期: 指的从Vue对象开始创建,以及过程数据的显示,数据更新等等,以及Vue对象销毁 特点: vue整个生命周期过程中,与生命周期相关的函数,都是自动执行的. 细节: 生命周期相关的函数,又称之钩子函数
  • 生命周期函数有那些,生命周期函数有那些特点 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对象绑定的一切全部解绑. 总结: 1.vue生命周期相关的函数一共分为8个阶段,执行顺序从1到8 2. 自动执行的 beforeCreated() created() beforeMounte() mounted() 当data数据发生改变时才会执行 beforeUpdate() updated() 当vue对象销毁时,才会执行 beforeDestroy(),destroyed()
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			{{msg}}
		</div>
		<script src="js/vue.js" type="text/javascript"></script>
		<script>
			var vm= new Vue({
				"el":"#app",
				"data":{
					"msg":"hello",
				},
				//1. 第1个生命周期函数:
				//第一阶段: 指的vue对象还没有创建
				beforeCreate:function(){
					//console.group("----beforeCreate的状态---");
					//console.log("vue对象:"+this.$el);//vue对象没有创建
					//console.log("数据:"+this.$data);//数据不能拿到
				},
				//2.第2个生命周期函数
				//如果 json的key是自定义的: 获取时不加$
				//如果json的可以是vue规范的: 获取时加$
				created:function(){
					//console.group("----created的状态---");
					//console.log("vue对象:"+this.$el);//vue对象现在已经创建,但不显示
					//console.log("data:"+this.$data);// 可以获取数据,没有挂载
					//console.log("msg:"+this.msg);//可以获取数据,没有挂载
				},
				//3.第3个生命周期函数
				//挂载前状态
				beforeMount:function(){
					console.group("----beforeMount的状态---");
					console.log("vue对象:"+this.$el);//vue对象现在已经创建,在浏览器里面有vue
					console.log("data:"+this.$data);// 可以获取数据,没有挂载 
					console.log("msg:"+this.msg);//可以获取数据,没有挂载
				},
				//4.第4个生命周期函数
				//挂载完毕:完全展示数据
				mounted:function(){
					console.group("----mounted的状态---");
					console.log("vue对象:"+this.$el);//vue对象现在已经创建
					console.log("data:"+this.$data);// 可以获取数据,已经挂载 
					console.log("msg:"+this.msg);//可以获取数据,已经挂载
				},
//第5个生命周期函数
				//  %c%s : 用来拼接字符串的表达式
				beforeUpdate:function(){
//					console.group('beforeUpdate 更新前状态===============》');
//					//获取标签之间的文本, v-html: 设置标签之间的文本
//					let dom = document.getElementById("app").innerHTML;
//					console.log(dom);// hello ?
//					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('Updated 更新后状态===============》');
//					//获取标签之间的文本, v-html: 设置标签之间的文本
//					let dom = document.getElementById("app").innerHTML;
//					console.log(dom);//hello world ?
//					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 销毁前状态===============》');
					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 销毁完成状态===============》');
					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);
				}
			});
			
			
			//銷毀對象: 与vue对象绑定一切都全部解绑
			vm.$destroy();
			
			//更新data中的数据: 因为vue对象已经销毁,所以赋值没有作用
			vm.msg = "hello world";
		
		</script>
	</body>
</html>

============================================== 2.异步操作

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

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

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

    原始的ajax发送异步请求的缺点:代码量太大,重复代码
     解决的方式把上面的四个步骤封装成一个前端的js框架.
     代表性的异步请求的框架
      1.jquery.js: 很早之前的,不仅仅封装了异步请求,还有很多丰富的api
      2.axios.js
    

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--2.指定vue的作用范围-->
		<div id="app">
			
			<!--定义一个button标签,点击事件发送异步请求-->
			<button @click="test1()">发送get的异步请求</button>
			
			<!--定义一个button标签,点击事件发送异步请求-->
			<button @click="test2()">发送post的异步请求</button>
		</div>
		<!--1.引入vue.js-->
		<script src="js/vue.js"></script>
		<!--1.引入axios.js-->
		<script src="js/axios/axios-0.18.0.js"></script>
		<!--3.创vue对象,在methods定义异步请求方法-->
		<script>
			new Vue({
				"el":"#app",
				"data":{
					"msg":"hello",
				},
				"methods":{
					//1.定义异步请求方法
					test1(){
						//2.发送异步请求:get
						//1.get方法: 指定请求地址,参数是一个string
				        //2.then方法: 接收后台响应的数据,参数是一个函数
				        //3.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
					//问题: 因为hublider工具不能模拟服务器,接收post请求
					//      报500错误.	
					//解决问题的方案(大家不用管,后期要学)
					//tomcat服务器
					test2(){
						//当代码出现问题时,执行catch方法
						//真正的后台地址
						/**
						 * 问题1: 发送post请求报错,因为hbulider工具的问题
						 * 问题2: html网页在本地, server.json在服务器(两个不在一个地方)
						 *        存在跨域的问题.
						 * 问题3: html网页 和 server.json一起,为什么还没有显示?
						 *       html网页静态网页
						 *       server.json静态资源
						 *       html网页---->server.json不会响应
						 *       讲tomcat的那天演示一下.
						 */
						var  url = "http://localhost:8080/tom/server"
						axios.post(url).then(function(resp){
							//响应对象接收后台的的数据: data属性是固定.
							var u = resp.data;
							//测试数据
							console.log(u.id);
						}).catch(
							function(){
								window.alert("代码有问题了!!!!");
							}
						);
					},
				},
				
			});
		</script>
	</body>
</html>



脚本宝典总结

以上是脚本宝典为你收集整理的1月13-Vue高级全部内容,希望文章能够帮你解决1月13-Vue高级所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: