黄彪博客

抖动函数和节流函数文章目录参考抖动函数和节流函数的区别？debounce去抖throttle节流参考带你一起来理解：函数去抖（debounce）和 函数节流（throttle）的作用和区别抖动函数和节流函数的区别？抖动函数：强制一个函数不被重复调用直到等待指定时间已经过去并且等待期间没有被调用。例如在距离上次调用之后100毫秒后才能调用下一次函数。节流函数：节流会强制规定在单位时间内一个函数调用的最大次数。例如每过100毫秒至少执行一次这个函数。debounce去抖定义：

Vue CLI4.0 webpack配置属性——css.sourceMap

对象描述了用户与键盘的交互。每个事件都描述了用户与一个按键（或一个按键和修饰键的组合）的单个交互；事件类型keydown，keypress与keyup用于识别不同的键盘活动类型。属性只读返回一个 Boolean，如果按键事件产生时，Alt（OS X 中是 Option 或⌥）键被按下，则该值为true。只读返回一个 Boolean，如果按键事件发生时 Ctrl 键被按下，则该值为true。只读that istrue只读that istrue"key", 可选，默认为""

文章目录一、参考二、问题描述三、原理说明四、代码过程解析一、参考今日头条选择时间段组件封装(开箱即用)andt-components github二、问题描述看着这个组件可以选择时间段范围，而且又选中表格的过程，好奇心想了解实现过程三、原理说明将一天24小时分为48个半个小时，一周七天，按照这个逻辑就知道每个单元格的坐标每个时间单元格添加 mouseenter 、 mousedown 、 mouseup 事件鼠标任意选中一个节点触发 mousedown事件，鼠标移动到

文章目录一、文章参考二、应用场景使用优点三、语法案例一、文章参考Vue官网 作用域插槽二、应用场景组件内部需要同时展示 父组件和子组件的数据，重点：父组件的数据紧紧用于展示，不做其他逻辑处理使用优点子组件如果动态获取数据，不需要传递给子组件父组件的数据也不需要通过传递属性的方式将数据给子组件，减少内部逻辑三、语法案例定义具名user插槽，然后在插槽slot控件中传递变量 userInfo<template> <div class> <

@[tac]一、问题描述每次使用el-scrollbar组件显示滚动条，都需要设置wrap-class样式的具体高度，如果有细微变化调整不灵活解决办法：使用一个div 控件将 el-scrollbar 组件包裹起来，并设置为 position: relative;相对定位，wrap-class 设置绝对定位，撑满父容器，因此只需要设置父容器的高宽度位置即可二、案例<template> <div class="huangbiao"> <div class="

文章目录一、参考二、问题描述三、第一个方案——动态 style 标签第一个例子第二个例子四、第二个方案——CSS 变量快速入门 CSS 变量 ，var() 函数Vue 修改CSS变量案例五、总结一、参考js修改style样式_Vue 动态样式黑魔法（超实用）CSS 变量教程 阮一峰二、问题描述工作中使用 elementUI 的scrollbar 组件，例如 <el-scrollbar wrap-class="demo-scrollbar-wrap-2">，只能让 wrap-cl

一、参考https://www.cnblogs.com/roland-sky/p/12916645.htmlvue.config.js 配置devServer: { // 如果改动node_modules内的代码, 不会触发热重载, 则取消下面的注释 // watchOptions: { // ignored: [] // }, proxy: { '^/api/': { target: 'http://localhost:8060', cha

文章目录一、 参考应用场景描述使用说明快速入门(订阅——发布)发布匹配多个订阅 规则发布匹配公共订阅和个性化订阅 规则类似应用一、 参考pubsub-js npm地址应用场景描述在React和Vue开发中，如果遇到同级组件或者跨多级组件的数据传递，可以使用pubsub-js库实现“订阅和发布”的能力，实现“数据跨组件传输”使用说明快速入门(订阅——发布)// 参考 https://www.npmjs.com/package/pubsub-jsimport PubSub from 'pub

问题描述在Vue工程中，添加样式，部分需要做到自适应，需要添加resize事件，由于是单页面应用，如果组件初始化的时候绑定事件，在切换页面的时候不去注销事件，如果来回切换，会让resize事件执行多个函数，迅速消耗CPU,浏览器会出现卡顿的情况解决办法Vue生命周期mounted 添加 resize事件Vue生命周期destroy 删除 resize事件案例// 定义逻辑函数fu...

文章目录一、slot插槽分类——具名插槽、默认插槽具名插槽默认插槽（没有slot名字）案例二、作用域插槽具名插槽作用域默认插槽作用域具名插槽和默认插槽混合使用三、API $slots$slots 概念案例说明思维导图和附件一、slot插槽分类——具名插槽、默认插槽具名插槽具名插槽定义（三种）<div> <slot name="up"></slot></div><div> <span slot="up"></s

文章目录非 Prop 的 Attribute（$attrs）参考应用场景替换/合并已有的 Attribute禁用 Attribute 继承$attrs概念说明$attrs 案例inheritAttrs: false 和 $attrs ；配合使用解决的问题？将原生事件绑定到组件参考$listeners概念说明案例思维导图附件非 Prop 的 Attribute（$attrs）参考非 Prop 的 Attributevm.$attrs API应用场景一个非 prop 的 attribute 是

文章目录文章参考问题描述解决办法解决思路解决方式 Vue.extend() API文章参考Vue.extend 看完这篇，你就学废了vue2.x挂载$mount、Vue.extend()函数的作用——由elementUI message方法联想Vue2.x 如何将vue文件编写的组件变为注册到全局组件？Vue.extend()问题描述在工作中使用的是Vue 脚手架搭建的，现在需要在地图上弹出一个pop 弹窗，问题是这个弹窗里面的内容全部要自己通过html写出来，因此官方给出的代码是自己写一

文章目录文章参考问题描述vue-loader如何处理 `Scoped CSS` ?父组件的样式渗透到子组件中的办法?>>>使用 /deep/::v-deep结论综合案例文章参考深度作用选择器 v-deep问题描述工作中需要开发一个 个性化的 二级联动表单，而且是需要根据用户输入自动提示的因此，考虑到了公司的组件 组件（根据用户输入异步查询下拉提示）由于 内部封装了 组件，因此需要设置Input组件的样式期望：scoped 样式中的一个选择器能够作用得“更深”，例如

文章目录参考知识点定时器清除案例mounted 和 beforeDestroy 生命周期函数配套使用mounted中处理所有（hook:beforeDestroy）外部监听生命周期函数应用场景说明案例说明参考实战技巧，Vue原来还可以这样写Vue 程序化的事件侦听器知识点组件的所有生命周期钩子都可以通过@hook:钩子函数名 来监听触发定时器清除案例mounted 和 beforeDestroy 生命周期函数配套使用export default { data: function ()

文章目录参考问题描述解决办法知识点自定义EventBus参考Vue $on问题描述用户信息列表是单独封装的一个组件，不依赖于其他模块和参数业务场景是预约可以创建多个case，每个case 可以选择相关人员，现在人员可以单独添加，并作用到当前选择人员组件中问题：如何修改一个组件的时候，去影响到其他组件呢？解决办法使用“观察者模式” / “订阅/发布”项目启动的时候创建一个EventBus，在整个工程中是唯一（single）人员组件创建的时候添向EventBus中注册一个事件监听，

文章目录文章参考问题描述过程分析ref 使用简单说明ref 和 v-for 配合使用案例说明文章参考Vue 官网访问子组件实例或子元素v-for中使用ref属性问题描述工作中的项目需要选择人员和机构，已经封装为组件，可以选择机构和根据机构找人业务中需要动态添加多个个预约记录，一条预约记录中需要选择人员和相关机构，有的是多选，有的是单选添加的时候组件没有数据，可以用户选择编辑修改的时候，后台返回数据，组件要使用v-for循环，组件内部的值使用$refs去寻找，然后赋值给相关组件过程分

文章参考input el-autocomplete问题描述工作中，遇到一个表单输入的问题，用户要输入公司名称，因此就需要从后台获取关联信息，由于公司信息很多，后台也没有办法完全穷尽，因此返回的提示信息也不全，综合考虑，该字段的最终录入方式 —— 后台提醒 + 用户自己输入思考过程说明第一种方案：如果是要根据用户输入关键字搜索信息，选择用户信息，最常用的就属于 select filter 组件，问题是改组件无法获取用户输入的值，一旦失焦，就会清空用户输入的值第二种方案：依然是使用

参考vue2.x挂载$mount函数的作用（有elementUI message联想）—— 优化API，可以使用代理问题描述？工作中页面开发已经完成，由于UCD页面样式调整，就需要很多页面统一样式修改，因此就就添加一个UI组件来统一调整页面的布局和样式。习惯性的使用vue文件编写了一个组件，如果将这个UI组件添加到每个页面组件中，这要修改很多地方，而且每个页面需要单独引入组件，因此就考虑到使用全局组件。例子说明创建CreateWorkerContainer.vue组件，代码如下：&

文章目录快速体验history 对象history的APIhistory属性`HTML5为history对象添加了两个新方法`history.pushState()参数案例步骤说明`不允许输入跨域网址`history.replaceState()history.replaceState() 与pushState()功能类似，除了这点:应用场景案例 (history.replaceState() 与pushState())快速体验在控制台中输入如下代码，回车history.pushState({name

文章目录问题描述解决思路在匹配的URL组件中处理逻辑在App.vue 中监听路由的变化问题描述在工作中遇到一个需求：App.vue 有个左侧菜单组件和右侧路由组件，现在需要根据不同的URL，决定是否显示左侧菜单解决思路在匹配的URL组件中处理逻辑解决办法：在匹配的组件中，mounted方法里通过 document.querySelect 方式查找到对应的节点，然后根据业务场景决定显示或者影藏左侧菜单问题：由于布局组件采用inject 和 provide 方式，导致每次页面切换，又会重新计算是

文章目录参考问题描述官方API 解释后台返回是路由配置JSON字符串，无法直接向默认配置使用？vue-router里提供了动态加载组件根据后台返回的路由配置信息动态加载组件参考Vue关于动态添加路由的一个坑，动态添加子路由router.addRoutes问题描述这两天在看“若依系统”的前端页面，重点是tab选项卡发现在他的路由配置中没有 /system/* 的配置，但是到system模块下面却能够正常显示经过两天的研读他的代码，反复查找资料，发现关键点是 router.addRoutes

参考Vue render 函数介绍问题描述用户在后台界面长期不操作的时候，导致token过期，因此需要重新登录用户重新输入账号和密码，需要重定向到之前的界面中重定向组件使用说明配置路由// 公共路由export const constantRoutes = [ { path: '/redirect', component: Layout, hidden: true, children: [ { path: '/red

https://javascript.ruanyifeng.com/dom/node.htmldocument.createDocumentFragment()keep-alive虚拟DOM回流和重绘文章参考document.createDocumentFragment()详解回流和重绘及优化问题描述昨天同事培训Vue问了一个“回流”和“重绘”的问题，自己回答的是数据量过大导致浏览器渲染慢和卡顿的问题，Vue解决办法是使用虚拟DOM，缓存DOM组件，应该是没有给出准确答案，会后自己深入

Vue2.x 组件递归（tree展示）参考问题描述最近要做一个通信面板，后台返回一个数组，标明了ID和PID的字段根据后台返回的数据需要转为一个机构用户信息树解决思路将后台返回的数组转换为一个上下层级关系的JSON对象根据JSON对象递归生成一个Tree组件将数组转为JSON对象<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta na

文章目录文章参考问题描述vm.$mount 官方文档介绍参数：用法：示例：elementUI 提供方法的源代码在elementUI中的说明文章参考vm.$mount( [elementOrSelector] )问题描述在使用elementUI的时候，发现了 this.$message('这是一条消息提示'); 这个函数，觉得使用非常方法，不需要引用组件，直接调用方法自己琢磨了一下，如果针对提示或者一些简单的UI界面，如果使用方法调用，大大提高使用效率，于是查看了源代码原来本质还是使用了vu

文章目录文章参考问题描述官方案例问题描述说明？解决思路如何理解 provide 和 inject使用场景使用方式例子文章参考vue中provide和inject使用Vue官网-依赖注入Vue 依赖注入 - Provide/Inject问题描述在工作中，发现 一个组件中添加一个添加搜索按钮的属性，就会影响到另外一个搜索的组件，这两个组件同时被一个“布局”组件包裹，不管我怎么控制相关的属性，都没有办法让搜索内容显示出来，最后查看了源码，了解到了使用的技术点 —— inject 和 provid

文章目录文章参考设计思想代码实现参考别人代码实现改成Vue的实现文章参考[CSS/JS]圆形不封闭进度条实现设计思想代码实现<!DOCTYPE html><html lang="en"> <head> <title>HTTP Status 404 – Not Found</title> <sty...

文章目录文章参考问题描述解决办法原理说明Vue 指令实现文章参考vue防重复点击(指令实现)问题描述在web页面跟后台交互时候，当页面响应不及时，用户会频繁点击，导致请求重复提交想找一个通用解决办法解决这种防重的问题按钮千差万别，有和有各种实现解决办法原理说明利用水印的原理，css的pointer-events属性来解决连续点击的问题Vue 指令实现定义指令Vu...

文章目录安装Vue-router 依赖包案例说明compiler（模板）模式和runtime模式 ？参考开发为了方便，使用 runtime-compiler 模式的方式？安装Vue-router 依赖包npm install vue-router案例说明配置路由// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)imp...

文章目录问题描述vue.config.js 如何配置路径别名使用自定义的新路径别名问题描述工作中，想在Vue 工程中启动webpack打包的时候，传一个配置参数给浏览器这样浏览器环境根据 配置的参数 就可以区分环境，例如： 数据是从“mock环境”还是“生产环境”中获取数据同事给我的建议是了解 webpack 是如何把jquery 引入到全局的，那么这个方法就类似jquery 的配置信...

文章目录问题描述文章参考vue-cli3 的三种模式development 模式production 模式test 模式总结案例描述package.json 文件.env 文件.env.development 文件main.js 启动文件打印结果vue-cli3 是如何实现环境变量和模式关联的最大的功臣是 `webpack.DefinePlugin`问题描述最近在学习mockjs，想根据本地模...

vue-cli2 中全局引入jquery1、使用npm install --save-dev jquery 安装jquery 相关的组件2、修改 webpack.base.conf.js 配置文件，内容如图3、直接在vue文件中使用$即可，$代表的是jquery对象在vue-cli3中引入全局jquery在配置文件 vue.config.js 文件中添加 con...

问题描述利用 Element-ui Upload 组件实现文件上传Upload 是嵌套在表格中的上传文件成功之后，需要更改表格的数据，界面发生变化但是上传文件成功之后，只返回了文件的唯一标志ID，为了用户体验，页面不能刷新解决思路将表格的rowData数据添加到成功回调函数中上传文件成功之后，将后台返回的数据和上传的文件信息组合，重新修改表格的数据，然后渲染到界面中由于 Up...

文章目录问题描述解决思路案例表述问题描述利用 Element-ui Upload 组件实现文件上传Upload 是嵌套在表格中的上传文件成功之后，需要更改表格的数据，界面发生变化但是上传文件成功之后，只返回了文件的唯一标志ID，为了用户体验，页面不能刷新解决思路将表格的rowData数据添加到成功回调函数中上传文件成功之后，将后台返回的数据和上传的文件信息组合，重新修改表格的...

文章目录问题描述解决思路技术难点解决步骤案例部分代码问题描述利用 element-ui Upload 组件 时间了文件上传有个一模一样的功能，但是功能描述不一样，即不同的位置若果自己再重新写一个上传组件的功能，觉得比价麻烦，而且功能一模一样，代码重复解决思路用户通过点击其他按钮触发的事件，来触发 Upload 组件的按钮实现的选择文件并上传的功能技术难点 是一个组件，查找到该节...

事件委托简单案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...

文章目录问题描述解决办法案例代码问题描述使用Vue脚手架， 联调高德地图显示window窗口的时候，demo是使用JS创建DOM对象，添加对应事件，实现关闭功能个人觉得使用JS创建DOM对象比较麻烦，还不如使用“拼接HTML”代码问题：“拼接的HTML代码”事件是在window上的，怎么触发window定义的事件，调用Vue内部的方法呢？解决办法进入组件的时候，把当前Vue对象...

文章目录文章参考问题来源问题难点描述解决办法：技术说明案例文章参考https://cn.vuejs.org/v2/api/#Vue-set问题来源在工作中遇到如下需求 —— 用户可以传递多个值，值的数量不确定，根据用户的自己的输入决定。问题难点描述由于VUE如果要实现双向绑定，一定要预先在data中定义好，然后对data中的属性的代理，实现双向绑定。然而在VUE对象生成之后再实现g...