JavaScript - 教程之家

48浏览

0评论

React鼠标多选功能的配置方法

一般列表都有选择功能，单选复选多选都很常见。在自定义循环的列表，图像中，实现鼠标单选，多选，反选功能。# React mousemultiples
# React 鼠标多选组件React 鼠标多选组件局限性...

2021-05-30

45浏览

0评论

react基础知识总结

前言
最近在准备面试。复习了一些react的知识点，特此总结。开始
React 生命周期
react 16以前的生命周期是这样的组件在首次渲染时会被实例化，然后调用实例上面的componentWil...

2021-05-30

52浏览

0评论

React tsx生成随机验证码

React tsx 生成随机验证码，供大家参考，具体内容如下最近开发React 使用tsx编写，没有找到什么好的随机生成验证码的插件，自己就手撸了一个，废话不多话，直接上代码。tsx文件如下：Reac...

2021-05-30

62浏览

0评论

详解React中的this指向

打算记流水账一般细数一下 React 中的 this 指向问题，具体流程按事件三要素：起因，经过，结果。哈哈哈哈哈！起因：
众所周知，React 的设计是响应式的，使用者无需操纵 DOM,操纵数据，页面...

2021-05-30

47浏览

0评论

React Hook用法示例详解（6个常见hook）

1、useState：让函数式组件拥有状态用法示例：// 计数器import { useState } from 'react'const Test = () => { const [count, setCount] = useState(0); return (...

2021-05-30

158浏览

0评论

详解React 代码共享最佳实践方式

任何一个项目发展到一定复杂性的时候，必然会面临逻辑复用的问题。在React中实现逻辑复用通常有以下几种方式：Mixin、高阶组件(HOC)、修饰器(decorator)、Render Props、Hook。...

2021-05-30

33浏览

0评论

React编程中需要注意的两个错误

前言在React编程中，我们习惯用useEffect、useState等Hook去进行开发，但是在开发过程中难免会遇到许多问题，前阵子，我在写代码的时候，踩过不少坑，这里先列举两个较为常见的，也希望...

2021-05-30

36浏览

0评论

如何深入理解React的ref 属性

概述首先，Refs 和 ref 是两个概念，Refs 是 React 提供的可用特定 API 创建的一个对象。该对象的结构如下：这个对象只有一个属性就是 current ，那么这个对象是用来干嘛的呢？Refs...

2021-05-30

60浏览

0评论

使用react-beautiful-dnd实现列表间拖拽踩坑

为什么选用react-beautiful-dnd
相比于react-dnd，react-beautiful-dnd更适用于列表之间拖拽的场景，支持移动端，且较为容易上手。
基本使用方法
基本概念 DragDropContext：构...

2021-05-30

85浏览

0评论

Vue CLI中模式与环境变量的深入详解

前言在实际项目的开发中，我们一般会经历项目的开发阶段、测试阶段和最终上线阶段，每一个阶段对于项目代码的要求可能都不尽相同，那么我们如何能够游刃有余的在不同阶段下使我们...

2021-05-30

105浏览

0评论

vue-cli4.5.x快速搭建项目

一、安装vue-clinpm i @vue/cli -g二、创建项目vue-cli会创建一个完整的项目文件夹,内部包含src等,我们仅需要cd进打算放置这个项目文件的文件夹内执行如下代码即可;1.生成...

2021-05-30

85浏览

0评论

Vue+Element UI实现概要小弹窗的全过程

场景：一个巡检单据有n个巡检明细，一个巡检明细有n个巡检项目。实现效果：当鼠标移到明细行的概要图标时显示当前行的巡检项目卡片弹窗，移出弹窗时关闭弹窗巡检单据详情
鼠标移到...

2021-05-30

103浏览

0评论

javascript实现数组最大值和最小值的6种方法

给定一个数组[1,8,5,4,3,9,2],编写一个算法，得到数组的最大值 9，和最小值 1。1、通过prototype属性扩展min()函数和max()函数
算法1的思路是在自定义min()和max()函数中，通过循...

2021-05-30

188浏览

0评论

Vue必学知识点之forEach()的使用

前言在前端开发中，经常会遇到一些通过遍历循环来获取想要的内容的情形，而且这种情形在开发中无所不在，那么本篇博文就来分享一个比较常用又经典的知识点：forEach() 的使用。forE...

2021-05-30

134浏览

0评论

v-html渲染组件问题

由于前面对html进行过解析,今天想用vue拖拽，实现一手类似快站那种自动生成代码，结果就遇到了拖拽组件过去怎么无法解析的问题，因为vue的v-html为了防止xss攻击只能解析html思路...

2021-05-30

158浏览

0评论

使用react-virtualized实现图片动态高度长列表的问题

虚拟列表是一种根据滚动容器元素的可视区域来渲染长列表数据中某一个部分数据的技术。虚拟列表是对长列表场景一种常见的优化，毕竟很少有人在列表中渲染上百个子元素，只需要在...

2021-05-28

83浏览

0评论

React Native项目框架搭建的一些心得体会

React Native 是Facebook于2015年4月开源的跨平台移动应用开发框架, 短短的一两年的发展就已经有很多家公司支持并采用此框架来搭建公司的移动端的应用,
React Native使你能...

2021-05-28

75浏览

0评论

JavaScript中如何更好地使用数组

本文短小精悍，我保证。在过去的数个月里，我注意到在我审阅的 pull request 中有四个（关于数组使用的）错误经常出现。同时，我自己也会犯这些错误，因此有了这篇文章。让我们一起学习...

2021-05-27

74浏览

0评论

详解Angular DOM的更新机制

由模型变化触发的 DOM 更新是所有前端框架的重要功能（注：即保持 model 和 view 的同步），当然 Angular 也不例外。定义一个如下模板表达式：<span>Hello {{name}}</span>或者类似下...

2021-05-27

61浏览

0评论

一起了解Nodejs和命令行程序

源起植根于Unix系统环境下的程序，很多都把贯彻Unix系统设计的哲学作为一种追求。Unix系统管道机制的发明者Douglas McIlroy把Unix哲学总结为三点：专注做一件事，并做到极致。 ...

2021-05-27

115浏览

0评论

10个让你效率更高的Math对象方法，快来收藏吧！

JavaScript中的math 对让我们能够对执行一些数学操作。它具有数学常数和函数的属性和方法。在今天的文章中将介绍 Math对象的一些有用方法。1. Math.min()Math.min()是 JS...

2021-05-27

143浏览

0评论

vue实现轮播图帧率播放

本文实例为大家分享了vue实现轮播图帧率播放的具体代码，供大家参考，具体内容如下需求传入一个数组，数组中放的是目录名称，通过本目录名称，读取文件目录下的所有图片，并循环播放，形...

2021-05-27

77浏览

0评论

vue 中this.$set 动态绑定数据的案例讲解

感觉网上对this.$set的讲解乱糟糟的，我来总结一下对它单个数据、对象、数组、json数据的绑定.话不多说直接上代码：<template> <div>  <button @click...

2021-05-27

147浏览

0评论

Vue中的nextTick作用和几个简单的使用场景

目的
理解下 nextTick 的作用和几个简单的使用场景正文
起什么作用？
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。我想各位...

2021-05-27

304浏览

0评论

Element-ui upload上传文件限制的解决方法

问题在accept中添加上传文件的类型只能起到“表面”作用，选择“所有文件”之后，还是可以上传任何类型的文件，根本起不到限制作用。解决办法
在before-upload（上传文件之前的钩子...

2021-05-27

81浏览

0评论

vue 计算属性和侦听器的使用小结

1. 计算属性和侦听器
1.1 计算属性<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></sc...

2021-05-27

88浏览

0评论

如何在 Vue 表单中处理图片

问题：我在 Vue 中有一个 form 表单，用于上传博客帖子，它有标题、正文、描述、片段和图片等范围。所有的一切都是必需的。我在 Express 中设置了一个 API 来处理这个问题。我在...

2021-05-27

97浏览

0评论

Vue 3自定义指令开发的相关总结

什么是指令（directive）
在Angular和Vue中都有Directive的概念，我们通常讲Directive 翻译为“指令”。在计算机技术中，指令是由指令集架构定义的单个的CPU操作。在更广泛的意义上...

2021-05-27

71浏览

0评论

vue keep-alive的简单总结

一、作用
　　主要用于保留组件状态或避免重新渲染。二、用法
　　<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。　　<keep-alive> 是一个抽象组件：它...

2021-05-27

192浏览

0评论

Vue使用Ref跨层级获取组件的步骤

Vue使用Ref跨层级获取组件实例
示例介绍
在开发过程中，我们难免会使用到跨层级的ref实例获取，大部分情况下，我们都可以通过组件自身的parent或者children去找到需要的实例。但...

2021-05-27

100浏览

0评论

Vue实现摇一摇功能(兼容ios13.3以上)

最近做了个摇一摇类似的功能，使用的是shake.js，但在ios13.3之前的版本中可以触发摇一摇，之后的版本需要兼容，需要制作一个让用户能手动点击的弹框，才能使用户授权动作与方向的权...

2021-05-27

90浏览

0评论

Vue 事件的$event参数=事件的值案例

template<el-table :data="dataList"> <el-table-column label="id" prop="id"></el-table-column> <el-table-column label="name" prop="name"> <template v-slot="props"...

2021-05-27

67浏览

0评论

Vue看了就会的8个小技巧

1. 始终在 `v-for` 中使用 `:key`在需要操纵数据时，将key属性与v-for指令一起使用可以让程序保持恒定且可预测是很有必要的。这样Vue就可以跟踪组件状态，并对不同的元素有一个...

2021-05-27

240浏览

0评论

element-ui 弹窗组件封装的步骤

封装el-dialog为一个组件
我们在使用element-ui的时候，如果一个弹窗中的内容很多，那么我们经常会把这个弹窗封装成一个组件，如下：<template> <el...

2021-05-27

92浏览

0评论

使用vue3重构拼图游戏的实现示例

前言
花了两天时间，重构了项目中的一个拼图小游戏（又名数字华容道），为了方便使用抽离成了独立组件，效果如下：线上体验
源码地址在文章最后哦!
主要重构点
原有拼图游戏是通过开源...

2021-05-27

93浏览

0评论

vue.js实现点击图标放大离开时缩小的代码

上篇文章给大家介绍了vue实现裁切图片同时实现放大、缩小、旋转功能，今天给大家介绍vue.js实现点击图标放大离开缩小功能，具体代码如下所示：@-webkit-keyframes pulse1 { from...

2021-05-27

132浏览

0评论

vue穿梭框实现上下移动

本文实例为大家分享了vue穿梭框实现上下移动的具体代码，供大家参考，具体内容如下使用elementUI的树形组件 tree组件功能需求：1、左侧的子节点移动到右侧的表格中
2、右侧选中的...

2021-05-27

85浏览

0评论

如何在vue 中使用柱状图并自修改配置

1.在html文件导入echart  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>2.在main.js上挂载echarts对象Vu...

2021-05-27

215浏览

0评论

Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤

实现效果可用插件介绍
Mozilla 提供了 PDF.js 和pdfjs-dist ，两者的区别如下： PDF.js ，一个完整的 PDF 查看器，可以直接使用其提供的 viewer.html 查看 PDF 内容，包含完整样式和...

2021-05-27

120浏览

0评论

详解Vue3.0 + TypeScript + Vite初体验

项目创建npm:$ npm init vite-app <project-name>$ cd <project-name>$ npm install$ npm run devor yarn:$ yarn create vite-app <project-name>$ cd <project-name>$ yar...

2021-05-27

102浏览

0评论

vue登录页实现使用cookie记住7天密码功能的方法

问题描述项目的登录页中，会有要求记住7天密码的功能，本篇文章记录一下写法，主要是使用cookie，注释我写的很详细了，大家可以看一下我写的注释的步骤，还是比较详细的。亲测有效html...

2021-05-27

93浏览

0评论

关于element的表单组件整理笔记

element表单及代码的展示详细可以看element表单官方网址结构、功能分析通过介绍以及源码可以发现，表单是具有收集、校验、提交数据三个功能的。他的基本结构如下：<el-form :mo...

2021-05-27

97浏览

0评论

如何封装Vue Element的table表格组件

在封装Vue组件时，我依旧会交叉使用函数式组件的方式来实现。关于函数式组件，我们可以把它想像成组件里的一个函数，入参是渲染上下文(render context)，返回值是渲染好的HTML(VNod...

2021-05-27

307浏览

0评论

vue3.0 自适应不同分辨率电脑的操作

首先我们需要要安装一些依赖npm i lib-flexible-computer -S //根节点会根据页面视口变化而变化font-size大小npm i px2rem-loader -D//自动将px转换为remnpm i postcss-px2...

2021-05-27

128浏览

0评论

Vue中使用wangeditor富文本编辑的问题

wangEditor是基于javascript和css开发的 Web富文本编辑器，轻量、简洁、易用、开源免费。
在我们实际项目上还是比较频繁应用到的，下面出个案例供大家参考学习…wangEditor文...

2021-05-27

76浏览

0评论

Vue包大小优化的实现(从1.72M到94K)

一、背景
最近做了一个网站，uidea，是用来辅助独立开发者做一些 UI 设计的，当时只管开发，等部署完以后，发现访问速度堪忧
毕竟是个小水管服务器，相比提高带宽，还是先看看代码上能不...

2021-05-27

64浏览

0评论

vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件

需求背景简介
最近打算使用vue并结合前端工程化体系重构之前的一个Demo，其中有一个功能是使用bootstrap的datepicker插件选择查询日期。在网上找到了一个基于vue扩展的datepi...

2021-05-27

53浏览

0评论

详解Vite的新体验

什么是Vite?(是前端新玩具)Vite是一个web开发构建工具，它通过本机 ES 模块导入在开发过程中更新代码，达到快速更新的目的。特点超快的冷服务器启动即时的模块更新真...

2021-05-27

50浏览

0评论

Vue实现圆环进度条的示例

数据展示，一直是各行各业乐此不疲的需求，具体到前端开发行业，则是各种各种图表数据展示，各种表格数据展示，烦不胜烦（繁不胜繁）！
前几天刚做了折线图、柱状图、饼状图之类的图表数据...

2021-05-27

41浏览

0评论

vue 根据选择的月份动态展示日期对应的星期几

我等卑微的码农，依旧还得唱着“你我皆凡人，生在人世间，终日奔波苦，一刻不得闲，既然不是仙，难免有杂念，烦恼放两旁，工资摆中间，多少男子汉，秃顶又肥胖，加班的日夜，没有买保险”。虽一直反...

2021-05-27

热门文章