weixin_42060658的博客

原创 cookie跨域调试

1.0 在谷歌浏览器中分别输入下面地址chrome://flags/#same-site-by-default-cookieschrome://flags/#cookies-without-same-site-must-be-secure2.0 都设置为disabled，记得保存，报存后重启浏览器

原创 js处理复杂树状结构数据 2，拼接name为key

// 处理树状结构function getTree(params = [], result = [], key = '') { if (Array.isArray(params) && params.length) { params.forEach(item => { // 每次开启新的一轮循环，拷贝一份副本（key），因为副本会用于当前轮的其它兄弟，所以你不能改变副本（即不能改变key的值） let currentkey = key curre

原创 js处理复杂形树状结构数据 1

// 处理复杂形树状结构：/** * params： [] 数据源 * result： [] 存放结果的数组 * key: [] 副本，存放上一次处理结果 * values: [] 副本 * * 应用场景： 最终是要到最后一层，需要用到每一层的节点的部分数据，最后需要组拼起这部分数据 * 解决思路： 遍历数据源，当遍历的当前项中的数据有children节点，在该节点拷贝一份副本，用个变量保存， * 用这个变量作为下一轮循环的副本，直到当前项中没有children节点，最后将保存下来的数据

原创 解决vue-cli打包node内存溢出

解决方案// 第一步npm install -g increase-memory-limit// 第二步：increase-memory-limit值得注意的是，可能发现有时候无效，删除 node_modules再次重试，使用有管理员权限的PowerShell，换淘宝镜像源

原创 在elementui中的el-table组件实现行的拖拽效果

第一步： 第三方包下载# 二选一npm install vuedraggablenpm insall sortablejs注意点:vue中使用vuedraggable或者sortablejs实现,其实 vuedraggable依赖于 Sortable，当npm install vuedraggable时其实就有了 sortablejssortablejs相关配置，官方文档第二步： 使用// draggable 依赖于 Sortable，当npm install vuedraggable时其

原创 浏览器类型判断代码

browserType () { var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isOpera = false; if (userAgent.indexOf('Edge') > -1) { return "Edge"; } if (userAgent.indexOf('.NET') > -1) { r

原创 关于数据处理（对复杂数据的映射处理）

要处理的数据结构：// 要求： category_name为title,category_code为key,只需要title和key数据 var arr = { "success": true, "message": null, "errorCode": null, "data": [{ "category_code": "2261", ...

原创 Vue混入

Vue混入—推荐文章

原创 微信网页授权登录的方法

微信网页授权登录官方文档微信网页授权登录的方法–推荐文章一微信网页授权登录的方法–推荐文章二总结：微信授权方式（scope的属性值控制）：应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ）...

原创 为什么vue组件中的data必须是函数

vue组件中的data必须是函数

原创 vue3.0响应式数据是如何实现的？相比vue2.0中Object.defineProperty()有什么优势？

数据劫持什么是数据劫持数据劫持指的是在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果。常见的数据劫持的方法Object.defineProperty(obj,'要监听的属性名'，{ set(newVal){ }, get(){ }})var obj = {};Object.defineProperty(obj, 'name', { ...

原创 github在公司使用的步骤（多账户配置以及使用）

初入公司，要进行项目开发，使用git版本控制工具管理代码，该如何使用？使用公司的github账号以及用户名，在公司电脑上生成私钥和公钥，叫主程在公司的github的ssh配置中，添加你本地生成的公钥(xxx_rsa.pub)，添加成功后，你就可以克隆项目后在本地修改新增后正常提交情况一： 如果给的是一台新电脑（可能没配置过ssh）1.0 生成 ssh key，在c盘的user目录下的ss...

原创 SSH同时管理多个ssh私钥

SSH同时管理多个ssh私钥视频教程

原创 请用es5和es6分别封装一个数组去重的方法

es5实现数组去重function uniqueArr(arr) { var obj = {}; var result = []; arr.forEach(function(item,index) { if (!obj[item]) { obj[item] = item; result.push(item) } }) return result}es6 实现数...

原创 关于 promise链式调用与中止

关于 promise链式调用与中止promise是如何进行链式调用的：promise 的 then 方法里面可以继续返回一个新的 promise 对象下一个 then 方法的参数是上一个 promise 对象的 resolve 参数catch 方法的参数是其之前某个 promise 对象的 rejecte 参数一旦某个 then 方法里面的 promise 状态改变为了 reject...

原创 vue前端打印插件

vue前端打印插件

原创 vue虚拟化长列表插件推荐

vue-virtual-scroller

原创 深入理解：函数、匿名函数、自执行函数、闭包

推荐链接

原创 以插件的形式实现自定义组件全局编程式调用，通过Vue.extend

Vue.extend是什么?是 Vue中的一个全局API有什么用？是预设了部分选项的Vue实例构造器，返回一个组件构造器主要用于需要 toast、loading、messageBox等弹窗组件的封装，可实现编程式方式调用组件怎么用？封装一个插件在main.js中引入将来直接通过 this.$xxx的方式调用注意： extend创建的是一个组件构造器（构造函数），而不...

原创 在vue项目中使用Mockjs

作用： 生成随机数，拦截ajax请求生成随机数：npm install mockjs// 使用 Mockimport Mock from 'mockjs'var data = Mock.mock({ // 属性 list 的值是一个数组，其中含有 1 到 10 个元素 'list|1-10': [{ // 属性 id 是一个自增数，起始值为 1，每次增...

原创 vue2.x双向数据绑定原理Object.definPropetery

<input type="text" v-modle="aaa"><div v-text>{{ aaa }}</div>1.0 概念： 当视图发生变化，数据改变(如输入框的输入数据，数据改变) 数据改变，视图发生变化（当数据发生变化，div中的aaa发生变化）2.0 实现原理是通过 Object.defineProperty(obj,'key',{...

原创 vue-cli 4.x版本配置环境变量

你可以替换你的项目根目录中的下列文件来指定环境变量：.env # 在所有的环境中被载入.env.local # 在所有的环境中被载入，但会被 git 忽略.env.[mode] # 只在指定的模式中被载入.env.[mode].local # 只在指定的模式中被载入，但会被 git 忽略如 .env.developme...

原创 vue-cli 4.x 打包优化 ( 相关配置是放在vue.config.js )

参考文章一：来源掘金参考文章二：来源掘金

原创 vue-cli4.x版本打包项目遇到的问题：baseURL是未定义的属性

原因： 查看文档后发现baseURL在vue-cli3.3后面的版本中被弃用，在package.json中看了一下 vue-cli的版本为 4.x解决方案:使用 publicPath对象module.exports = {// process.env.NODE_ENV 全局都可以调用，如果为 npm run build 中输出结果为 production，如果是 npm run serve...

原创 函数的防抖与节流

函数抖动： 不断触发事件会不断的执行某个方法函数防抖： 当事件在不断的触发，等待停下来之后 会执行一次举个栗子： 比如煮饭，整个过程在加热（好比 不断触发事件），只有电饭煲跳了之后（好比 事件触发停下来），就可以吃饭了（执行某个方法）var timer = nullfunction fangdou(await) { if (timer) { // 只要事件一触发，初回清除上一次的定时...

原创 页面刷新后，会对 vuex 进行重置，如何防止 数据丢失的问题

刷新页面时，vue实例重新加载，从而，store也被重置了。store是用来存储组件状态的，而不是用来做本地数据存储的。所以，对于不希望页面刷新之后被重置的数据，我使用了本地存储来进行存储解决方案： 监听 beforeunload 这个方法，beforeunload 在页面刷新时触发，监听 beforeunload 让页面在刷新前将数据存到 sessionStorage 中1 .在ma...

原创 v-model在自定义组件中的使用

v-model的作用：父组件通过 v-model 向子组件传递一个 value 属性，子组件内部 通过 $emit(‘input’,result)触发父组件中的自定义事件，在该自定义事件中修改 父组件传递给 子组件的 value属性值，说白了就是 实现了父子组件之间的通信...

原创 transition之页面切换过渡动画

推荐文章 ---------transition之页面切换过渡动画实现步骤1.0 使用 <transition></transition>组件包裹路由动态组件<router-view></router-view>vue 中常见的内置组件: <transition>  </transition...

原创 vue-router中的导航钩子

1.0 全局的 const router = new VueRouter({ ... }) // 注册全局前置守卫 router.beforeEach((to, from, next) => { // ... }) // 注册全局后置钩子，不会接受 next 函数也不会改变导航本身 router.afterEach((to, from) => { // ....

原创 vue 页面缓存和不缓存方法之 keep-alive

利用 <keep-alive></keep-alive> 标签 包裹<router-view></router-view>页面缓存<keep-alive> <router-view></router-view></keep-alive>实现步骤一： 在 router.js 中来控制某个组...

原创 vue项目中的移动端调试神器 vconsole

安装npm install vconsole -D在mian.js中 使用import Vconsole from 'vconsole'let vConsole = new Vconsole()Vue.use(vConsole)

原创 vue scoped 深度作用选择器

探究初衷： 最近vue项目中使用了 vant 第三方UI组件库，发现通过 审查元素获得第三方组件的类名，企图通过该类名去修改组件样式，但是不起效果，然后百度一番之后，得到的结果是 “因为scoped,巴拉巴拉xxxx, 然后使用深度选择器是最优的方式”，看了之后一脸懵逼，啥，what?????，所以决定好好探究一下下1.0 为什么在vue组件的样式中使用深度选择器？因为在当前组件中(.vue文件中...

原创 vue 后台模板推荐

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型vue-element-admin...

原创 vue-cli3实现移动端自适应

vue-cli3实现移动端自适应

原创 vue.js 一个超简单的例子让你搞懂nextTick的使用场景(转载)

vue.js 一个超简单的例子让你搞懂nextTick的使用场景(转载)

原创 关于 vue项目中的表单验证组件（VeeValidate 3.x版本的使用）

VeeValidate 官方文档VeeValidate 官方文档下载npm 方式npm install vee-validate --saveyarn 方式yarn add vee-validate使用使用步骤1.0 导入验证组件 ValidationProvider，以及 extend模块2.0 按需导入验证规则（验证组件所提供的，入email,required）...

原创 vue中全局组件与局部组件的使用差别

原创 如何搜索vue和react相关资源（如插件）

使用 github 搜索 awesome-vue awesome-react， awwsome表示令人惊叹的资源库

原创 React 相关学习文档

React 官方文档 [学习语法等等]react-router-dom 官方文档[ 学习API: HashRouter,Link,Route,Switch,Redirect 等等]react-redux 文档文档[学习API: Provider , connect()]redux-thunk 异步actioncreate-react-app 中文文档[如 生产环境 还有线上环境的配置]...

原创 在 create-react-app构建项目时使用css-modlue解决样式冲突

1.0 理解css-modlue是什么CSS-Module 是一个 css 模块化解决方案，可以通过webpack 在 css-loader 配置 css-module ，开启后默认局部作用域2.0 为什么要使用css-modlue通过模块化的方式引入css,这样引入的样式名称会根据一定算法给名称加以修改，防止在引入其他组件的时候样式会冲突3.0 如何使用，以及应用场景模块化方式引...