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