1.Vue的生命週期
*人的生命週期
1.出生階段—呱呱墜地
2.少兒階段—幼兒園,小學 中學
3.青年階段—高中 大學 研究生 博士
4.中年階段—非常難
5.老年階段----退休
6.駕鶴西去
特點: 人的生命週期階段都是自動執行
<!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>