前端Vue框架(过滤器使用，生命周期，拦截器)

最新推荐文章于 2024-05-11 07:26:08 发布
最新推荐文章于 2024-05-11 07:26:08 发布
阅读量2.3k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JayVergil/article/details/82802359
版权

笔记：
过滤器的应用1.时间 2.货币需要加￥符号
过滤器有两种：全局和局部

一.拦截器的使用

<!DOCTYPE html>
<html>
<head>
    <title>ceshi</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="box">
        {{msg | accpName | jiaName}}
    </div>
</body>
 

<script>
    //全局拦截器
    //过滤器的应用1.时间 2.货币需要加￥符号
    //过滤器有两种：全局和局部
    accpName过滤器的名称，后面的是方法
    Vue.filter("accpName",function(val){
        return "ACCP"+val;
    });
    //jiaName过滤器的名称，后面的是方法
    Vue.filter("jiaName",function(val){
        return val+"广州豪哥";
    });

    var vm = new Vue({
        el:"#box",
        data:{
            msg:"jw"
        }
    });

结果：






拦截器案例：通过过滤器+零售价和打折，货币符号+￥


<!DOCTYPE html>
<html>
<head>
    <title>ceshi</title>
    <script src="vue.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.js"></script>
</head>
<body>
<div id="app">
        <ul>
            <li v-for="item in products">
                {{item.name}}--{{item.price | discount(125) | myCurrency("￥")}}
            </li>
        </ul>
    </div>
</body>

<script>
//过滤器案例   通过过滤器+零售价和打折，货币符号+￥
    var rm=new Vue({
        el:"#app",
        data:{
            products:[{name:"apple",price:34},{name:"XiangJiao",price:20}]
        },
        filters:{//第一个是数据本身，arg1=参数
            myCurrency:function(myInput,arg1){
                var result=arg1+myInput;
                return result;
            },//第一个是数据本身，第二个是参数
            discount:function(value,discount){
                return value*(discount/100);
            }
        }
    });
</script>
</html>

结果：



二,生命周期



三.拦截器

在request或response传递时先进入拦截器

<!DOCTYPE html>
<html>
<head>
   <title></title>
   <script src="vue.js"></script>
   <script src="https://cdn.bootcss.com/axios/0.18.0/axios.js"></script>
</head>
<body>

</body>
<script>
    var vm = new Vue({
        el:"#绑定控件",
        data:{
            //属性
            msg:"jw",
        },
        mounted:function(){
            //请求前拦截
            axios.interceptors.request.use(function(config){
                    console.log("request使用前被拦截了");
                    return config;
                },function(err){
                    console.log("拦截异常");
                    return Promise.reject(err);
                },

                axios.interceptors.response.use(function(config){
                    console.log("response使用前被拦截了");
                    return config;
                },function(err){
                    console.log("拦截异常");
                    return Promise.reject(err);
                })
            )
        }
    });
</script>>
</html>
JayVergil
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
10-前端添加拦截器
NikoChina的博客
06-12 369
1、所有的请求头添加token,token过期、没有token的响应统一添加报错提醒，跳转到登录页面。在ticketweb/src/main.js文件。
vue中单个阻断和全局阻断请求
weixin_47941995的博客
03-22 572
index.vue--->在请求接口时，除了传递参数，再传递一个this过去。---> API接口处，引入axios，定义CancelToken，写new CancelToken。
Vue：Axios前端拦截器
席木木的博客
07-26 3419
限制用户多次点击按钮，频繁地发送同一个请求，影响页面渲染效果，降低前端的无效接口请求操作（其中涉及到Map、Array、Promise的一些基本操作）。
2024年Web前端最全vue工程：过滤器filters(文本格式化)使用、文件内复用、全局注册，2024年最新网络前端面试知识
最新发布
2401_84620143的博客
05-11 651
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
31.(前端)响应拦截器设置
m0_63953077的博客
10-17 1609
响应拦截器
（简易详细）spring boot 使用拦截器 实现拦截前端请求并返回json到前端页面
大雾起了清晨
01-19 4381
（简易详细）spring boot 使用拦截器 实现拦截前端请求并返回json到前端页面
web前端Vue面试题
11-03
Vue.js 是一款流行的前端JavaScript框架，它以渐进式的方式构建用户界面，具有易用、灵活和高效的特点。Vue的核心思想是将一个页面拆分成多个可重用的组件，通过声明式的方式处理UI与数据之间的关系，使得开发者只...
2023前端面试题vue专版
12-26
Vue.js 是一款非常流行的前端框架，它提供了许多强大的特性，如数据绑定、组件化、响应式系统等。在面试中，Vue 的相关知识是考察开发者技能的重要部分。下面我们将详细探讨给定的面试题涉及的知识点。 1. **watch ...
vue面试题汇总 ，包含答案
11-27
Vue.js 是一个基于 MVVM 模式的前端框架，用于构建用户界面。以下是 Vue.js 面试题汇总，包含答案： 1.Vuex 的作用？ Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式。Vuex 可以帮助我们管理共享状态，也...
vue.js&axios.js
02-22
6. **生命周期钩子**：Vue组件有多个生命周期钩子函数，如beforeCreate、created、mounted等，开发者可以在这些阶段执行特定任务。 Axios的主要特性包括： 1. **基于Promise的API**：Axios使用Promise接口，使得...
VUE面试15题.docx
04-07
在Vue.js中，还可以使用指令如v-if/v-else进行条件渲染，v-on监听事件，v-model实现双向数据绑定，以及定义过滤器filters进行数据格式化。对于异步操作，Vue.js 提供了生命周期钩子如beforeUpdate和updated，配合...
2024年前端最新webservice（3）：CXF拦截器介绍及自定义拦截器实现，web开发工程师面试题
2401_84433924的博客
05-07 663
CXF中也可以自定义拦截器，CXF中实现自定义拦截器需要继承AbstractPhaseInterceptor或者其子类如AbstractSoapInterceptor。一个简单的拦截器：/*** CXF 自定义拦截器*///必需提供一个带参数的构造函数//覆写拦截后的动作@Override= null) {= null) {添加到客户端拦截器链：ser.get();输出：nullnull。
前端-vue基础39-过滤器
qq_41632427的博客
07-20 136
react
前端热门技术axios详细讲解（三）——拦截器
清颖的博客
05-15 2411
前端异步请求axios中拦截器的使用方法详解。
前端拦截器
weixin_53916047的博客
02-14 756
router.beforeEach((to, from, next) => { //如果你访问的界面是login或者商家入驻统一都应该放行 if(to.path=="/login" || to.path=="/register"||to.path=="/ShopReg"){ next(); }else{ //获取token的值 var token = localStorage.getItem(“token”); //如果token有值，证明是登录状态 if(token){ //就应该是放行状态 nex
vue webpack 前端项目请求响应拦截器的配置
zyf的博客
08-14 1942
前言： vue项目开发中没有统一管理http、https响应的入口配置因此为方便处理统一管理需要去构建一个统一接收响应的入口处理提示信息错误 项目开发中一般会有统一的http路由管理文件方便管理所有请求接口 ``` // 安装axios npm install --save-dev axios // 在http请求文件引入 import axios from 'axios'; axios.int...
【vue+axios】一个项目学会前端实现登录拦截
热门推荐
前端超人
02-17 5万+
一个项目学会前端实现登录拦截 一个项目学会vue全家桶+axios实现登录、拦截、登出功能，以及利用axios的http拦截器拦截请求和响应。 前言该项目是利用了Github 提供的personal token作为登录token，通过token访问你的Repository List。通过这个项目学习如何实现一个前端项目中所需要的 登录及拦截、登出、token失效的拦截及对应 axios 拦截器
拦截器的生命周期与工作过程？
sunrainamazing的博客
07-07 4529
拦截器的生命周期与工作过程？ @sunRainAmazing1）每个拦截器都是实现了Interceptor接口的 Java 类； 2）init(): 该方法将在拦截器被创建后立即被调用, 它在拦截器的生命周期内只被调用一次. 可以在该方法中对相关资源进行必要的初始化； 3）intercept(ActionInvocation invocation): 每拦截一
vue axios 拦截器配置与封装
蜗牛速度额的博客
08-04 3873
一、安装 1、 利用npm安装npm install axios --save --save：安装在生产环境 二、例子 要想统一处理所有http请求和响应，就得用上 axios 的拦截器。 axios.js import axios from 'axios' // @ == src import baseUrl from '@/config' /* * 增加请求拦截器 */ axi...
前端vue的生命周期
11-14
前端Vue的生命周期可以分为8个阶段，分别是： 1. beforeCreate：在实例初始化之后，数据观测(data observer)和event/watcher事件配置之前被调用。 2. created：实例已经创建完成之后被调用。在这一步，实例已经完成...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值