過濾器+攔截器+vue的生命週期

阿新 • • 發佈：2019-01-27

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: 有值