js默认文本框粘贴事件完美实现详解js默认文本框粘贴事件完美实现详解
目录前言先上代码代码分析 前言
本文实际是用js移动控制光标的位置!解决了网上没有可靠教程的现状
默认情况对一个文本框粘贴,应该会有这样的功能:
粘贴文本后,光标不会回到所有文本的最后位置,而是在粘贴的文本之后将选中的文字替换成粘贴的文本
但是由于需求,我们需要拦截粘贴的事件,对剪...[2023/1/28]
autojs模仿QQ长按弹窗菜单实现示例
目录分析弹框菜单需求分析代码分析RecyclerView基础代码长按事件环境
分析弹框菜单
圆角列表, 类似grid箭头位于文字中间上(下)方
需求分析
如果要写一个这样的教程, 我们需要做什么
写一个列表, 用来触发长按选项写一个弹窗菜单
代码分析
列表怎么写,
...[2023/1/28]
autojs模仿QQ长按弹窗菜单实现示例详解二
目录引言弹窗菜单箭头如何确认箭头方向?调整popwindow的位置调用方法如下绘制箭头修改颜色和圆角给弹框菜单添加点击事件弹框菜单点击事件引用弹框实例环境 引言
上一节讲了列表和长按事件
autojs模仿QQ长按弹窗菜单
弹窗菜单
由粗到细, 自顶向下的写代码
我们现在要修改...[2023/1/28]
Vue3跨域解决方案实例详解
vue项目配置代理
vue.config.js
const { defineConfig } = require(''@vue/cli-service'')
module.exports = defineConfig({
transpileDependencies: true,
...[2023/1/28]
Vue3父子通讯方式及Vue3插槽的使用方法详解
在Vue3中父子通讯方式
Vue3父传子(props)
父组件如下:
<template>
<div cla ="about">
<h1>This is an about page</h1>
<childre...[2023/1/28]
Vue3通过ref操作Dom元素及hooks的使用方法
Vue3 ref获取DOM元素
<div ref="divBox">Hello</div>
import {ref,onMounted} from ''vue''
setup() {
const divBox = ref(null);
o...[2023/1/28]
Vue3异步组件Suspense的使用方法详解
Suspense组件
官网中有提到他是属于实验性功能:<Suspense> 是一项实验性功能。它不一定会最终成为稳定功能,并且在稳定之前相关 API 也可能会发生变化。<Suspense> 是一个内置组件,用来在组件树中协调对异步依赖的处理。它让我们可...[2023/1/28]
Vue3+Vite项目使用mockjs随机模拟数据
在vite中使用mockjs进行模拟数据,需要借助新的依赖进行使用
一、安装mockjs
yarn add mockjs -S 或 npm i mockjs -D
二、安装vite-plugin-mock
npm i vite-plugin-mock -D
三、在src/mo...[2023/1/28]
Vue3+TS+Vant3+Pinia(H5端)配置教程详解
该模板将帮助您开始使用Vue 3、Vite3.0中的TypeScript以及Pinia、Vant3进行开发。该模板使用Vue3,请查看文档了解更多教程。
推荐的IDE设置
VS Code + Volar
键入支持。TS中的vue导入
因为TypeScript无法处理...[2023/1/28]
如何实现在react现有项目中嵌入Blazor?
如何实现在react现有项目中嵌入Blazor?
目前官方只提供了angular和react俩种示例所以本教程只将react教程
思路讲解:
首先在现有react项目中我们可能某些组件是在Blazor中完成,但是我们没办法找到怎么在react中轻量级使用blazor组件,可能会有人会使用if...[2023/1/20]
vue3源码分析reactivity实现原理
目录引言第一部分:简单版reactivity(1).实现reactive和effect(2).实现ref(3).实现computed第二部分:深入分析对于object、array的响应式代理(1).handlers中的getter(2).handlers中的setter(3).handlers的de...[2023/1/20]
Vue3源码分析reactivity实现方法示例
目录深入分析对于map、set、weakMap、weakSet的响应式拦截(1).mutableInstrumentations(2).shallowInstrumentations(3).readonlyInstrumentations(4).shallowReadonlyInstrumentat...[2023/1/20]
FastJson实现驼峰下划线相互转换方法详解FastJson实现驼峰下划线相互转换方法详解
目录PropertyNamingStrategy发挥作用的是translate方法指定反序列化格式智能匹配功能fastjson智能匹配处理过程关闭智能匹配的情况 PropertyNamingStrategy
有四种序列化方式。
CamelCase策略,Java对象属性:personId,序列...[2023/1/20]
Vue+echart 展示后端获取的数据
最近在合作做一个前后端分离项目时,为了测试我写的后端部分获取数据的效果,自己也学了一下 vue 的知识,在获取 json 信息这里也踩了很多坑。
这里列举下我返回的 json 部分信息:
{
"house_basic": [
{
"HOUSE_ID": "00001"...[2023/1/18]
图文详解Vue3没有代码提示问题的解决办法
在上一篇笔记中提到了Vue3+vite+Ts写代码过程中,出现的代码自动补全失效功能,今天来谈谈如何解决这个问题。
首先,我们已经很明确的就是安装了volar插件之后,HTML标签片段补全已经失效,即在template中书写HTML标签时,不会再有代码补全,即输入“div&rdqu...[2023/1/18]
vue elementui表格获取某行数据(slot-scope和selection-change方法使用)
效果图:
1.当写后台管理页面时,使用element ui里的table表格时,表格中有操作按钮,获取当前行的数据时,我们可以使用 slot-scope="scope"来获取。
<el-table-column label="操作" align="cent...[2023/1/18]
vue3 element-plus二次封装组件系列之伸缩菜单制作
目录1、效果 2、主要逻辑代码 1、效果
折叠效果--只剩图标
展开效果--有图标有文字
2、主要逻辑代码
home.vue--主页代码
<template>
<div cla ="common-layout">
...[2023/1/18]
JS技巧动手实现红包兔子雨效果示例详解
目录前言展示效果技术栈思考与实现红包下落效果生成红包雨打开红包效果兔子雨效果拓展设置中奖概率后记 前言
人生天地之间,若白驹过隙,忽然而已。不知不觉中,2022年已然逝去,2023年也过去了半个月了。看到「兔了个兔」这个活动几天了,不过这周比较忙,没时间参与。
心血来潮,捣鼓了一晚上,实...[2023/1/18]
React18系列commit从0实现源码解析
目录正文桥梁commit EffectcommitRoot执行commitMutationEffects执行commitMutationEffectsOnFibersgetHostParent执行appendPlacementNodeIntoContainer执行例子: 正文
本系列是讲述从...[2023/1/18]
使用webpack配置react-hot-loader热加载局部更新
目录webpack配置react-hot-loader热加载局部更新步骤1步骤2步骤3步骤4步骤5步骤6react-hot-loader热加载不生效的可能问题总结 webpack配置react-hot-loader热加载局部更新
有人会问 webpack-dev-server 已经是热加载了...[2023/1/18]
vue pdf二次封装解决无法显示中文问题方法详解
目录前言完整代码解决无法显示中文问题 前言
vue-pdf 可以实现PDF文件在线预览并且支持分页。安装方式:npm install --save vue-pdf
完整代码
<template>
<el-dialog :visible="visibl...[2023/1/18]
react的ui库antd中form表单使用SelectTree反显问题及解决
目录react ui库antd中form表单使用SelectTree反显问题最近遇到这个问题,后来找到原因react antd form表单回显踩坑需求如下总结 react ui库antd中form表单使用SelectTree反显问题
最近遇到这个问题,后来找到原因
1.formItem 需...[2023/1/18]
Vue 快速入门(一)
1、介绍
Vue(读音/vju/,类似view),是中国的大神尤雨溪开发的,为数不多的国人开发的世界顶级开源软件。是一套用于构建用户界面的渐进式框架,Vue 被设计为可以自底向上逐层应用。MVVM响应式编程模型,避免直接操作DOM,降低DOM操作的复杂性。
Vue官网地...[2023/1/16]
CSS 奇思妙想之酷炫倒影
在 CSS 中,倒影是一种比较常见的效果。今天,我们就将尝试,使用 CSS 完成各类不同的倒影效果,话不多说,直接进入主题。
实现倒影的两种方式
首先,快速过一下在 CSS 中,实现倒影的 2 种方式。
使用 -webkit-box-reflect
正常而言,-webkit-box-refl...[2023/1/16]
[硬核] Bootstrap Blazor Table 综合演示例子[硬核] Bootstrap Blazor Table 综合演示例子
知识点:
1.导入导出
2.分页功能
3.增删改查
4.批量删除
5.批量编辑(审核)
6.列排序与列搜索
7.顶部搜索实现所有列搜索
8.高级搜索实现多条件搜索
9.顶部与刷新与视图列
10.实现文本类型明细行
11.列的统计
12.隐藏列,时间日期列格式化
13.新窗...[2023/1/16]
vue3中的伸缩菜单组件
目录vue3伸缩菜单组件效果图总结 vue3伸缩菜单组件
最近一直在学习分装组件,学到了一个伸缩菜单栏组件,浅浅的记录一下,想要封装菜单的,代码可以直接拿去用,稍作修改即可!
效果图
1.在components下面创建一个container的文件,在container文件下面创建一...[2023/1/16]
vue实现图片预览放大以及缩小问题
目录vue图片预览放大以及缩小关于 viewerjs的使用vue实现图片预览(放大缩小拖拽)纯手写滚轮放大缩小图片图片拖拽整体实现的功能总结 vue图片预览放大以及缩小
1.在vue的环境下实现图片放大缩小,可以使用viewerjs
效果图:
关于 viewer...[2023/1/16]
Vue按回车键进行搜索的实现方式
目录Vue按回车键进行搜索第一种方法第二种方法Vue使用回车键失效的解决Vue回车键事件栗子回车失效原因解决方法总结 Vue按回车键进行搜索
需求:
为了用户方便进行搜索数据的时候不想点击搜索按钮,想要在input输入框内输入完成之后直接按回车键进行搜索
第一种方法
在input标签...[2023/1/16]
基于React.js实现简单的文字跑马灯效果
刚好手上有一个要实现文字跑马灯的react项目,然后ant-design上面没有这个组件,于是只能自己手撸一个。
我想到的最简单的方法,就是定位啦,定时移动这个文字块不就跑起来了。
需要注意的是,要判断文字的宽度,当文字超出屏幕的宽度的时候再动起来,我用的是hook的写法,要在销毁页面的时...[2023/1/16]
Vue组件基础操作介绍Vue组件基础操作介绍
目录一、组件二、组件的创建三、组件中的data四、组件中的methods 一、组件
组件是vue的重要的特征之一,可以扩展html的功能,也可以封装代码实现重复使用。
二、组件的创建
1. 非脚手架方式下创建
? 第一步:使用Vue.extend创建组件
? 第二步:使用Vue....[2023/1/16]
JavaScript Promise与async/await作用详细讲解
目录一、promise与async和await有什么用二、Promise的作用三、async和await的使用四、promise与async、await的区别 一、promise与async和await有什么用
都是为了解决异步回调产生的。
Promise的字面意思是“承诺&rd...[2023/1/16]
ES6 中 Promise对象使用学习ES6 中 Promise对象使用学习
转载请注明出处:
Promise 对象是 JavaScript 的异步操作解决方案,为异步操作提供统一接口。它起到代理作用(proxy),充当异步操作与回调函数之间的中介,使得异步操作具备同步操作的接口。Promise 可以让异步操作写起来,就像在写同步操作的流程,而不必一层层地...[2023/1/11]
Vue使用Vuex一步步封装并使用store全过程Vue使用Vuex一步步封装并使用store全过程
目录一、安装Vuex依赖二、一步步封装store1. main.js中全局引入store仓库(下一步创建)2. this.$store3. this.$store.state4. this.$store.getters(this. $store.state的升级)5. this.$store.com...[2023/1/11]
JS前端性能指标定位FMP使用详解
目录什么是FMP?权重定位权重计算节点标记计算权重值第一步:简单粗暴,按大小计算第二步:根据权重值推导主角元素第三步:根据元素类型取时间回归验证 什么是FMP?
可能大家对「白屏时间」这个名词并不陌生,他是「刀耕火种」年代,我们收集的页面性能指标之一,随着前端工程的复杂化,白屏时间已经没有什么实...[2023/1/11]
在使用vuex的时候出现commit未定义错误的解决
目录使用vuex的时候出现commit未定义错误出现的原因错误展现过程vuex模块化 commit()时报错 unknown mutation type:xxx废话不多说直接上问题总结 使用vuex的时候出现commit未定义错误
出现的原因
书写错误当然,这个错误不是你单词书写错误只要的原因...[2023/1/11]
NodeJS Express使用ORM模型访问关系型数据库流程详解
目录一、ORM模型二、在Node中ORM的实现 一、ORM模型
设计思想,主要目的是简化计算机程序访问数据库
1、ORM:对象关系模型(对象关系映射) Object Releastion Model,将程序中的对象和数据库中关系(表格)进行映射。可以使开发者在程序中方便的对数据库进行操作(用...[2023/1/11]
Vue?+?Element?自定义上传封面组件功能
前一段时间做项目,频繁使用到上传图片组件,而且只上传一个封面,于是想着自定义一个图片封面上传组件。先来看一下效果:
第一张图片是上传之前,第二张图片是上传成功后,第3张图片是鼠标放上去之后的效果!首先整理需求,图片上传我们使用照片墙的方式,只能上传一张图片,图片上传成功后不能...[2023/1/11]
React Fiber原理深入分析
目录为什么需要 fiberfiber 之前fiber 之后fiber 节点结构dom 相关属性tagkey 和 typestateNode链表树相关属性副作用相关属性flagsEffect List其他lanealternatefiber 树的构建与更新mount 过程update 过程总结 rea...[2023/1/11]
vue定义在computed的变量无法更新问题及解决
目录vue定义在computed的变量无法更新vue computed依赖收集与更新原理这里查源码后,对computed原理简述如下总结 vue定义在computed的变量无法更新
情境是这是线上商城的详情页面,商品详情是items数组,点击分类页面的商品,路由跳转到详情页面,路由参数是商品在i...[2023/1/11]
vue使用反向代理解决跨域问题方案
目录为什么要解决跨域问题在单文件组件中如何去解决跨域问题后端数据接口:猫眼验证中心配置反向代理配置模板文件及字段解释整个配置反向代理的思路解决接口重复问题 为什么要解决跨域问题
因为浏览器有限制,只有同域名同端口号下的数据才能拿来用;
那如果想拿到不同域名不同端口号下的数据就不行了;
...[2023/1/11]
Vuex给state中的对象新添加属性遇到的问题及解决Vuex给state中的对象新添加属性遇到的问题及解决
目录Vuex给state中的对象新添加属性遇到的坑向vuex对象中增加新的属性需要注意总结 Vuex给state中的对象新添加属性遇到的坑
state.js中有一个空对象obj:
export default {
? ...
? obj: {}
}
在App.vue中点击&ldqu...[2023/1/11]
react 高效高质量搭建后台系统 系列 —— 请求数据
其他章节请看:
react 高效高质量搭建后台系统 系列
请求数据
后续要做登录模块(主页),需要先和后端约定JSON数据格式,将 axios 进行封装,实现本地的数据模拟 mockjs。
Tip:spug 中后端返回 json 通常有 data 和 error两个 key。就像这样:...[2023/1/6]
蓝桥杯——巧妙地递归 - lx-Meteor
一、切蛋糕思想
对于递归,我们可以采用思想之一,切蛋糕思想。
简而言之,就是将一个大问题,切成若干个小问题进行解决。
递归三要素:找重复、找变化、找边界
我们可以理解为,自己处理一小部分,剩下的部分交给别人处理(递归)
分解为:直接量 + 小规模子问题
1.1 经典求阶乘
求阶乘
jc(n...[2023/1/6]
实现简单的csv文件上传和bootstrap表格的下载
一、写一个简单的页面并发送文件
引入bootstrap.js,jQuery.js等,具体的网页就不细写了,很简单。
加入input框,button控件,进度条。如下:
<li cla ="list-group-item" id="input-file-group">...[2023/1/6]
项目中使用TypeScript的TodoList实例详解项目中使用TypeScript的TodoList实例详解
目录为什么用todolisttodolist的ts化数据到视图实现handleTodoItemreadonly分类交叉类型新增功能联合类型可选属性数据转视图总结 为什么用todolist
现代的框架教程目前再也不是写个hello world那么简单了,而是需要有一定基础能力能够做到数据绑定、...[2023/1/6]
Vue快速上门(2)-模板语法
VUE家族系列:
Vue快速上门(1)-基础知识
Vue快速上门(2)-模板语法
Vue快速上门(3)-组件与复用
01、模板语法
1.1、template模板
<template>是H5新增的模板元素,是一个用于HTML模板内容的包装元素,主要使用其内部的内容。在普通的H...[2022/12/12]
JS执行机制及ES6
一、JS执行机制
JS语言有个特点是单线程,即同一时间只能做一件事。单线程就意味着,所有的任务需要排队,前一个任务结束,才会执行后一个任务,可能造成页面渲染不连贯。
为了解决这个问题,利用多核CPU的计算能力,允许JS脚本创建多个线程,即同步和异步。
同步任务:
同步任务都在主...[2022/12/12]
Vue快速上门(1)-基础知识图文版
VUE家族系列:
Vue快速上门(1)-基础知识
Vue快速上门(2)-模板语法
Vue快速上门(3)-组件与复用
01、基本概念
1.1、先了解下MVVM
VUE是基于MVVM思想实现的,?那什么是MVVM呢?—— MVVM,是Model-View-ViewModel的缩写,是一种软...[2022/12/12]
17个vue常用的数组方法总结与实例演示
1. join()
join(’参数‘)把数组的元素以传入的参数为分割符,转换成字符串。
let arr = [1,2,3,4,5];
let str = arr.join('','');
console.log(str) -> ''1,2,3,4,5'...[2022/12/12]
JS中call(),apply(),bind()函数的区别与用法详解
call()
介绍
通过提供一个新的this值给当前调用的函数/方法,从而改变this指向。
语法
fn.call(this.Arg, arg1, arg2,...)
thisArg:当前调用函数this指向的对象arg1, arg2:传递的其他参数(直接传给形参可不写)
特点...[2022/12/12]