Vue入门(二)
Vue的生命周期(理解)
Vue对象的生命周期:
- 指的是从Vue对象开始创建,以及过程数据的显示,数据更新等等,以及Vue对象销毁。
- 特点:Vue整个生命周期过程中,与生命周期相关的函数,都是自动执行的。
- 细节:生命周期相关的函数,又称之为钩子函数
生命周期函数有哪些,有哪些特点?
1.beforeCreate:function() {}
//1.第1个生命周期函数
//第一阶段:指的vue对象还没有创建
beforeCreate:function() {
console.group("---beforeCreate的状态---");
console.log("vue对象:"+this.$el);//打印vue对象
console.log("数据:"+this.$data);
},
特点:vue对象没有创建,获取不到数据
2.created:function() {}
//2.第2个生命周期函数
//如果json的key是自定义的:获取时不加$
//如果json的key是vue规范的:获取时加$
created:function() {
console.group("---created的状态---");
console.log("vue对象:"+this.$el);//打印vue对象
console.log("数据:"+this.$data);
console.log("msg:"+this.msg);
},
特点:vue对象已经创建,可以获取数据,但是vue对象没有挂载(vue对象还没有加载到浏览器)
3.beforeMount:function() {}
//3.第3个生命周期函数
//挂载前状态
beforeMount:function() {
console.group("---beforeMount的状态---");
console.log("vue对象:"+this.$el);//打印vue对象
console.log("数据:"+this.$data);//可以获取数据,没有挂载
console.log("msg:"+this.msg);//可以获取数据,没有挂载
},
特点:vue对象已经创建,并且在浏览器中存在,并且数据未挂载
4.mounted:function(){}
//4.第4个生命周期函数
//挂载状态
mounted:function() {
console.group("---mounted的状态---");
console.log("vue对象:"+this.$el);//打印vue对象
console.log("数据:"+this.$data);//可以获取数据,已经挂载
console.log("msg:"+this.msg);//可以获取数据,已经挂载
},
特点:vue对象已经创建,并且在浏览器中存在,并且数据已经挂载了
5.beforeUpdate:function() {}
//5.第5个生命周期函数
// %c%s:用来拼接字符串的表达式
beforeUpdate:function() {
console.group("---beforeUpdate的状态---");
//获取标签之间的文本,v-html:设置标签之间的文本
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","msg:"+this.msg);
},
特点:vue对象已经创建,并且在浏览器中存在,并且数据已经挂载了,在浏览器的内存中显示未修改的
6.updated:function() {}
//6.第6个生命周期函数
updated:function() {
console.group("---updated的状态---");
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","msg:"+this.msg);
},
特点:vue对象已经创建,并且在浏览器中存在,并且数据已经挂载了,在浏览器的内存中显示已经修改的
7.beforeDestroy:function() {}
//7.第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","msg:"+this.msg);
},
特点:vue对象在浏览器中存在,数据依然显示
8.destroyed:function() {}
//8.第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","msg:"+this.msg);
}
});
特点:vue对象在浏览器中存在,数据依然显示,与vue对象绑定的一切全部解绑.
总结:
-
vue生命周期相关的函数一共分为8个阶段,执行顺序从1到8
-
自动执行的
beforeCreated() created() beforeMounte() mounted()
当数据发生改变时才会执行的
beforeUpdate() updated()
对象发生销毁时才会执行的
beforeDestroy() destroyed()
异步操作
同步操作
指的时我们在向后台提交数据时,提交整个网页。
client客户端(浏览器)----->server后台(java程序)
前台提交数据到后台?
client----提交数据---->server
后台响应数据到前台?
client<----响应数据----server
- 同步缺点:
当后台响应慢,用户看到的”留白“
- 同步优点:
向后台提交的次数少(因为需要等后台响应完以后),后台的访问压力比较轻
异步操作
指的时我们在向后台提交数据时,提交网页的一部分。
client客户端(浏览器)----->server后台(java程序)
- 异步优点:
当后台响应慢,用户依然可以看到网页,不会有”留白“
- 异步缺点:
向后台提交数据的次数多(异步提交的是网页的一部分,不需要后台的响应),后台的访问压力大。
-
原始的ajax异步请求,实现一共分为四个步骤
步骤一:创建异步请求对象:xmlHttp
步骤二:发送http请求(向后台提交数据):open(提交方式,后台地址,是否支持异步);
参数一:提交方式,比如:get或者post
参数二:后台地址,比如:http://www.xx.servlet;
参数三:是否支持异步请求,取值是true或者false
步骤三:调用send()方法:请求以及数据全部发送到后台
步骤四:获取后台服务器响应的数据:response对象
xmlHttp.responseText:接收后台响应的字符串数据 xmlHttp.responseXML:接收后台响应的xml格式数据
原始的ajax发送异步请求的缺点:代码量太大,重复代码
解决的方式把上面的四个步骤封装成一个前端的js框架
代表性的异步请求的框架
1.jquery.js:很早之前,不仅仅封装了异步请求,还有很多丰富的api 2.axios.js
axios使用
axios.js异步请求框架(掌握,代码必须会敲)
步骤一:在html引入axios.js,也需要引入vue.js
步骤二:在html网页里面指定vue的作用范围
步骤三:在script标签里面创建vue对象
步骤四:在methods选项里面,定义异步请求方法
注意:axios异步请求框架中,使用response(resp)来接收后台响应的数据
前台(response来接收后台响应的数据)<-------------后台
引入axios
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
基本格式
axios.get(地址?key=value&key2=values).then(function(response){},function(err){})
axios.post(地址,{key:value,key2:value2}.then(function(response){},function(err){})
{"id":"001","name":"jack"} //server.json
<!--3.指定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>
<!--2.引入axios.js-->
<script src="js/axios/axios-0.18.0.js"></script>
<!--4.创建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错误
test2(){
axios.post("server.json").then(
function(resp){
//响应对象接收后台的数据:data属性是固定的
var u = resp.data;
//测试数据
console.log(u.id);
}
).catch(
//代码出现问题时,执行catch方法
function(){
window.alert("代码出问题了!");
}
);
},
}
})
</script>