xt_XiTu的博客

1、vue-echartsvue-echarts是封装后的vue插件，更适合vue项目使用2、dayjsmomentjs已停止维护，dayjs与其功能基本相同3、number-precision计算方法，避免js浮点运算bug4、vue-wait和vuex搭配，方便控制接口请求等待时的loading效果，避免了通过特定变量控制时繁琐以及遗漏处理效果的问题5、vue-resize监听dom大小调整6、jsoneditor是一个基于 Web 的 JSON 数据浏览和编辑的工具7、vue-

git提交规范

git merge、 git rebase

gitmerge--no-ff-m‘合并描述’分支名不使用Fastforward方式合并，采用这种方式合并可以看到合并记录。gitupdate-index--assume-unchangedfile忽略单个文件。gitrm-r--cached文件/文件夹名字(.忽略全部文件)gitrm-r--cached文件/文件夹名字取消文件被版本控制。gitbranch--no-merged查看未与当前分支合并的分支。...

火狐浏览器文本两端对齐无效text-align: justify找了很多地方，尝试很多办法都不好使，直到看到这篇只需要设置了text-align: justify时加设一个white-space: pre-line就可以了

记录一下看到过几次但是总会遗忘的知识点。&是位运算。在计算机里是只认识二进制的，我们人类用的一般是十进制，而二进制有个特点就是每一位上要么是0要么是1，还有一个特点是如果哪个位置是1，那一位的值就是2n【这个符号表示次方】，n就是这个1所处的位。举个例子，比如二进制“11”，它有两位，那么类比十进制“个十百千”的规律，这里的个位1（也就是最右边的1）它的值是2^0 =1，它的十位就是2^1=2，所以它的总数为2+1=3。这就是二进制的计算规则。了解了这个规则之后，你可能会发现，2的n次方（n&g

cookie无法设置问题记录项目中遇到了一个cookie无法设置的问题，大佬排查之后，找出原因如下：当前服务器下不同端口有另外一个项目，并且存储cookie名称与我项目相同。正常来说，我项目登录后会直接将另外一个项目cookie覆盖掉，这样使用时还是正常的。但是由于另外一个项目是https的，cookie中有一个secure属性被设置为true，此时，非https的我的项目cookie就无法覆盖https设置的带有secure属性的cookie，导致项目无法登录...

方法 //排序方法 function sortNum(property){ return function(a,b){ var value1 = a[property]; var value2 = b[property]; return value1 - value2; } }, // 调用 arr.sort(sortNum('orderBy'))

1、使用插件lodashjs-pinyin2、下载npm install js-pinyin点击查看插件文档3、方法封装在js文件中引入两个插件，并初始化js-pinyin插件import Pinyin from 'js-pinyin'Pinyin.setOptions({ charCase: 1 })setOptions中传入对象，对象可传两个参数charCase参数： 输出拼音的大小写模式，0-首字母大写；1-全小写；2-全大写checkPolyphone：是否检查

1、对象数组的排序sortNum方法为排序方法，参数property为需要排序的字段名arr: [ { num: 23, name: '铅笔' }, { num: 5, name: '橡皮' }, { num: 33, name: '钢笔' }, { num: 1, name: '彩笔' }]function sortNum(property) { //排序方法 return (a, b) => { const value1 = a[property];

当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter，这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。因为直接写对象形式是引用数据类型，各个组件中都有data的话会互相影响，但是以函数形式返回出的对象，每次都是返回一个新对象，不会造成各组件间数据干扰。

常听前端内存泄漏，但是一直不知道怎么看是否泄露，或者内存泄漏不大的时候体会不到内存泄漏问题。一个很简单的判断方式，在项目页面中F12打开控制台，找到Memory，此处就会显示当前页面的内存占用情况，图中我的项目由于嵌套了iframe页面，所以显示两个占用情况下图箭头指的位置可以清除部分能被清除的内存具体查看内存是否泄漏的方法是：首先在一个页面A中找到memory内存这里，清除能清除的内存部分，然后记下当前内存情况，之后跳转要要查看内存泄漏的页面B，再跳转回原页面A，此时如果内存变多，证明要查看的

一个项目中拖拽排序使用的插件是vuedraggable，由于拖拽之后排序变化，通过v-for循环出的组件会重新创建，体验很不好，找了很多方法都没能解决无刷新组件更改排序，直到想起来看下v-for的原理。在vue中，通过v-for来渲染一个数组列表时，现在都需要传属性key，因为之前一直没太用到这相关的，所以key值我一直是用的index或者是随机字符串+index定义的，直到这次出的问题，才真正了解key的作用。就地复用策略就是解决本问题的关键点，在v-for循环的列表顺序改变时，只要key还是那个唯

vue-devtools是一款好用的vue开发调试工具，只有开发环境可以使用，生产环境无法使用。1、下载直接clone项目到本地git clone https://github.com/vuejs/vue-devtools.git下载之后注意切到项目文件夹中，npm install 下载依赖2、依赖下载完成之后，npm run build进行打包3、打包成功之后，注意shells文件夹，里面会有一个chrome文件夹，这个就是需要使用的4、打开谷歌，右上角三个小点的位置点击打开，找到更

首先找到用户代码片段的位置![](https://img-blog.csdnimg.cn/20201105094443610.png#pic_center在输入框中输入vue，然后选择vue.json或vue打开之后是这样的这些注释就是介绍怎么添加片段的添加的例子如下" 代表双引号\n为换行代码文字版为"vue_eslint_template":{ "prefix": "v1", // 想要使用这块代码时输入 "body": [ "<templ

场景：input框中需要对输入小数位数进行限制，但是每次不一定限制几位小数，需根据参数确定方法：在input中的input事件中，使用如下方法可以实现// amountDigit 为小数位数的变量//必须保证第一位为数字而不是.this.textarea = this.textarea.replace(/^\./g,"")//保证.只出现一次，而不能出现两次以上this.textarea = this.textarea.replace(".","$#$").replace(/\./g,"")

两个图标都加了hover状态和禁用状态效果1、加号通过定位以及::before和::after相结合实现效果：.addBtn{ display: inline-block; width: 16px; height: 16px; border-radius: 50%; background-color: #D4D7D7; position: relative; cursor: pointer; &:hover{ // hove

1、class名只有一个，只不过是变量<template> <div :class="classname"></div></template><script>export default { data() { return { classname: 'haha' } }}</script>2、通过对象形式此种方式适合针对固定的class名，判断是否存在此class名称<template&gt

前端常用正则表达式正整数、大于0整数或者保留两位数的小数、只允许输入数字和.、组合----限制小数位两位，整数位11位、判断字符串由数字、字母、下划线以及-组成，且第一个字符必须是数字或字母、判断字符串由数字字母组成，并且长度大于8或者长度在一个区间范围内、强密码校验、网址校验、日期时间校验以及时间校验