JavaScript - 教程之家

80浏览

0评论

Vue实现聊天界面

本文实例为大家分享了Vue实现聊天界面展示的具体代码，供大家参考，具体内容如下1.功能需求根据索引选择跟不同的人进行聊天2.代码展示mock.js：import Mock from 'mockjs'Mock.mo...

2021-08-10

343浏览

0评论

React + Threejs + Swiper 实现全景图效果的完整代码

  咱先看看全景图实现效果：展示地址
  截图：  体验了一下是不是感觉周围环境转了一圈，感觉世界是圆的？😁
  没错！恭喜...

2021-08-10

75浏览

0评论

Vue+express+Socket实现聊天功能

本文实例为大家分享了Vue+express+Socket实现聊天功能的具体代码，供大家参考，具体内容如下实现聊天功能具体功能只是为了实现功能，不对界面进行美化1、输入消息点击发送所有用...

2021-08-10

55浏览

0评论

浅谈React Component生命周期函数

React组件有哪些生命周期函数？类组件才有的生命周期函数，包括ES6语法的class以及create-react-class模块：分为几个阶段：挂载，更新，卸载，错误处理；1，挂载：constructor(常用)、static ge...

2021-08-10

54浏览

0评论

原生JavaScript实现简单五子棋游戏

本文实例为大家分享了JavaScript实现简单五子棋游戏的具体代码，供大家参考，具体内容如下HTML页面注释都很明确了，大家好好学习。<!DOCTYPE html><html lang="en"> <head> <met...

2021-08-10

85浏览

0评论

vue+rem自定义轮播图效果

使用vue+rem自定义轮播图的实现，供大家参考，具体内容如下单位使用rem进行页面布局，在动态计算轮播图整体宽度时，需要把px转换成rem，挺麻烦的。效果如下：如果当前图片不是第一张和...

2021-08-10

65浏览

0评论

react纯函数组件setState更新页面不刷新的解决

目录问题描述：
原因分析：
解决方案：
补：react中，hooks钩子时useState更新不渲染组件的问题问题描述：
const [textList, setTextList] = useState(原数组);setTextList(新数组);当...

2021-08-10

77浏览

0评论

js将多维数组转为一维数组后去重排序

目录先说一下多维数组拍平方法一： flat()
方法二：用空字符串拼接再用split()分割一下
方法三： toString()
方法四： join()
方法五：递归调用
方法六：使用reduce
数组去重方法一：创...

2021-08-10

64浏览

0评论

React传递参数的几种方式

目录父子组件之间传递参数路由传参状态提升context引入redux父子组件之间传递参数父组件往子组件传值，直接用this.props就可以实现在父组件中，给需要传递数据的子组件添加一...

2021-08-10

78浏览

0评论

vue如何根据url下载非同源文件

一般情况下，我们根据url下载文件时可以有以下两种方案：
1. window.open(url)
2. <a :href="url" rel="external nofollow" download="文件名称"/>
但是我们在开发过程中，有时会...

2021-08-10

75浏览

0评论

JavaScript中call、apply、bind实现原理详解

目录前言call
用法
实现
简单的实现版本：
升级版：
apply
用法
实现
bind
用法
基本版：
升级版：
总结前言众所周知 call、apply、bind 的作用都是‘改变'作用域，但是网上对这这‘...

2021-08-10

57浏览

0评论

Vue指令工作原理实现方法

Vue简介
现在的大前端时代，是一个动荡纷争的时代，江湖中已经分成了很多门派，主要以Vue，React还有Angular为首，形成前端框架三足鼎立的局势。Vue在前端框架中的地位就像曾经的jQue...

2021-08-10

38浏览

0评论

vue实现列表无缝滚动

本文实例为大家分享了vue实现列表无缝滚动的具体代码，供大家参考，具体内容如下HTML部分代码<template> <div id="box" class="wrapper"> <div class="contain" id="con1"...

2021-08-10

106浏览

0评论

React列表栏及购物车组件使用详解

本文实例为大家分享了React列表栏及购物车组件的具体代码，供大家参考，具体内容如下一、组件介绍商家详细界面（StoreDetail组件）：import React from 'react';import axios from 'a...

2021-08-10

52浏览

0评论

javascript拖曳互换div的位置实现示例

1 实现原理利用dom元素的dragstart/ondragover/ondrop事件完成，在拖曳开始的时候获取到拖曳元素，然后允许拖动，最后鼠标抬起后放到新的位置；这里用到了event.preventDefault()方...

2021-08-10

56浏览

0评论

Vue+ssh框架实现在线聊天

本文实例为大家分享了Vue+ssh框架实现在线聊天的具体代码，供大家参考，具体内容如下效果图核心部分websocket编程向后台发送消息
<template><el-container> <el-header > </e...

2021-08-10

69浏览

0评论

js中不常见的运算符与操作符总结

javaScript常用运算符和操作符总结类别操作符算术操...

2021-08-10

62浏览

0评论

Vue 大文件上传和断点续传的实现

目录文件上传的 2 套方案
基于文件流（form-data）
客户端把文件转换为 base64
大文件上传
获取到文件对象并转成 ArrayBuffer 对象
创建切片
发送请求
所有切片发送成功后
断点...

2021-08-10

81浏览

0评论

vue移动端判断手指在屏幕滑动方向

vue移动端判断手指在屏幕滑动方向，供大家参考，具体内容如下可以据此实现手指滑屏切换tab的功能，例如京东的订单页，这几个tab切换就可以利用这个实现页面<div @touchstart="...

2021-08-10

73浏览

0评论

vue车牌输入组件使用方法详解

一个简单的车牌输入组件（vue），供大家参考，具体内容如下效果图：vue代码：<template> <div class="enTer"> <div class="plateInput" id="plateInput"> <div class="i...

2021-08-10

80浏览

0评论

vue更多筛选项小组件使用详解

本文实例为大家分享了vue更多筛选项小组件的实现方法，供大家参考，具体内容如下效果：就是一个简单的小效果，当有很多筛选条件时，默认只展示几项，不会觉得很冗余，有需要可以点击展开，...

2021-08-10

60浏览

0评论

vue计时器的实现方法

本文实例为大家分享了vue实现计时器的具体代码，供大家参考，具体内容如下这里做的是点击按钮开始与结束倒计时的功能<div class="time" v-if="rptType">{{str}}</div><div clas...

2021-08-10

66浏览

0评论

JavaScript中的50+个实用工具函数小结

JavaScript可以做很多出色的事情，本篇文章给大家整理50+个实用工具函数，可以帮助你提高工作效率并可以帮助调试代码
1、isStatic: 检测数据是不是除了symbol外的原始数据。fun...

2021-08-10

76浏览

0评论

Vue.js框架实现购物车功能

本文实例为大家分享了Vue.js框架实现购物车的具体代码，供大家参考，具体内容如下<!DOCTYPE html><html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head>...

2021-08-10

97浏览

0评论

Vue实现tab导航栏并支持左右滑动功能

本文主要介绍：利用Vue实现tab导航栏，并且通过flex布局实现左右滑动，计算按钮的位置，当点击第一屏展示的最后一个且还有元素未展示时，自动滑动显示出未显示的元素。tab导航栏布局：<...

2021-08-10

70浏览

0评论

Node实现搜索框进行模糊查询

本文实例为大家分享了Node实现搜索框进行模糊查询的具体代码，供大家参考，具体内容如下一、需求点击导航栏中的搜索图，出现搜索框，从而进行文章的模糊查询二、建表1.blog表添加外...

2021-08-10

72浏览

0评论

vue3实现CSS无限无缝滚动效果

本文实例为大家分享了vue3实现CSS无限无缝滚动效果的具体代码，供大家参考，具体内容如下template双层div嵌套，进行隐藏滚动显示<div class="list-container"> <div class="marq...

2021-08-10

98浏览

0评论

vue3.0+vite2实现动态异步组件懒加载

目录创建一个vite项目
创建组件
创建一个vite项目
性能决定成败;vite确实快；
cmd 命令行(默认你已经安装了node & npm)，执行npm init @vitejs/app vue-study – --template vu...

2021-08-10

91浏览

0评论

如何在Vue 3中扩展Vue Router链接详解

前言<router-link> 标签是一个很好的工具，可以在你的Vue应用程序的不同页面之间进行导航，但当导航到一个外部链接时，它不是一个工具，为此，你应该使用一个普通的<a> 标签。也许这...

2021-08-10

67浏览

0评论

node+express实现分页效果

本文实例为大家分享了node+express实现分页效果展示的具体代码，供大家参考，具体内容如下效果如下1、 index.js在index.js //数据列表传前台+分页的实现router.get('/admin', f...

2021-08-10

82浏览

0评论

Vue局部组件数据共享Vue.observable()的使用

随着组件的细化，就会遇到多组件状态共享的情况， Vuex当然可以解决这类问题，不过就像 Vuex官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，今天我们介绍的是 vue...

2021-08-10

72浏览

0评论

vue.js根据图片url进行图片下载

最近在做一个前端vue.js对接的功能模块时，需要实现一个下载图片的功能，后台返回来的是一串图片url，试了很多种方法，发现点击下载时出来的效果，都是跳到一个新的图片网页，后来经过...

2021-08-10

67浏览

0评论

vue实现web在线聊天功能

本文实例为大家分享了vue实现web在线聊天的具体代码，供大家参考，具体内容如下最终实现的效果实现过程无限滚动窗体的实现之前已经介绍过，这里就不在赘述了，不清楚的可以通过文档...

2021-08-10

100浏览

0评论

微信小程序学习笔记之页面配置与路由方式

最近在学习回顾小程序的开发，将一些学习结果做个笔记。参考微信小程序官方文档：developers.weixin.qq.com/miniprogram…一、小程序配置
1、全局配置小程序根目录下的 app.jso...

2021-08-10

82浏览

0评论

vue中利用mqtt服务端实现即时通讯的步骤记录

MQTT协议
MQTT(Message Queuing Telemetry Transport，消息队列遥测传输)是IBM开发的一个即时通讯协议，有可能成为物联网的重要组成部分。该协议支持所有平台，几乎可以把所有联...

2021-08-10

61浏览

0评论

elementui的el-popover修改样式不生效的解决

在使用element-ui的时候，有一个常用的组件，那就是el-popover，但是element-ui官方文档中样式跟用法都比较局限，在使用时都需要改动样式项目中使用了el-popover，但是想修改一下样式...

2021-08-10

66浏览

0评论

Vue3中SetUp函数的参数props、context详解

1.setUp函数的第1个参数props
setup(props,context){}第一个参数props:props是一个对象，包含父组件传递给子组件的所有数据。在子组件中使用props进行接收。包含配置声明并传...

2021-08-10

87浏览

0评论

React 并发功能体验(前端的并发模式)

React 是一个开源 JavaScript 库，开发人员使用它来创建基于 Web 和移动的应用程序，并且支持构建交互式用户界面和 UI 组件。React 是由 Facebook 软件工程师 Jordan Walke 创...

2021-08-10

52浏览

0评论

Vue实现Google第三方登录的示例代码

目录一、开发者平台配置解决问题BUG
一、开发者平台配置1、进入开发者平台，首先前往Google API 控制台选择或者创建一个项目
谷歌开发者平台

一堆眼花缭乱的API让你无从选择...

2021-08-10

87浏览

0评论

微信小程序实现固定表头、列表格组件

目录需求：功能点效果图实现思路具体代码(react\taro3.0)
具体代码(小程序原生)
总结需求：微信小程序实现固定表头固定列表格组件（移动端做点小修改通用）功能点排序表格...

2021-08-10

73浏览

0评论

分析Vue指令实现原理

目录一、基本使用二、指令工作原理2.1、初始化2.2、模板编译2.3、生成渲染方法2.4、生成VNode2.5、生成真实DOM三、注意事项四、小结一、基本使用官网案例：<div id='app'> <...

2021-08-10

66浏览

0评论

axios的简单封装以及使用实例代码

前言最近在构建项目时，想到了请求的封装，之后就琢磨如何封装才好。虽然对各位大佬来说可能是个小事情，但对我来说也算是一个小小的挑战。在我设想中请求的一些基本配置与具体接...

2021-08-10

192浏览

0评论

swiper+echarts实现多个仪表盘左右滚动效果

本文实例为大家分享了swiper+echarts实现仪表盘左右滚动效果的具体代码，供大家参考，具体内容如下1、swiper的使用a.首先加载插件<!DOCTYPE html><html><head> ... <link...

2021-08-10

95浏览

0评论

JavaScript实现电商平台商品细节图

本文分享一个电商平台常见查看商品细节图案例，如某东网站手机类别中具体某一部手机详情页中，手机的细节图展示，左侧小图获得用户鼠标焦点即可在屏幕右侧展示出该图片区域的大图...

2021-08-10

68浏览

0评论

微信小程序在{{ }}中直接使用函数的方法示例

前言
在微信小程序开发中（原生wxml、wxcss），想直接在{{ }}调用方法处理数据，但是会报错。如：在项目中涉及到百分比的计算，js浮点数运算会出现精度问题，造成小数位数过多，因此想在模...

2021-08-10

75浏览

0评论

Vue+SpringBoot实现支付宝沙箱支付的示例代码

首先去下载支付宝沙箱的一系列东西，具体的配置什么的我就不说了，有很多博客都讲了，还有蚂蚁金服官方也说的很详细，我就直接说怎么样把后端的支付页面显示到Vue前端来：
在你配置好...

2021-08-10

56浏览

0评论

react中的DOM操作实现

目录前面的话
使用场景
ref
【HTML元素】【类组件】【函数式组件】【对父组件暴露DOM节点】非受控组件
【默认值】ReactDOM
【render()】【unmountComponentAtNode()】【fin...

2021-08-10

71浏览

0评论

如何让你的JavaScript函数更加优雅详解

目录对象参数使用解构
命名回调函数
让条件句具有描述性
用 Map 或 Object替换 switch 语句
使用 Object.assign 设置默认属性
删除重复代码，合并相似函数；删除弃用代码
提炼...

2021-08-10

80浏览

0评论

基于websocket实现简单聊天室对话

本文实例为大家分享了websocket实现简单聊天室对话的具体代码，供大家参考，具体内容如下首先搭建一个node的环境，在app.js中写入以下代码npm install socket.io-clientsocket是...

2021-08-10

106浏览

0评论

vue3中provide和inject的使用

1.provide 和 inject 的讲解provide和inject可以实现嵌套组件之间进行传递数据。
这两个函数都是在setup函数中使用的。
父级组件使用provide向下进行传递数据；
子级组件使用...

2021-08-10

热门文章