2024年前端最全vue之filter，怎样学习web前端开发

计算机网络

• HTTP 缓存

• 你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？

• HTTP 常用的请求方式，区别和用途？

• HTTPS 是什么？具体流程

• 三次握手和四次挥手

• 你对 TCP 滑动窗口有了解嘛？

• WebSocket与Ajax的区别

• 了解 WebSocket 嘛？

• HTTP 如何实现长连接？在什么时候会超时？

• TCP 如何保证有效传输及拥塞控制原理。

• TCP 协议怎么保证可靠的，UDP 为什么不可靠？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

算法

• 链表

• 字符串

• 数组问题

• 二叉树

• 排序算法

• 二分查找

• 动态规划

• BFS

• 栈

• DFS

• 回溯算法

  

}

})

• 注意：全局注册时是filter，没有s的。而组件过滤器是filters，是有s的，这要注意了，虽然你写的时候没有s不报错，但是过滤器是没有效果的

使用位置

1 . 在双花括号插值

{{ ‘ok’ | globalFilter }}

2 .在v-bind表达式中使用

3 .滤器的连用

{{ message | filterA | filterB }}

上述代码中，message是作为参数传给filterA 函数，而filterA 函数的返回值作为参数传给filterB函数，最终结果显示是由filterB返回的。

如下:

{{‘2020’|dateFilter|lastFilter}}

new Vue({

el:‘#app’,

data:{

},

filters: {

lastFilter(val){

console.log(arr);

return val+‘年’;

},

lastFilter(val){

return val+‘好’;

}

}

})

结果是：

2020年好

4 .过滤器参数

{{ message | filterA(‘arg1’, arg2) }}

上述代码中，filterA的第一个参数是message，依次是‘arg1’,arg2

{{'2020'|filterA('12','22')}}

filters:{

filterA(val,arg1,arg2){

return val+‘-’+arg1+‘-’+arg2;

}

}

5 . {{ 'a','b' | filterB }}

{{'hello','world'|filterA}}

filters:{

filterA(arg1,arg2){

return arg1+arg2;

}

}

最后

我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限，仅展示部分截图：