今日内容: 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对象现在已经创建,在浏览器里面有vueconsole.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>
本文转载自: https://blog.csdn.net/caozhisanguo/article/details/122474243
版权归原作者 小码哥的进阶 所有， 如有侵权，请联系我们删除。
版权归原作者 小码哥的进阶 所有， 如有侵权，请联系我们删除。