过滤器+拦截器+vue的生命周期

目录

 

1过滤器

全局过滤器

局部过滤器

2拦截器

3生命周期

创建

创建之前--beforeCreate

创建之后--created

挂载之前beforeMount

挂载之后mounted

修改之前beforeUpdate

修改之后updated

销毁之前beforeDestroy

销毁之后beforeDestroy


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";

 

展开阅读全文

没有更多推荐了,返回首页