xiubinxu的博客

例： 通过在父组件中点击按钮打开弹框。例： 通过在子组件中点击按钮关闭弹框。借助中间的父组件传值就行。

v-if是惰性的，如果初始条件为假，则什么也不做；v-show会生成vnode，render的时候也会渲染成真实节点，只是在render过程中会在节点的属性中修改show属性值，也就是常说的display；v-html会先移除节点下的所有节点，调用html方法，通过addProp添加innerHTML属性，归根结底还是设置innerHTML为v-html的值。v-if会调用addIfCondition方法，生成vnode的时候会忽略对应节点，render的时候就不会渲染；：v-if有更高的切换消耗；

JavaScript中Number.MAX_SAFE_INTEGER表示最⼤安全数字，计算结果是9007199254740991，即在这个数范围内不会出现精度丢失（⼩数除外）。但是⼀旦超过这个范围，js就会出现计算不准确的情况，这在⼤数计算的时候不得不依靠⼀些第三⽅库进⾏解决，因此官⽅提出了BigInt来解决此问题。

2、JSON（JavaScript Object Notation）：这是最常见的数据格式，服务器可以返回JSON格式的数据，Axios会将其解析为JavaScript对象。如果返回类型是Blob的话，都会返回size这个字段的。4、Blob（Binary Large Object）：服务器可以返回二进制数据，例如图像或文件，Axios可以将其封装在Blob对象中返回。6、FormData：当使用Axios发送包含文件上传的表单数据时，服务器可能返回FormData对象，Axios会将其返回。

// 需要过滤的树形结构数组var arr = [{ pId: null, positionId: '01', children:[ {pId: '01', positionId: '00012', children:[]}, {pId: '01', positionId: '00013', children:[]}, {pId: '01', positionId: '00014', children:[]}, {pId: '01', positionId: '00015', childre

效果图<template> <div class="multi-distribution-head"> <c-product :selectObj="{productType:'一级难度'}" :isIncomingData="true" :productData="showTypeTree1" :defaultCheckedKeys="defaultCheckedKeys" :defaultProps

vue计算属性-computed目标: 一个数据, 依赖另外一些数据计算而来的结果语法一:computed: { "计算属性名" () { return "值" }}需求:需求: 求2个数的和显示到页面上<template> <div> <p>{{ num }}</p> </div></template><script>export defaul

首先你需要一个github账号，所有还没有的话先去注册吧！https://github.com/我们使用git需要先安装git工具，这里给出下载地址，下载后一路直接安装即可：https://git-for-windows.github.io/1.进入Github首页，点击Your repositories=>New新建一个项目2.填写相应信息后点击create repository即可Repository name: 仓库名称Description(可选): 仓库描述介绍Publi

try…catch 语句是什么？try…catch 可以测试代码中的错误。try 部分包含需要运行的代码，而 catch 部分包含错误发生时运行的代码。try…catch语法try { //在此运行代码}catch(err){ //在此处理错误}运行流程：try{...}包含块中的代码有错误，则运行catch(err){...}内的代码，否则不运行catch(err){...}内的代码。try…catch案例var array = null;try { doc

做项目的时候，客户提出一个需求，就是分页不能直接点击到最后一页，如下图一，但是等一页一页的翻到最后一页的时候是有最后一页的，如下图二图一图二然后我就想到，在样式上动手脚，果然不出我所料，竟然可以。你仔细观察这个分页可以发现这里面是有唯一标识的，就是那三个点点，而且前面的三个点点和后面的三个点点的class类名不一样，这是不是就好办了，就是在点击分页操作和获取数据的时候去获取它的class类名，有的情况下就隐藏掉最后一个li标签，没有的话再给它展示出来。代码如下//定义全局变量data(){

1，addEventListenerdocument.hidden：表示页面是否隐藏的布尔值。页面隐藏包括 页面在后台标签页中 或者 浏览器最小化 （注意，页面被其他软件遮盖并不算隐藏，比如打开的 sublime 遮住了浏览器）。document.visibilityState：表示下面 4 个可能状态的值hidden：页面在后台标签页中或者浏览器最小化visible：页面在前台标签页中prerender：页面在屏幕外执行预渲染处理 document.hidden 的值为 trueunloade

// import引入import ElImageViewer from 'element-ui/packages/image/src/image-viewer' // 在组件内声明export default { components: { ElImageViewer }}html：<el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="imgURL"></el-imag.

基于 CountUp.js 的 Vue 组件, 简易数字动画跳动安装： npm install vue-countupjs --savemain.js： import VueCountUp from 'vue-countupjs' Vue.use(VueCountUp)html： <v-countup start-value="0" :end-value="1000"></v-countup>配置项： start-val

1.src文件夹下新建util.js文件以便存放公共方法export default { rowspan: function (data) { var index = data; // 代码 return index; }}2.main.js中,将unils里的方法注册为全局方法：import utils from '@/util/util.js' Vue.prototype.utils = utils3.任意文件中使用mounted () { var index

Case 1vue项目在IE中自动读取缓存中的数据，不重新发请求解决方案：// 在每个请求上增加时间戳config.url = `${config.url}?_t=${+new Date()}`

数字千分位分隔export const format = (n) => { let num = n.toString(); let len = num.length; if (len <= 3) { return num; } else { let temp = ''; let remainder = len % 3; if (remainder > 0) { // 不是3的整数倍

titletooltip: { show:true,//显示策略，默认值true,可选为：true（显示） | false（隐藏） text: '主标题',//主标题文本，'\n'指定换行 link:'',//主标题文本超链接,默认值true target: null,//指定窗口打开主标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口） subtext: '副标题',//副标题文本，'\n'指定换行 sublink: '',//副标题

一、什么是深拷贝？什么是浅拷贝？浅拷贝只复制一层对象的属性，浅拷贝出来的对象如果改变了第二层或更深的数据会影响原对象。而深拷贝则递归复制了所有层级，改变任何数据都不会影响原对象二、深拷贝和浅拷贝的方法和存在的问题1.JSON.parse(JSON.stringfy())正确处理的对象只有 Number, String, Boolean, Array, 扁平对象，即那些能够被 json 直接表示的数据结构。jQuery的$.extend() 第三方库实现深拷贝没有处理循环引用的问题。项目中如

如果你使用这个Math.round（），这个toFixed（），还有这个Math.pow()，保留小数位不好使，那就请看过来，使用这个就好了function roundFixed (num, fixed = 2) { let nums = num.toString().split('.') if (nums.length >= 2) { let fixedNum = nums[1] if (fixedNum.length > fixed) { let

常用的 数组 <==> 字符串 互转一.字符串转数组(1) split(),里面可传入两个参数,第一个是必填,是以什么方式分割,下面的例子就是以 逗号 分割的第二个参数表示分割到哪个位置var str1 = 'abc,abcd,aaa'var arr1 = str1.split(',')// 在每个逗号(,)处进行分解 ["abc", "abcd", "aaa"]// 在每个逗号(,)处进行分解,且分解到第二个处["abc", "abcd"]console.log(str1.sp

git的使用-新建本地仓库及拉取远程仓库代码自述你好! 这是自己第一次写自己的博客,自己也是一个小白,在程序猿的道路上越陷越深,导致无法自拨.无数次的掉进坑里 无数次的爬出来,真担心哪天爬不出来了,这篇将会给大家分享怎么在git的坑里爬出来的!!!git远程代码的拉取和分支的新建准备工作:此时git已经下载安装好的,鼠标右击可以看到的,然后找到你想要放代码的本地路径上,如:对着 E盘右击,...

提交代码及合并远程分支代码接着上篇的说,上篇我们将分支创建好后.就开始了愉快的开发.然而现在你是已经开发好了后呢?怎么将自己写好的代码提交到你们公共的分支上呢?不要着急,我来说你来听就行了!git add . 将自己的写的代码 或者 修改的内容暂存起来(此时在xxb自己的分支上)git commit -m"这里面是你的注释信息" 将代码提交到暂存区git checkout de...

vue 组件通信传值 父传子 子传父我们知道vue的特点就是组件化开发,说到组件化开发 必定少不了的就是组件之间的通信传值了,说到组件之间的通信你有知道多少呢?父传子子传父一.父传子现在有两个组件== parent.vue ==== child.vue ==** parent.vue中 **<template> <div class="app"&g...

vue项目做一键复制页面内容到粘贴板功能你在项目里面是否遇到过 页面数据过多,但是你想将页面的数据一下复制出来 并将将数据粘贴到微信,扣扣或者钉钉里面呢?怎么办呢?请往下看吧!技术要点 v-clipboard// HTML<div v-clipboard:copy="shareTxt" // 复制生成的数据 v-clipboard:success="onCopy" // ...

axios 全攻略随着 vuejs 作者尤雨溪发布消息，不再继续维护vue-resource，并推荐大家使用 axios 开始，axios 被越来越多的人所了解。本来想在网上找找详细攻略，突然发现，axios 的官方文档本身就非常详细！！有这个还要什么自行车！！所以推荐大家学习这种库，最好详细阅读其官方文档。大概翻译了一下 axios 的官方文档，相信大家只要吃透本文再加以实践，axios 就是小意思啦！！如果您觉得本文对您有帮助，不妨点个赞或关注收藏一下，您的鼓励对我非常重要。axios 简介ax

常见的字符串拼接1.es6 `` ${}const str = 'aaa'let ccc = `你好${aaa}`2.加号运算符(+)const str = 'aaa'let ccc = str+ 'bbb'3.concat()const str = 'aaa'let ccc = aaa.concat('bbb')4.join()const arr = ['hello', 'aaa', 'bbb']const str = arr.join('')// console.log(

数据合计问题今天遇到了一个问题,项目中有一个数据列表,需要做合计,但是需求是名字相同的只做一次合计,如下图:所以做完后根据项目数据,自己造了一个json,做了一个dome,长个记性a: [{name: '张三', label: '1', num: 3}, {name: '李四', label: '2', num: 4}, {name: '王二', label: '3', num: 5}, {name: '张三', label: '1', num: 3}, {n

哈喽,大家好,今天我要介绍一下vue中怎么使用事件委托吧!那说到事件委托,那什么是事件委托呢?大佬就此略过吧,不懂得可以随便阅读一下.事件委托概念:那什么叫事件委托呢？事件委托也叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。太官方了,不够明了,举个例子吧有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台小姐姐代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么

技术: vue + element现在我们有这样一个需求,有当前政策和中指数据两个tab切换页签,在中指数据页面勾选到的数据要在当前政策这里能够展示,和删除,如果在当前政策这里删除了,那么中指数据那里取消勾选表格我用的是element table type=“selection”当前政策页面中指数据页面我遇到的问题就是 如果在当前政策这里删除了,那么中指数据那里怎么取消勾选?element 官网上这么说的,我先开始这用的clearSelection这个方法,想着删除了哪一条就把这一条出

每个公司都有自己的发版方式,但是大都是自己配置好的,有的是可视化的CI/CD,有的是命令行的deploy,但我感觉这些都太依赖于前者了,有种前人栽树后人乘凉的感觉,不喜欢,今天这个就是最原始的发版方式,以不变应万变的感觉发布软件:推荐 WinSCP,因为用的就是,你随意就行一,下载好之后会有这样一个登陆的页面,你需要依次输入下面的主机名: 就是你们的服务器地址,有预生产,测试地址什么的,例如:11.138.65.14用户名: 找公司要密码: 找公司要端口是默认的22,不用管,除非你的修改.然后就

** 今天项目中遇到这样的一个问题,感觉有必要记录一下.就是子组件的值是父组件中传过来的,当我在父组件改变了子组件的值的时候,发现子组件的视图并没有发生更新,肿么办?**思路: 只要强制更新视图就行了解决方法一: 使用了 key-changing// 父组件<div class="listBtns"> <el-button type="primary" size="mini" @click="extractData">提取数据</el-button><

今天在项目中遇到一个这样的问题,需要给树形结构的数据中加一个属性,其实很简单上代码吧// data中定义数据treeData = [{ key: 'num', title: '指标编号', children:[{ key: 'num', title: '指标编号', children:[{ key: 'num', title: '指标编号', children:[{ key: 'num', title: '指标编号', }] }] }]

在我们项目中是不是经常需要使用自定义的过滤方式来处理数据呢,如果一个项目中多个地方使用的话,建议写在全局哦// 处理时间的使用了moment,记得安装后再使用哦import moment from 'moment'/** * 简单处理 time YYYY-MM-DD HH:ss:mm */export function formatTime(time) { if (!time) return let arrTime = time.split(' ') return arr

使用echarts.resize()实现缩放时图表自适应(vue)不知道大家使用echarts时是否遇到过当我们的窗口改变时,我们页面上的图表就缺失了一块,那一块被白色什么的所覆盖,图表没有实现实时的刷新,咋办呢?技术要点: echarts里面的resize() + 节流mounted() { // this.initEcharts 初始化图表 this.initEcharts(this.type) // debounce 节流函数 下面送上 this.__resizeHandler

霸气侧漏的js特效,弹性撕裂桌面右击 新建=>文本文档(.txt)=>将代码粘贴进=>修改 .txt 为 .html 保存 => 再次右击选择打开方式为chrome…<html class=""><head><meta charset="UTF-8"> <script type="text/javascript" style="display: none !important;"> funct

前端特效之樱花劫打开的一瞬间,被这个特效震撼到了,真是太漂亮了直接上代码<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>cloth</title> <style> body { padding:0; margin:0; overflow:hidden; height: 600px;}

vue+element-ui之span-method属性实现动态表格相同数据合并单元格今天碰到一个需求,我的表格是动态生成的,循环遍历出多个table表格, 如果里面某一列有相同的数据的,将单元格合并,起初找到了element里面的一个属性span-method感觉挺高兴的,仔细看了后才发现,他们用的时候表格都是死的,而我的表格是动态生成,处理数据的时候列表数据data传不进去,最后…// HTML<el-col v-for="(item, index) in result" :key

导出 || 下载,解析数据流,type设置>>解析数据流let param = {data: this.searchForm.data}this.btnDisabled = truegetDownloadList(param).then((res) => { console.log(res)// 后台返回的是数据流 const link = document.createElement('a') // 解析数据流 let blob = new Blob(

优化 JS 条件语句的 5 个技巧在使用 JavaScript 时，我们会处理很多条件语句，这里有 5 个技巧可以帮助您编写更好、更简洁的条件语句。1、对多个条件使用 Array.includes让我们看看下面的例子：// conditionfunction test(fruit) { if (fruit == 'apple' || fruit == 'strawberry') { console.log('red'); }}乍一看，上面的例子看起来不错。然而，如果还有更多红

动态时间段的禁用应用背景:不知道大家遇到过这样的需求没? 每一行的开始日期和结束日期时间**区间不能重叠**，但是可以出现中断。如：第一行开始时间-结束时间为：2020.1-2020.3，下一行数据不能在1月到3月，可以为2020.5-2020.7。**结束日期默认为至今**(本来可以使用 daterange 的,就是因为这句话,避免不了了)。点击添加按钮，可以在表格下方新增一行，操作同上。本来自己想着还挺简单的,可是随着行数添加的越多,发现越复杂,没办法 需求已经确定了改是改不了了,硬刚吧!实