VueJS 的过滤器 filter API

一直没有怎么用过 Vue 的 过滤器 API,都是直接用 AntD Pro 当中提供的数字千分格式化、时间格式化之类的,没有自己去声明过,主要是因为 Array.prototype.filter 的先入为主,一直把 vue.filter 理解成为了筛选,而不是过滤器。

其实,vue.filter 是借鉴了 Linux 当中的 Pipe 符号 (|) 来处理数据 ,然后借用了 filter 这个名字:

利用 Linux 所提供的管道符 “|” 将两个命令隔开,管道符左边命令的输出就会作为管道符右边命令的输入

其实我觉得如果直接用 pipe 来命名其实就更好理解了,但是也许是因为前端圈子接触到 pipe 的人并不多,使用 filter 这个熟悉的单词可能更加容易让大众接受。

使用起来确实很方便,用 | 符号分隔就行,会按照 从前往后的顺序 依次 传入过滤器,然后返回转换后的值。

等到后来再遇到适合的场景想起来使用 filter ,但又因为项目的历史原因没有去使用,因为自己都是局部使用 computed计算方法调用返回 来处理(也是Vue3所推荐的替代过滤器的方式

阅读全文

聊一下自己 VueJS 项目的编码习惯和风格

横幅

最近在考虑把遍码习惯整理一下,一个良好的遍码习惯可以有效减少一个项目的维护成本,
因为不可能在整个项目的生命周期中,均由最初的开发人员来维护,或者所有的代码都是由你一个人写出来的,
改善代码的可读性,可以让开发人员尽快理解历史的业务代码。

之前也有研究过 ESlint的格式化风格 选择一款适合自己的来规范自己,但是了解的越多,越觉得还是需要团队互相讨论来找一个大家能都接受的妥协结果,所以最后还是选择了 Prettier ,因为我觉得其它两种风格相对来说太严苛了,很多项目都是自己开发并没有多人合作开发的情况出现,所以使用 Prettier 相对来说所自由一些…

阅读全文

VueJS中 v-bind 的一些修饰符

今天洗澡的时候在听 饥人谷的模拟面试 (五) 的时候,一直觉得这次面试的学生有点差,如果是我来面话可能已经让他回家了,但是 方方老师 很有耐心,在中间问道 .sync 的时候我 ???? 完全没有印象了。

正好已经有2个月没有更新了,所以复习一下 v-bind 的三个修饰符 [ .prop, .camel, .sync ]

阅读全文

Vue 使用 ref 注册组件的特性

一直以来,我对于 VueJS 中对于使用 ref 注册的组件,在使用 $refs 调用时,为什么有时候是一个 DOM元素/组件实例,是时候会是一个实例数组

所以在很长一段时间内我觉得 ref 注册的的组件在使用 $refs 调用时有很大的不确定性,虽然我的弹窗组件一直都是用的 $refs.modal.open() 来打开的。

直到前一段时间,我在一个场景下想在 v-for 循环渲染的组件下 slot 模板中想使用 ref 注册成一个实例集合来调用时,发现怎么样重写返回的都只是一个组件实例,而不是一个组件实例集合。

所以有了这样一篇笔记。

阅读全文

使用VueJS的计算属性监听DOM元素属性的问题

今天在写一个模拟微信的聊天组件的时候,需要获取消息列表的滚动条高度,来实现每次发送接受消息数据时,自动滚动到列表末尾。
当然就想到了用 Computed 属性来计算容器的 scrollHeight
然后就发现一开始滚动条会定位到列表最后,但是测着测着就发现怎么超出了一定高度范围之后就不会滚动到列表末尾了,而是固定在了一个值。

阅读全文

Jeecg-boot 开发挖坑日记08 Vue 中使用百度地图获取坐标点

突然想起来项目里边的一个需求,在用户申请称为公司账户的时候需要附加公司地址的百度地图坐标点,以便在 APP 中显示。
所以需要用到百度地图的坐标拾取,
反正总不可能让用户自己去拾取然后输入到 <input> 中去。

这篇文章就是简单说一下如何在 Vue 项目中使用百度地图。

使用到的组件: Vue-baidu-map

👉 开发手册

阅读全文

Jeecg-boot 开发挖坑日记07 多登陆入口

项目结尾了,但是需要根据用户和管理员设置不同的登陆入口界面,

所以就想着直接在 @/config/router.config.js 中修改基础路由,
但是因为不知名原因,路由并没有生效。

感觉像是有设置路由守卫全部都跳转回了 #/user/login

阅读全文

Jeecg-boot 开发挖坑日记04 全局 Vue-AntD 标签页的控制

开坑 2019 年 10 月 28 日

暂时没有找到好的方法,在不修改原来 layout 框架的情况下。

阅读全文

Jeecg-boot 开发挖坑日记03 动态路由传参

坑! @YogWang #2019/10/24

jeecgboot 针对路由组件的名字做了规则处理,所以默认不是 UserInfo

  • 如果自定义了路由组件名,则采用自定义名;
  • 未定义路由 name (通过 URL 生成路由 name,路由 name 供前端开发,页面跳转使用)

@zhangdaiscott #2019/10/27 Reply

今天写一个带参数页面的时候,怎么样都是

  • 404 然后跳转到 localhost:8080/#/;
  • 显示空白;

看了 Jeecg-Boot 的技术手册完全按照上边来的写也是不行,还是跳转到 /,在 Vue DevTools 中检查又没有问题。
就又折腾了好久,又是查文档又是看官方的教学视频。
最后真的是烦了,就偷懒了一把,结果成了….原因是啥呢???

阅读全文

Jeecg-boot 开发挖坑日记02 用户头像上传 / Vue-AntD上传组件

项目正式开始,第一个功能模块的用户信息编辑就开始卡壳,特别是头像上传组件。

  • 弹出框 a-mdal 的表单值怎么获取到的
  • ant-design-vue 上传组件的头像上传

使用 ant-design-vue 上传组件的头像上传。

在 Jeecg-boot 中头像上传是 antD 的上传组件 listType="picture-card"
在教程里是直接使用 upload 组件的 defaultFileList API,
但他们 DEMO 是 listType="text",或 listType="picture-card" 但绑定的是 fileList
并不是 defaultFileList,就和 ant-design-vue 的文档是一摸一样的照着读了一遍,

然后我直接复制的官方用户头像 DEMO,就出现了问题。

阅读全文