過濾器+攔截器+vue的生命週期
目錄
1過濾器
全域性過濾器
格式:第一個引數是過濾器名字,第二個是具體執行方法,方法的引數是即將載入渲染的資料
注意點:全域性過濾器必須寫在vue物件建立之前,不然當該vue執行載入渲染時不起作用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全域性過濾器</title> <script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script> <script src="https://cdn.bootcss.com/axios/0.17.1/axios.js"></script> </head> <body> <div id="box"> {{msg | addACCP}} </div> <script> // 全域性過濾器 // 格式:第一個引數是過濾器名字,第二個是具體執行方法,方法的引數是即將載入渲染的資料 // 注意點:全域性過濾器必須寫在vue物件建立之前,不然當該vue執行載入渲染時不起作用 Vue.filter("addACCP",function(res){ let result = "ACCP"+res; return result; }); let vm = new Vue({ el:'#box', data:{ msg:"jin", }, }); </script> </body> </html>
區域性過濾器
區域性變數跟全域性的區別不大,但是區域性是寫在具體的vue物件內部的,跟data和methods一樣的,寫在它們的後面,屬性名字為filters
這兩個過濾器是加上¥和把價格乘以打折的價格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>區域性過濾器</title> <script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script> <script src="https://cdn.bootcss.com/axios/0.17.1/axios.js"></script> </head> <body> <div id="app"> <ul> <li v-for="item in proucts"> {{item.name}}--{{item.price | discount(1.5) | myCurrency('¥')}} </li> </ul> </div> <script> let vm = new Vue({ el:'#app', data:{ proucts:[{name:"apple",price:23}, {name:"balana",price:18}] }, filters:{ myCurrency:function(myInput,arg1){ let result = arg1+myInput; return result; }, discount:function(value,discount){ return value*discount; } } }); </script> </body> </html>
2攔截器
攔截器的作用,在前面就學過了,在struts2框架的時候就學過攔截器來更改各種格式的時間驗證
同理這裡的攔截器所做的也就是攔截作用,攔截request和response都會被攔截,然後進行我們的處理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>攔截器demo</title> <script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script> <script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script> </head> <body> <div id="box"> {{msg}} <button @click="load()">連結測試</button> </div> <script> let vm = new Vue({ el:'#box', data:{ msg:"jin", }, mounted:function(){ axios.interceptors.request.use( function(config){ console.log("請求攔截成功!") return config; }, function(eror){ console.log() return Promise.reject(error); }); axios.interceptors.response.use( function(config){ console.log("響應攔截成功!") return config; }, function(error){ return Promise.reject(error); }); }, methods:{ load:function(){ axios.get("http://localhost:8080/servlet/TestServlet").then( value=>{ alert(value.data); this.msg = value.data; }).catch( error=>{ alert(error.status); }); }, } }); </script> </body> </html>
3生命週期
生命週期分為四大部分,每部分分為之前和之後
建立
建立之前--beforeCreate
狀態:
el : undefined
data : undefined
message: undefined
建立之後--created
狀態:
el : undefined
data : 有值
message: 有值
掛載之前beforeMount
狀態:
el : <div id="box">{{msg}}</div>
data : 有值
message: 有值
掛載之後mounted
狀態:
el : <div id="box">有值</div>
data : 有值
message: 有值
修改之前beforeUpdate
狀態:
el : <div id="box">有值</div>
data : 有值
message: 有值
修改之後updated
狀態:
el : <div id="box">有值</div>
data : 有值
message: 有值
銷燬之前beforeDestroy
狀態:
el : <div id="box">有值</div>
data : 有值
message: 有值
銷燬之後beforeDestroy
狀態:
el : <div id="box">有值</div>
data : 有值
message: 有值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue生命週期學習</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Vue的生命週期'
},
beforeCreate: function() {
console.group('------beforeCreate建立前狀態------');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message)
},
created: function() {
console.group('------created建立完畢狀態------');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeMount: function() {
console.group('------beforeMount掛載前狀態------');
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.message); //已被初始化
},
mounted: function() {
console.group('------mounted 掛載結束狀態------');
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.message); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前狀態===============》');
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.message);
},
updated: function () {
console.group('updated 更新完成狀態===============》');
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.message);
},
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.message);
},
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.message)
}
})
</script>
</html>
vm.$destroy();
vm.message="jin";