2024年Web前端最全vue工程：过滤器filters(文本格式化)使用、文件内复用、全局注册，2024年最新网络前端面试知识

最后

javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

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

filters: {

capitalize: function (value) {

if (!value) return ‘’

value = value.toString()

return value.charAt(0).toUpperCase() + value.slice(1)

}

}

}

二、文本格式化的本VUE文件内复用

---

有的时候，不仅仅filters内格式化时候需要用到这个函数，在本vue文件里methods也想调用这个函数，但是过滤器是无法通过this直接引用的，再整个同样的函数太浪费了。

解决办法：

vue文件中所有的选项配置都会被存储到事例的$options中，所以只需要获取‘this.$options.filters` 就可以拿到实例中的过滤器。

this.$options.filters.capitalize

三、全局注册filter

---

应用场景

有的过滤器使用很频繁，比如时间格式格式化等，在其他vue文件中也可能会使用，这个时候如果每个vue文件都去定义，特别繁琐。这时候可以考虑使用Vue.filter注册全局过滤器

解决办法

1、在项目里面添加filters目录，然后在filters目录里面添加index.js文件

// filters\index.js

import Vue from ‘vue’

Vue.filter(‘formatDate’, value => {

//code

})

//新建一个名为formatDate的格式化函数

2、将filters目录下的index.js文件引入到main.js中
3、vue文件中使用
{{ item.date | formatDate }}

前端面试题汇总

JavaScript

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

性能

linux

前端资料汇总

68cc25284edda453a4c6cb49916ef.png)

前端资料汇总