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()
==============================================
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: 很早之前的,不仅仅封装了异步请求,还有很多丰富的api2.axios.js
=====================================================================
3.axios.js异步请求框架(掌握,代码必须会敲)
步骤一: 在html引入axios.js,也需要引入vue.js
步骤二: 在html网页里面指定vue的作用范围
步骤三: 在script标签里面创建vue对象
步骤四: 在methods选项里面,定义异步请求方法
注意: axios异步请求框架中,使用response(resp)来接收后台响应的数据
前台(response来接收后台响应的数据)<---------后台
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！