一只程序猿

*此文章仅仅针对数组对象，纯数字数组太过简单，无需多说先声明3个数组，就以这3个数组为列，进行工作中常用的数组操作模拟1、多个数组合并concat结果： 2、数组去重filter+map结果： 3、数组排序，重写sort方法结果：4、两个数组取交集（两个数组都存在的部分）结果： 5、两个数组取差集 结果：

这个没什么难点，就是找数据挺麻烦。我是直接拿的vant的数据。再通过一系列的js操作转换成了一个树结构的对象。，因为基于element的样式，所以这个对象里面基本都是他的原生属性。1、组件源码main.vue。此组件已上传至npm。

fileName（必传，看和后端约定，可以在response的header中返回文件名称）3、测试使用 testDonlad.vue，当挂载全局，或者打包上传npm之后，只需要。可以根据实际项目约定修改。requestType（请求类型非必传，默认get）封装成组件，多了一个element按钮的对象属性，这样一行几个字代码就能实现文件下载，岂不是美滋滋。集成element原生属性，参考自定义样式。params（请求参数非必传）1、组件源码 main.vue。采用获取配置文件的方式，

此版本集成了eltable自身所有属性，看起来更复杂，但是功能更全面。主要是一些eltable自带的功能。需传入4个属性tableData、tableObj、columnObj、pageObj将tableObj和columnObj分离出来，tableObj主要是一些eltable自带的功能非必传。其他三个为必传对象。

tag点击事件，调用方法计算scrollbr宽度，计算tag宽度，计算tag距离left（左边）多少px。tag宽度+距离右边再加20px左右，如果大于scrollbr宽度，证明tag所在位置已经到了最右边，实现点击tag之后scrollbr跟随滚动。4、把scrollbar和tag封装成组件，通过点击tag，获取tag位置，并计算scrollbar和tag宽度，实现根据tag位置，scrollbar跟随滚动。初始化数据渲染完成之后，通过当前路由获取下标，实现初始化计算。拦截，每次路由记录到缓存。

场景：弹出框内部需要滑动。但是滑动会触发整体页面的滑动效果，导致弹出框内部滑动无效禁用外部整个页面滑动效果， 但是弹窗内依然可以滑动。enablePullDownRefresh级别高于disableScroll。要先关闭全局刷新，disableScroll才会生效。全局配置：app.json"enablePullDownRefresh": false当前页面json"disableScroll": true,...

七牛云创建空间，阿里云解析这些都没什么好说的了1、引入maven依赖，就一个七牛云的 <dependency> <groupId>com.qiniu</groupId> <artifactId>qiniu-java-sdk</artifactId> <version>[7.7.0, 7.7.99]</version>

原理：没什么原理就是无限递归，组件引用组件本身，如果在有子级的情况下才引用。* 此处对递归原理不是很熟悉的需要注意一个坑，就是在对组件展开和关闭时候。只需要拿到当前坐标对数组对象直接赋值，并不需要去获取所谓的多维坐标数组。不管你的对象在总数组的第几层，他永远在当前数组的第一层1.1、tree组件：wxml<view> <view wx:for="{{treeArr}}" wx:key="index"> <view class="view_ red" data

slot：分为默认插槽（没名字），具名插槽（有名字的）slot-scope：作用域插槽？为什么要用插槽，这玩意儿有什么用，一段代码一目了然父组件：<template> <div> <div>父</div> <son> 这个就是插入的内容 </son> </div></template>子组件：<template> <div> &lt

逻辑梳理：1、画格子。固定xy（两个数组）长度，采用数组坐标[ [ { food:false,snake:false}, { }, { } ],[ ], ] 得到一个装有对象的二维数组。2、点击开始游戏，使用随机数生成食物与小蛇。随机数最大值为当前xy的值。生成小蛇与食物即将对应坐标对象的food和snake属性改为true，且将当前坐标对象{ x:" ", y:" "} 存入单独的小蛇数组。3、监听键盘按键。←↑→↓（键盘按钮code，左:37，上:38，右:39，下:40）。按下之后....

思路很简单，大div里面放6个小div，小div使用绝对定位脱离文档流，3D转换加transform-Origin更改元素位置拼成一个正方体。最后使大div转动起来。<template> <div class="flex jc_c ai_c" style="height: 800px;"> <div class="max_div"> <div class="box1">1</div> <div class="box2"

1、众所周知，vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变。这段话应该每个面试找工作的前端都背过。但是究竟是如何实现的，我个人按照个人理解，简单的梳理一下。input触发input事件 >Object.defineProperty set() 赋值>回调直接传入值 或者 调用更新视图方法，利Object.defineProperty get()方法取值我觉得还是直接看代码，...

1、正常连接1个情况写法应该是const matching = (obj => { //可以把这段代码直接放到page的onLoad中，或者自己定义一个事件 wx.connectSocket({ url: `wss://www.***.com` }) wx.onSocketOpen(function(res) { console.log('WebSocket连接已打开！') wx.sendSocketMessage({ data: JSON.stringify({

前言：vueX5个属性简述state：vuex的基本数据，用来存储变量geeter：从基本数据(state)派生的数据，相当于state的计算属性mutations：提交更新数据的方法，同步actions：提交的是mutations，而不是直接改变状态，异步modules：模块化vueX，里面每个对象都有完整的vueX1、新建sessionStorage.jsexport default { setValue(key, value) { if (typeof valu

1、问题出现原因，form表单复用。多次试验结果如下：1.1、先打开新增弹出框（没有值）再打开修改弹出框（赋值），resetFields()方法可以生效！1.2、先打开修改弹出框（赋值），再打开新增弹出框（没有值），此时resetFields()方法不再生效！不管新增还是修改，resetFields()方法都不再生效！哪怕你手动删除值，再次打开依然会存在数据！2、原因是这个初始值是在form mounted生命周期被赋值上去的，解决办法使用 $nextTick()方法。注意顺序，弹出框要..

实现原理：把每个座位看成一个对象，可以添加自己要的属性。每一行是一个数组，有多个座位对象。总数也是一个数组，包含多行。<template> <div> 请输入宽度： <el-input v-model="rows" placeholder="请输入每行个数" type="number" :max="15" style="width: 200px;"></el-input> 请输入高度： <el-input v-model="co

前言：在JS中，数据类型只有两种，基本数据类型、引用数据类型。对于基本数据类型来说，它的值直接存储在栈内存中。而引用类型，它在栈内存中只是存储了一个引用地址，而真正的数据存储在堆内存中。1、浅拷贝（及 = 赋值），= 赋值只是引用地址而已，顾名思义指向相同。所以任意一个引用对象改变，都会改变引用地址的值。 let objA = { num:1, } let objB = {}; objB = objA; objB.num = 2; ...

1、弹出框，遮罩层在上面在el-dialog里面加上属性：:modal-append-to-body="false"2、弹出框使用el-col乱样式直接全局改样式：<style lang="less" scoped> /deep/.el-dialog,/deep/.el-dialog__header,/deep/.el-dialog__body,/deep/.el-dialog__footer{ overflow: hidden }</style&.

详解：element的form表单二次封装也很简单，写一个form表单你会发现不一样的地方只是form-item里面的组件类型而已。所以把form-item里面的内容可变化就行了。父级也只需通过一个数组（form-item里面组件类型数组），一个对象（form表单数据对象）控制就行了！为什么要多一个对象，是为了方便数据提交，以及数据验证。这次封装多加了el-col，也没有直接放进弹出框，是为了更加灵活可变！1、form表单代码（子组件）<template> <el-form :

前言：个人理解所谓封装，就是把经常都要公用的东西，拿出来，可以多次复用。公用方法，公用页面都可以封装。其实封装也并不是有多难，思路也很简单，就是用JS来控制页面。页面动态性越强，组件越灵活，适用范围越广。就vue+element的组件封装而言，先把所有功能在子页面实现。然后把js里面的动态值，拿到父组件里面去传过来，就完成了，其中技术也就掌握父子组件传值而已。1、下面就是el-table的一个简单封装：<!-- @author Zou Tiancong@version 创建时间：

父级flex，子级margin：auto.parent_div{ display:flex; width:100px; height:100px;}.children_div{ background-color: red width:20px; height:100px; margin:auto;}

1、路由懒加载，这个基本上每个项目必须。2、Ui框架按需引入，也就是要用哪些组件引入哪些组件3、关闭Map文件的生成，没关闭的vue项目打包后就会有很多的.map文件。这些文件主要是帮助我们线上调试代码，查看样式。脚手架2是在index.js。脚手架3就vue.config.js里面。将productionSourceMap 改为false。4、使用cdn...

最近无聊，就更新个路由的导航卫士吧vue-router官方文档：https://router.vuejs.org/1、全局前卫——router.beforeEach看名字就知道啦，beforeEach在路由跳转之前触发。router.beforeEach((to, from, next) => { })to：要导航到的目标Route对象，简单点说就是到哪里去。...

对于一个玩前端的java弟弟来说，确实应该补基础。这个问题今天扣了我2小时。很简单，vue中this点对象，属性名动态。看图就知道我想干嘛了。但是很明显对象点属性，直接给我新建了一个属性。翻了翻w3c才知道，这里应该用中括号。object[name] = value;...

vue-cli3以后对很多命令做出了改动，但是为了用户平滑过渡，依然支持vuecli2的命令1、创建vue项目，到要创建的目录，打开cmd输入命令：vue create 项目名然后选择配置，你可以选择基本Babel + ESLint设置附带的默认预设，也可以手动选择功能配置。（按上下 ↑↓ 符切换）2、我先选手动配置，手动配置也是上下符切换，a键全选，i键切换默认，按空格选中你要勾...

npm 更新命令：npm install -g npmvue-cli脚手架更新命令：npm install -g @vue/cli温馨提示，node在windows是不能使用命令更新的，乖乖去重新下载吧！更新之后就迫不及待的准备新建一个项目，但是看上面截图，好像并没有成功啊！vue init 要求加载全局项，请运行npm install-g@vue/cli init并重试。字面意思...

关于IE11，bootstarp table 不兼容报错SCRIPT438: 对象不支持“bootstrapTable”属性或方法这个是bootstarp table 的官方下载的最新地址：https://unpkg.com/bootstrap-table@1.13.4/dist/locale/1、bootstarp table无法兼容，最重要的原因是他的版本问题，很明显目前官网最新版 ...

MUI的picker默认选中的时候有个傻x的bug，这是用框架送的。在设置默认选中值，以及动态赋值设置默认选中值的时候。第一级可以成功设置默认选中，但是第二级和第三级，并不能设置默认选中。1、这是应该算是大家常规的赋值方法吧2、但是这样赋值，好像是随缘赋值，第二级和第三级随缘赋值成功与失败。3、经过N轮恶战，才发现居然是MUI自带的bug，属实是坑啊4、对，也就是设置了...

1、在当前目录下打开cmd窗口，执行 npm install axios 命令2、在核心文件main.js中引入import Axios from 'axios'//引入axiosimport Qs from 'qs'//QS是axios库中带的，不需要我们再npm安装一个Vue.prototype.axios = Axios;//使用AxiosVue.prototype.qs...

可能有的人对vue-resource 和vue-axios比较陌生，也可能用到了都不知道。vue-resourcevue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说，jquery的 $.ajax 能做的事情，vue-resource一样也能做到，而且vue-resource的API更为简洁。另外，vue-reso...

这里对Vue项目的每一个文件以及文件夹做一个详解，下面经常编辑、修改使用的文件夹会加粗标红 1、build 文件夹: 里面是对 webpack 开发和打包的相关设置，包括入口文件，输出文件，使用的模块等。2、config 文件夹: 主要是指定开发和打包中的静态资源路径，要压缩的文件类型，开发使用的端口号。2.1、dev.env.js文件是开发环境的变量，npm run dev ...

*温馨提示，这是vue-cli 2的版本，vue-cli3 以后对很多命令进行了更改，若需要创建脚手架3以后的项目，请查看我另外一篇博客https://blog.youkuaiyun.com/qq_37346639/article/details/886549231、NodeJs下载及安装http://nodejs.cn/download/，下载完成点击安装安装时可以选择自己常用的文件夹，然后配...

Vue在编译时报警告，就是因为很多人在创建项目时开启了eslint检测代码。想了解eslint的可以百度，配置过于繁琐，且规范要求过高，不建议使用。只需要去build文件下的webpack.base.conf.js把eslint配置删除或者注释就ok。...

可以使用html2canvas，实现在用户浏览器端直接对整个或者指定模块进行截屏。html2canvas其渲染成一个Canvas图片，能让用户保存为图片。html2canvas官网地址：http://html2canvas.hertzen.com/1、可以使用npm和yarn进行安装，也可以直接下载原生js导入。命令：npm install --save html2canvas ...

npm官方示列：https://www.npmjs.com/package/vue-cookies1、使用命令安装：npm install vue-cookies --save2、main.js里面引用import VueCookies from 'vue-cookies'Vue.use(VueCookies)3、页面js使用this.$cookies.set('ke...

因为项目需要，很多时候，其实都需要用到table在线编辑。另外本人比较喜欢写注释，所以就不做过多的解释了，下面就直接看代码（复制可用的）element-ui官网：https://element.eleme.io/#/zh-CN/component/table1、html代码<el-table :data="tableData" border style="width: 100%...

看了几天百度地图，才发现这玩意儿虽然不是很难，但是东西真的是太多了，根本学不完，所以就先把目前能用上的先看了一下。很多值也是动态可变的，大家也要多参考一下官方文档。vue-baidu-map官方文档：https://dafrok.github.io/vue-baidu-map/#/zh/index1、先来个最基本的搜索功能大家先看html，看不懂没关系，我在js里面写了注释，写的很清楚...

记得看总结，划重点，考试要考1、先封装axios，新建一个request.js。因为个人编码习惯，注释已经写得很清楚了，这个就不做过多解释了，直接看代码，import axios from 'axios' //引入axiosimport router from '@/router/router'//引入路由import VueCookies from 'vue-cookies' //...

1、首先你得有百度开发者账号，然后再使用账号创建你要的应用列表，会生成一个sk码百度地图首页地址（注册开发者账号，有的可以忽略）：http://lbsyun.baidu.com/Vue百度地图API文档地址（百度地图控件、覆盖物）：https://dafrok.github.io/vue-baidu-map/#/zh/index如果不添加控件，覆盖物，等等。地图就只有地图，没有任何操作...

vue项目使用ngrok代理时，访问网站出现Invalid Host header主机头无效？因为webpack出于安全考虑，默认检查hostName，如果hostName不是配置内的就不能访问。如果想访问，直接跳过检查就行了。直接在vue.config.js中的devServer中加入。（本人是vue3+，如果是vue2的朋友应该是在config文件夹下的index.js中的dev中加入...