Vue3的路由传参方法超全汇总
目录1. name + params2. name + query3. path + query4. 路径字符串?拼接参数5. 路径字符串 / 拼接参数总结 下面方法刷新参数都不会丢失
1. name + params
路由配置(需要配置成动态路由形式,原先的直接传参不能用了)
impo...[2023/4/24]
Vue input输入框中的值如何变成黑点问题Vue input输入框中的值如何变成黑点问题
目录vue input输入框中的值变成黑点input标签选中样式设置及input密码框可视设置总结 vue input输入框中的值变成黑点
上面是自定义的组件,type 和 placeholder 分别作为参数。
type="pa word"
type 设置为 pa word 就可以显示...[2023/4/24]
源码分析Vue3响应式核心之reactive
目录一、Reactive源码1、reactive2、接着看工厂方法createReactiveObject二、baseHandlers1、baseHandlers vue3响应式核心文章汇总:
vue3响应式核心之reactive源码详解
vue3响应式核心之effect源码详解
vue...[2023/4/24]
源码分析Vue3响应式核心之effect
目录一、effect用法1、基本用法2、lazy属性为true3、options中包含onTrack二、源码分析1、effect方法的实现2、ReactiveEffect函数源码三、依赖收集相关1、如何触发依赖收集2、track源码3、trackEffects(dep, eventInfo)源码解读...[2023/4/24]
layui实际项目使用过程中遇到的兼容性问题及解决
目录layui项目使用过程中遇到的兼容性问题layui实践兼容layui在vue项目中不能自动渲染的问题layui中获取layui路径方法不兼容IE11的问题解决方法在IE8下使用layui遇到的坑栅格系统不支持上传preview方法不支持上传弹出下载框总结 layui项目使用过程中遇到的兼容性问题...[2023/4/24]
vue项目中字符串换行显示方式(返回的数据包含‘\r\n’字符)
目录vue项目中字符串换行显示处理方法踩坑记录(记得抽空瞄一眼,很重要!) vue字符串换行问题及vue路由跳转传参总结 vue项目中字符串换行显示
在vue项目中,请求后端接口获取到的数据是一整条字符串,如:‘1、和加速度和环境,\r\n2、技术的进步是否,\r\n3、讲...[2023/4/24]
js实现响应按钮点击弹出可拖拽的非模态对话框完整实例【测试可用】[原创]
1.c 部分:
.dialog {
? display: none;
? position: absolute;
? left: 50%;
? top: 50%;
? transform: translate(-50%, -50%);
? background-color: #fff...[2023/4/24]
css 利用 linear-gradient 实现条纹背景
1. 水平条纹背景
当给背景设置渐变效果时,默认的渐变方向是垂直由上到下的,效果如下:
{
background: linear-gradient(#aaa, #ddd);
}
尝试拉近色标的距离,会发现渐变区域变小了:
{
background: linear-gradie...[2023/4/21]
vue3的hooks用法总结
目录vue3的hooks总结 一、计数器的hookvue3中hooks的介绍及用法小结一、 什么是hooks二、hooks的用法 vue3的hooks总结
vue3中的hooks其实是函数的写法,就是将文件的一些单独功能的js代码进行抽离出来,放到单独的js文件中。这样其实...[2023/4/21]
vue3中ref绑定dom或者组件失败的原因及分析
目录vue3 ref绑定dom或者组件失败原因分析场景描述ref绑定失败情况举例解决方案vue3组合式API的v-for及ref绑定DOM总结 vue3 ref绑定dom或者组件失败原因分析
场景描述
在vue3中经常用到使用ref绑定组件或者dom元素的情况,很多时候,明明使用ref绑定了...[2023/4/21]
使用Vue.js实现数据的双向绑定使用Vue.js实现数据的双向绑定
目录如何用Vue.js实现数据的双向绑定?1. 理解双向绑定2. 使用v-model指令3. 使用自定义组件实现双向绑定4. 数据劫持5. 模板引擎6.Object.defineProperty()详解 如何用Vue.js实现数据的双向绑定?
在Vue.js中,双向数据绑定是一项非常强大的功能,...[2023/4/21]
vue3.0 Reactive数据更新页面没有刷新的问题
目录vue3.0 Reactive数据更新页面没有刷新vue3.0中的reactive用法在 reactive 使用基本类型参数响应式代理 vs. 原始对象总结 vue3.0 Reactive数据更新页面没有刷新
vue 3.0 ref 和 Reactive 数据响应式,以及使用 Reactiv...[2023/4/21]
详解JS中异常与错误处理的正确方法
目录简介1 面向错误编程1.1 墨菲定律1.2 先判否2. js 内置的错误处理2.1 Error 类2.2 throw2.3 try catch2.4 Promise.catch3. 错误处理只有一次总结 简介
首先,这篇文章一定会引起争议,因为对于错误处理从来就没有真正的标准答案,每个人都会...[2023/4/21]
JSON.stringify()与JSON.parse()没有你想的那样简单
重新学习这两个API的起因
在本周五有线上的项目,16:30开始验证线上环境。
开始都是顺顺利利,一帆风顺。
大概17:50左右,我正在收拾东西。
准备下班去王者峡谷骑着我的船溜达一圈。
可是天降意外,给我派了一个bug。
测试给我说:有一条数据的详情页有数据但是在页面中没有显示数据。
不可能,...[2023/4/19]
一文掌握new Date() 方法
目录可恶的四宗罪1. Safari浏览器不兼容YYYY-MM-DD这样的格式2、月份的索引是以0为起点的,而年份、日期却不是3、年份小于100,默认以19xx或20xx开头4、日期初始化不统一,存在时区差异应用思考1. 时间的计算2. 时间的比较3. 时间的格式化困境的解决实例化对象时间戳及克隆时间...[2023/4/19]
JS中Map、WeakMap和Object的区别解析
目录JavaScript中的Map、WeakMap和Object都是用于存储键值对的数据结构:下面是Map、WeakMap和Object之间的区别:1. 键的类型:2. 垃圾回收:3. 可枚举性:4. 方法和操作:5. 继承:使用场景:下面是一些使用Map、WeakMap和Object的示例:1. ...[2023/4/19]
Vue中代码传送(teleport)的实现
目录代码传送是啥实例解析 代码传送是啥
在Vue中,代码传送就是将某部分的代码从Vue的template标签下传送到指定的地方,这个地方通常是body标签下。在使用Vue编写界面时,我们都是在html的Body中写一个div,然后指定一个id,然后在Vue的实例中的template中写我们的界面...[2023/4/19]
vue之Element-Ui输入框显示与隐藏方式vue之Element-Ui输入框显示与隐藏方式
目录Element-Ui输入框显示与隐藏使用element-ui比较简单,添加show-pa word即可Element el-input 输入框详解1. 用途2. 输入框3. 文本域总结 Element-Ui输入框显示与隐藏
使用element-ui比较简单,添加show-pa word即可
...[2023/4/19]
element-ui vue input输入框自动获取焦点聚焦方式
目录element-ui vue input输入框自动获取焦点聚焦方法一方法二vue输入框自动获取焦点的三种方式方式一:原生JS操作DOM方式二:ref方式实现方式三:使用自定义指令总结 element-ui vue input输入框自动获取焦点聚焦
有时候会遇到要输入框自动获取焦点的情况...[2023/4/19]
uni.getLocation和wx.getLocation方法调用无效也不返回失败的解决方案
线上已解决问题的代码 记录时间 2022.12.10
获得地理定位信息
uni.getLocation({
type: ''wgs84'',
succe : function(resp) {
console.log(11111)...[2023/4/19]
React中immutable的UI组件渲染性能详解
目录引言UI组件渲染性能方案一:shallow compare方案二:直接对前后的对象进行deepCompare总结: 引言
react 一直遵循UI = fn(state) 的原则,有时候我们的state却和UI不同步 有时候组件本身在业务上不需要渲染,却又会再一次re-render。之前在项...[2023/4/19]
js如何查找json数据中的最大值和最小值方法
目录js查找json数据中的最大值和最小值使用Math对象来获取最大值和最小值使用for循环来获取最大值和最小值获取最大值和最小值返回对应的json数据用reduce()获取JSON中某个字段值最大的项需求语法返回值回调函数语法总结 js查找json数据中的最大值和最小值
js操作数组的方式有很...[2023/4/19]
Vue3中如何修改父组件传递到子组件中的值(全网少有!)
目录Vue3中修改父组件传递到子组件中的值自定义组件上使用v-model总结: Vue3中修改父组件传递到子组件中的值
1.大家都知道,vue是具有单向数据流的传递特性。当你在子组件中修改父组件传递过来的数据的时候,控制台就会报出错误,说不让你对父组件传递的值进行修改。2.那么,尤大大为了解决这...[2023/4/17]
vue播放flv、m3u8视频流(监控)的方法实例
目录前文:一、 Je ibucaPlayer插件用来播放flv流二、easyplayer插件播放m3u8流总结 前文:
随着前端大屏页面的逐渐壮大,客户的需求也越来越多,大屏上面展示的事物也越来越丰 富。其中实时播放监控的需求逐步增加,视频流格式也是有很多种...[2023/4/17]
简单谈谈Vue3中的ref和reactive
目录一、是什么?二、先聊reactive三、再聊ref四、ref和reactive定义数组对比五、对比总结总结 一、是什么?
ref和reactive是Vue3中用来实现数据响应式的API
一般情况下,ref定义基本数据类型,reactive定义引用数据类型
(我喜欢用它来定义对象,不用...[2023/4/17]
JS时间戳转换为常用时间格式的三种方式JS时间戳转换为常用时间格式的三种方式
目录前言1、js 时间戳转日期(可直接复制)2、在main.js中创建过滤器(1)main.js中,创建过滤器将其挂载到vue上(2)页面中具体使用3、day.js(1)三种安装方式任选其一(2)页面中具体使用总结 前言
在js中将时间戳转换为常用的时间格式,有三种主要的方式
1、使用JS中...[2023/4/17]
如何利用vue展示.docx文件、excel文件和csv文件内容
目录一、展示word文件内容1、安装并引入依赖mammoth2、页面中使用二、展示excel/csv文件内容1、安装并引入依赖handsontable、papaparse,excel文件需要安装xlxs2、公共组件sheet.vue3、页面内引入组件总结 一、展示word文件内容
1、安装并引入...[2023/4/17]
关于vue3+echart5?遇到的坑?Cannot?read?properties?of?undefined?(reading?'type')
目录1、错误说明2、错误原因3、解决方案 1、错误说明
vue3中,使用data的方式初始化echart图表
export default {
data() {
return {
chart: null,
...
}
},
m...[2023/4/17]
【Dotnet 工具箱】跨平台图表库 LiveCharts2
你好,这里是 Dotnet 工具箱,定期分享 Dotnet 有趣,实用的工具和组件,希望对您有用!
LiveCharts2
LiveCharts2 是一个简单、灵活、交互式以及功能强大的跨平台图表库。
LiveCharts2 现在几乎可以在任何地方运行,包括 Maui、Uno Platf...[2023/4/14]
vue路由跳转打开新窗口(window.open())和关闭窗口(window.close())
目录vue路由跳转打开新窗口和关闭窗口编程式导航window.open( )方法关闭窗口 window.close()vue路由跳转打开新窗口(被浏览器拦截)第一种方法第二种方法第二种方法(改良版) 总结 vue路由跳转打开新窗口和关闭窗...[2023/4/14]
el-menu动态加载路由的实现
先看需要实现的效果
这里有一级也有二级菜单,注意二级菜单的父目录(”选项设置“点击不会跳转,只是展开目录),然后点击去详情页,需要跳到一个隐藏的路由,不在菜单展示的路由
还有一点要注意,就是这里有两个router-view,整个页面是一个router-v...[2023/4/14]
js中如何复制一个数组(浅复制、深复制)
目录下面介绍数组的浅复制方法一:concat()方法二:slice()方法三:扩展运算符方法四: Object.a ign()下面是深复制方法一:JSON.parse(JSON.stringify(arr))方法二:通用方法(数组或对象)方法三:利用lodash的深拷贝函数在Vue中使用安装在mai...[2023/4/14]
vue-router4动态路由刷新404/白屏的解决vue-router4动态路由刷新404/白屏的解决
vue3+vue-router4+vuex4+vite实现动态路由的时候,出现刷新404或者空白
一、动态路由的实现:
1、在项目一开始,通过createRouter创建路由的时候,使用路由实例(通常有404、login等)。
2、登录成功后,通过后台接口获取后端配置的路由,然后add...[2023/4/14]
vue-router4版本第一次打开界面不匹配路由问题解决
问题:[Vue Router warn]: No match found for location with path “/home”
因为以前是一次性添加路由使用的是addRoutes,现在成了addRoute一个一个添加,我登陆后动态添加路由后,明明已经加了路由,打...[2023/4/14]
JS实现判断两个日期不能跨年和跨月
js判断两个日期不能跨年和跨月,例如20230108,20230208
一、可以使用JavaScript中Date对象的方法来判断两个日期是否跨年和跨月。以下是一个实现该功能的示例代码:
const date1 = new Date(''2023-01-08'');
const date...[2023/4/14]
el-menu修改item颜色的实现
本文主要介绍了el-menu修改item颜色的实现,具体如下:
今天在在点击el-menu的一级菜单和二级菜单出现了点击成白色,刚好我设置的文字颜色也是白色,就变成什么都看不见了。
设置一级菜单和二级菜单的背景颜色
.el-sub-menu .el-menu-item...[2023/4/14]
vue实现el-menu和el-tab联动的示例代码
vue通过el-menus和el-tabs联动,实现点击侧边栏,页面内显示一行tab以及点击tab切换路由
实现效果如下
实现思路 左侧边栏添加点击事件/设置el-menu的路由模式,然后监听路由的变化,拿到的路由去改变el-tabs绑定的属性,然后改变el-tab-pane循...[2023/4/14]
JS如何去掉小数末尾多余的0,并且最多保留两位小数
目录js去掉小数末尾多余的0,并且最多保留两位小数思路js去掉小数点后面的0 (uniapp 和 vue比较适用)总结 js去掉小数末尾多余的0,并且最多保留两位小数
比如:
'' -> 00.00 -> 01 -> 11.10 -> 11.21300...[2023/4/14]
Vue自定义指令directive的使用方法分享Vue自定义指令directive的使用方法分享
1. 一个指令定义对象可以提供如下几个钩子函数(均为可选)
bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted:被绑定元素插入父节点时调用(仅保证父节点存在,但不一定已被插入文档中)。
update:只要当前元素不被移除,其他操作几乎...[2023/4/14]
Vue3进阶主题Composition API使用详解
目录什么是Composition API为什么Vue3推荐使用Composition API总结 什么是Composition API
Composition API 是 Vue3 中引入的一种新的 API 风格,旨在提高代码的可读性、可维护性和可重用性。Composition API 不同...[2023/4/14]
用Abp实现两步验证(Two-Factor Authentication,2FA)登录(二):Vue网页端开发
@目录发送验证码登录退出登录界面控件获取用户信息功能项目地址
前端代码的框架采用vue.js + elementUI 这套较为简单的方式实现,以及typescript语法更方便阅读。
首先添加全局对象:
loginForm: 登录表单对象
twoFactorData: 两步验证数据, ...[2023/4/12]
Vue3中事件总线的具体使用
目录导读事件总线的本质构建一个EventEmitterconfig.globalProperties方法provide/inject结束语 导读
在Vue2中,我们遇到复杂的组件通信时,经常采用事件总线的方式来通信。其具体的思路就是实例化一个空白的Vue,并通过其提供的$on、$once、$em...[2023/4/12]
vue3.2中的vuex使用详解
Vuex 中有以下几个核心概念:
State:应用程序的状态存储在单一的状态树中,即 State。State 可以通过 store.state 属性访问。Mutation:状态的变化必须通过提交 Mutation 来进行。Mutation 是一个包含 type 和 payload 属性的对象,t...[2023/4/12]
浅谈JS中小数相加不精确的原因
目录前言Javascript中小数相加的问题如何让小数相加的结果保持准确?1.使用toFixed()2.使用bignumber.js3.使用ES6的Number.MAX_SAFE_INTEGER属性 前言
Javascript是一种强大的编程语言,可以轻松处理各种数据类型,包括字符串、数字、数组...[2023/4/12]
原生JS实现简单屏幕截图原生JS实现简单屏幕截图
目录了解 HTML5 中的 Canvas获取屏幕截图结论 在 Web 开发中,截图是一项非常有用的技术。可以使用截图来记录当前屏幕状态,生成缩略图或进行屏幕分享等操作。在本文中,我将介绍如何使用原生 JavaScript 来实现截图功能。
了解 HTML5 中的 Canvas
HTML5 中...[2023/4/12]
js 模块化CommonJS AMD UMD CMD ES6规范详解
目录js 的演变模块化1. CommonJS 规范2. AMD 规范3. UMD 规范4. CMD 规范5. ES6 模块化AMD 和 CMD 的区别ES6 模块与 CommonJS 模块的差异最后 js 的演变
通过这篇文章,笔者将介绍几种 js 模块化的规范,以及它们各自的优缺点和差异....[2023/4/12]
教程 - 在 Vue3+Ts 中引入 CesiumJS 的最佳实践@2023
目录1. 本篇适用范围与目的1.1. 适用范围1.2. 目的2. 牛刀小试 - 先看到地球2.1. 创建 Vue3 - TypeScript 工程并安装 cesium2.2. 清理不必要的文件并创建三维地球2.3. 中段解疑 - 奇怪的路径2.4. 打包部署2.5. 有限的优化3. Cesium...[2023/4/10]
Three.js 进阶之旅:全景漫游-高阶版在线看房 🏡
声明:本文涉及图文和模型素材仅用于个人学习、研究和欣赏,请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。
摘要
专栏上篇文章《Three.js 进阶之旅:全景漫游-初阶移动相机版》中通过创建多个球体全景场景并移动相机和控制器的方式实现了多个场景之间的穿梭漫游。这种方式的缺点也...[2023/4/10]
实现和CSS一样的easing动画?直接看Mozilla、Chromium源码!实现和CSS一样的easing动画?直接看Mozilla、Chromium源码!
前言
在上一篇丝滑的贝塞尔曲线:从数学原理到应用介绍贝塞尔曲线实现动画时给自己留了一个坑,实现的动画效果和CSS的transition-timing-function: cubic-bezier差别较大,如下图所示,红色为Linear、绿色为CSS的cubic-beizer、蓝色为自己实现的cb...[2023/4/10]