React 上下文
在React中上下文是一种通信方案。 上下文的特点 在组件树中，是一种自上而下的单向数据流通信方案，数据只能从父组件注入，在子组件中访问。 组件关系只要满足“父组件-后代组件”这种关系时，都可以使用上下文通信。 在父组件中provide提供数据，在后代组件中注入并使用，这种通信不具有响应式，有点像v ...
vue3总结-组合式API
1.setup setup的两个传值 : 父传子 , 子传父 , 父后代 2.ref函数 isRef: 检查一个值是否为一个 ref 对象 vue2和vue3响应式的原理(数据拦截) 3.reactive函数 isReactive: 检查一个对象是否是由 reactive 创建的响应式代理 ref与 ...
前端动画实现以及原理浅析
背景 如今的前端是一个涉猎领域很广的职业。作为一名前端，我们不仅要开发管理系统、数据中台、还要应对年报开发、节日活动等场景。不仅要会增删改查，编写表单，还要具备开发动画、H5 游戏等能力。能做出很 Cool 的动画效果，也是一种前端特有的成就感。所以，我们从动画的实现方法入手，了解浏览器的渲染，以及 ...
DOM_常用事件
常用事件 onload <script> window.onload = function () { ele = document.getElementById("i") console.log(ele.innerHTML); } </script> </head> <body> <div clas ...
前端处理二进制流数据--转下载
前端处理二进制流数据--转下载 导言 因业务需要，实现分类导出功能。筛选导出一定条件的数据，后端处理成Excle数据流，前端实现导出下载。 实现 方法一 将条件格式化成key=value&...文本格式，接到<a>标签url接口之后，每当点击导出按钮的时候，创建一个<a>标签，写入接口地址+ ...
Vue 内置指令以及自定义指令
1. 内置指令 v-show : 说明：根据条件展示元素,true展示元素，false隐藏元素 <template> <div> <button v-show="isShow"></button> </div> </template> <script> export default { name: ...
使用 Vite 插件开发构建 Tampermonkey 用户脚本
起因 一直以来，我都是直接在浏览器 Tampermonkey 扩展页面直接新建用户脚本来开发的： 对于一些简单的脚本，这没有什么问题，即改即看。但当代码多了以后问题就来了，自带编辑器开发体验确实不太舒服，没有格式化，没有代码补全，无法模块化编写代码等等，这时候我就想寻找一个打包方案，让我们可以在自己 ...
纯 CSS3 卡通小火车行驶动画
自从CSS3流行以来，基于纯CSS3的动画就层出不穷，有纯CSS3的人物动画、纯CSS3按钮动画等。这次，我们给大家分享一个很不错的CSS3卡通火车沿轨道行驶动画，一辆卡通样式的火车缓缓驰过，特别是火车头的动画设计，非常可爱和逼真。 效果预览 代码实现 HTML代码 <div class="cent ...
elementui中表格多选+分页，保存所有选中数据
element UI中table表格在选中数据后点击分页，再选中数据，回到第一页后，原来选中的数据已经不再是勾选状态了，现在要怎样记住所有分页中的勾选状态呢？我这里有比较简便的方法。不需要缓存数据等复杂的方式。 1、首先在table标签上定义row-key和ref标志名称。具体row-key等功效， ...
Amazing！巧用 CSS 视差实现酷炫交互动效
本文将介绍利用 CSS 实现滚动视差效果的一个小技巧，并且，利用这个技巧来制作一些有意思的交互特效。 关于使用 CSS 实现滚动视差效果，在之前有一篇文章详细描述过具体方案 - CSS 实现视差效果，感兴趣的同学可以先看看这篇文章。 这里，会运用上这样一种纯 CSS 的视差技巧： 使用 transf ...
Vue 组件实战
axios实现数据请求、计算属性、监听属性、局部组件、全局组件、组件通信之父传子、组件通信之子传父、 ref属性（组件间通信）、动态组件和keep-alive ...
Vue生产环境调试的方法
vue 生产环境默认是无法启用vue devtools的，如果生产应用出了问题，就很难解决。用本文提供的方法就可以实现线上debug vue，也不需要在浏览器上打断点。 原理 先说下vue如何判断devtools是否可用的。 vue devtools扩展组件会在window全局注入__VUE_DEV ...