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>



本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>