2024年Web前端最全vue基础-过滤器(Filters)_vue filters(1)，vivo前端面试题

最后

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

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

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

filters: {过滤器名字: (值) => {return “返回处理后的值”}
第一个字符小写, “输入HELLO”, 输出"hELLO"

语法:

• 过滤器传参: vue变量 | 过滤器(实参)
• 多个过滤器: vue变量 | 过滤器1 | 过滤器2

<template>
  <div>
    <h5>原始数据:{{ message }}</h5>
    <a href="#" :title="message | filterB">使用局部过滤器实现数据大写</a>
      //可以传多个过滤器
    <h5>多个过滤器使用:{{message | filterA |filterC}}</h5>
    <p>原来的样子: {{ msg }}</p>
    <!-- 1.
      给过滤器传值
      语法: vue变量 | 过滤器名(值)
     -->
    <p>使用翻转过滤器: {{ msg | reverse('|') }}</p>
    <!-- 2.
      多个过滤利使用
      语法: vue变量 | 过滤器1 | 过滤器2
     -->
    <p :title="msg | toUp | reverse('|')">鼠标长停</p>
  </div>
</template>

<script>
export default {
  filters: {
    filterB(val){
      return val.toUpperCase()
    },
    filterC(val){
      return val.charAt(0).toLowerCase() + val.slice(1)
      //字符串拼接方法 将第一个首字母改为小写 后面是大写
    }
  },
  data(){
    return{
      message:'hello'
    }
  }
};
</script>

总结: 过滤器可以传参, 还可以对某个过滤器结果, 后面在使用一个过滤器

过滤器注意点

1. 要定义到filter节点上，本质是一个函数
2. 在过滤器函数中，一定要有return值
3. 在过滤器的形参中，就可以获取到管道符前面待处理的那个值
4. 如果全局过滤器和私有过滤器名字一致，此时按照“就近原则”调用的是私有过滤器

框架相关

原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

在框架方面，生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的，在学习的过程可以结合框架的官方文档

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

Vue框架

知识要点：
1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

[外链图片转存中…(img-jUpDjhNv-1715382654634)]