教女朋友学习 vue中的过滤器及其时间格式化

【 知识拓展 】

slice() 方法可从已有的数组中返回选定的元素。

① 语法：

arrayObject.slice(start,end)

② 参数：

| 参数 | 描述 |

| — | — |

| start | 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。 |

| end | 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素 |

③ 返回值 ：

返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。

三、局部过滤器

定义一个局部的过滤器，格式化当前时间

【 代码示例 】

当前时间是： {{ dateTime }}

格式化后的时间是： {{ dateTime | dateFormat }}

测试结果：

注意：

当有两个名称相同的全局过滤器和局部过滤器的时候，会以就近原则进行调用过滤器，局部过滤器的优先级高于全局过滤器。

【 知识拓展 】

padStart() 可以在字符串的开头进行字符补全。

① 语法：

str.padStart(targetLength [, padString])

② 参数：

| 参数 | 描述 |

| — | — |

| targetLength | 当前字符串需要填充到的目标长度。如果这个数值小于当前字符串的长度，则返回当前字符串本身。 |

| padString 可选 | 填充字符串。如果字符串太长，使填充后的字符串长度超过了目标长度，则只保留最左侧的部分，其他部分会被截断。此参数的缺省值为 " "（U+0020）。 |

③ 返回值：

在原字符串开头填充指定的填充字符串直到目标长度所形成的新字符串。

---

借鉴网上的常用方法格式化时间

当前时间是： {{ dateTime }}

格式化后的时间是： {{ dateTime | dateFormat('yyyy-MM-dd hh:mm:ss') }}

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？

e 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
[外链图片转存中…(img-aNgecZ3Q-1714721490457)]

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