随笔分类 - vue
摘要:
echarts大屏适配以及图标配置项里面的文字适配。 1-创建js文件,并复制下面的函数 (function flexible (window, document) { var docEl = document.documentElement var dpr = window.devicePixel
阅读全文
![echarts大屏适配(rem)+图表的文字适配](https://img2024.cnblogs.com/blog/1161361/202409/1161361-20240911165254500-1759345270.png)
摘要:
1、作用: Vue官方文档的解释是: 如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。 通俗的说,就是为了解决跨域问题。 2、用法:
阅读全文
![Vue配置代理(devServer)解决跨域问题](https://img2024.cnblogs.com/blog/1161361/202409/1161361-20240906122827826-503256995.png)
摘要:
vue实现录音并转文字功能,包括PC端,手机端和企业微信自建应用端不止vue,不限技术栈,vue2、vue3、react、.net以及原生js均可实现。 原理浏览器实现录音并转文字最快捷的方法是通过Web Speech API来实现,这是浏览器内置示例的api方法,可以直接调用,无需引入任何依赖包,
阅读全文
![vue实现录音并转文字功能,包括PC端web,手机端web](https://img2024.cnblogs.com/blog/1161361/202408/1161361-20240812111421684-1190660788.png)
摘要:
效果 封装loading加载(也可以直接使用,封装为了方便多次调用) 组件定义:loadDiy.js import { Loading } from "element-ui"; export const servicesLoading = (node,str,lock) => { return Lo
阅读全文
![elementui中实现loding实现局部加载,以el-dialog为例](https://img2024.cnblogs.com/blog/1161361/202407/1161361-20240724111215487-1410621169.png)
摘要:
插槽(slot)插槽在vue中是一种很常见的写法,让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式 一共有三种分类:默认插槽、具名插槽、作用域插槽,下面一一根据案例改造说明 1 基本案例首先编写一个基本的案例,三个组件展示不同的数据类型 页面进行展示 现在要改需求,美食的列表只
阅读全文
![vue中的插槽详解](https://img2024.cnblogs.com/blog/1161361/202407/1161361-20240711142715526-2058829829.png)
摘要:
node-sass 安装过程 npm 拉下 node-sass包; 根据node版本和node-sass版本拉取对应的binding.node编译器,原因是sass的编译语言比较特殊,需要下载对应版本的编译器才能编译;(node scripts/install.js 阶段) 如果能拉下binding
阅读全文
![安装node-sass失败原因及解决办法汇总](https://img2024.cnblogs.com/blog/1161361/202405/1161361-20240521165619397-1688918593.png)
摘要:
本文的目的,是为了让已经有 Vue2 开发经验的 人 ,快速掌握 Vue3 的写法。 因此, 本篇假定你已经掌握 Vue 的核心内容 ,只为你介绍编写 Vue3 代码,需要了解的内容。 一、Vue3 里 script 的三种写法 首先,Vue3 新增了一个叫做组合式 api 的东西,英文名叫 Com
阅读全文
![十分钟,带你了解 Vue3 的新写法](https://img2024.cnblogs.com/blog/1161361/202405/1161361-20240506102817249-416383416.png)
摘要:
引言 有这么一个需求:列表页进入详情页后,切换回列表页,需要对列表页进行缓存,如果从首页进入列表页,就要重新加载列表页。 对于这个需求,我的第一个想法就是使用keep-alive来缓存列表页,列表和详情页切换时,列表页会被缓存;从首页进入列表页时,就重置列表页数据并重新获取新数据来达到列表页重新加载
阅读全文
![Vue3 除了 keep-alive,还有哪些页面缓存的实现方案](https://img2024.cnblogs.com/blog/1161361/202405/1161361-20240508151759659-90649306.png)
摘要:
一、代码分割 一个大型前端应用,如果所有代码都放在单一文件,体积会特别大,下载时间长,白屏时间久,用户体验差。 代码分割是一种有效的优化方式。提前把代码切分为多个小块,只下载当前必需的部分,用到哪块下载哪块。就像吃自助餐一样,吃多少拿多少。 早期的代码分割一般通过 webpack 实现。随着 ES6
阅读全文
![Vue 3 进阶用法:异步组件](https://img2024.cnblogs.com/blog/1161361/202404/1161361-20240422135628240-308112918.png)
摘要:
Vue 3是一个非常流行的前端框架,广泛应用于大型互联网企业和个人项目。 虽然我们已经熟悉了一些常见的 Vue 3 知识,但还有一些不太常见但实用性很强的点可以帮助我们进一步优化和提升 Vue 3 应用的性能和开发效率。 本文将介绍一些不太常见的Vue 3知识点。01、TeleportTelepor
阅读全文
![6个高级Vue3知识技巧](https://img2024.cnblogs.com/blog/1161361/202404/1161361-20240423165500615-566912224.png)
摘要:
随着互联网技术的迅速发展,用户对网页的加载速度和交互体验有了更高的期待。作为开发者,我们常常需要在服务器端渲染(SSR)与客户端渲染(CSR)之间做出选择。这两种渲染方式各有特点,适用于不同的场景和需求。今天,就让我们一起来探索SSR和CSR的世界,帮助你为你的应用选择最合适的渲染策略。 什么是渲染
阅读全文
![深入探讨下SSR与CSR有啥不同](https://img2024.cnblogs.com/blog/1161361/202405/1161361-20240514170430923-1819132268.png)
摘要:单点登录是什么?你是怎么理解的?单点登录是如何实现的 普通登录 提到单点登录,首先可以想到传统登录,通过登录页面根据用户名查询用户信息,判断密码是否正确,正确则将用户信息写到session,访问的时候通过从session中获取用户信息,判断是否已登录,登录则允许访问。 普通登录的缺点 由于sessi
阅读全文
摘要:页面引导功能是 web 开发中常见的一个功能。通过页面引导功能,你可以让用户第一时间熟悉你的页面功能。今天给大家推荐一个页面引导库 driver.js。 简介 driver.js 是一款用原生 js 实现的页面引导库,上手非常简单,体积在 gzip 压缩下仅仅 5kb。 我们来看下如何使用 driv
阅读全文
摘要:目标:实现表单重置和清除验证 1.整个表单的校验移除 <Form ref="form" rule={this.rules}> <FormItem prop="name" label="姓名"> <Input/> </FormItem> <FormItem prop="age" label="年龄">
阅读全文
摘要:在项目开发中遇到一个需求: 1:用鼠标滚轮可对图片进行缩放处理 2:点击按钮可对图片进行缩放处理 3:可对图片进行拖拽处理 我在开发中通过自己实现与百度查看优秀的铁子进行了两种类型的使用 <template> <div ref="imgWrap" class="wrap" @mousewheel.p
阅读全文
摘要:实时流 海康: rtsp://[username]:[password]@[ip]:[port]/[codec]/[channel]/[subtype]/av_stream 说明:username: 用户名。例如admin。password: 密码。例如12345。ip: 为设备IP。例如 192.
阅读全文
摘要:.Net core 中的SignalR JavaScript客户端已经不需要依赖Jquery了 一、服务端 1、nuget安装 Microsoft.AspNetCore.SignalR2、在startup.cs中注册和使用signalr services.AddSignalR(); app.UseE
阅读全文
摘要:signalr断开连接后重新连接 产品需求连接signalr 不稳定,连着连着就断了,场面十分尴尬,导致产品经理现场被批!!(内心无比高兴 ) 分析得出问题现象: 服务器因某些特殊原因,导致服务停止一段时间后;当服务端重启后,Signalr连接的客户端未能自动连接到服务上。 一、signalr引入
阅读全文
摘要:开发过程中遇到结构复杂的取值时,结构赋值方便了很多 结构赋值是什么:(1)认识解构赋值:传统的通过数组的下标来获取数组中的元素: const arr = [1, 2, 3]; const a = arr[0]; const b = arr[1]; const c = arr[2]; console.
阅读全文
摘要:
目录 1 在data中定义 2 在methods中定义 3 开始轮询 4 终止轮询 方法一: destroyed() 方法二:beforeRouteLeave(to, from, next) 推荐 所有代码 轮询:polling1 在data中定义 data() { return { polling
阅读全文
![VUE 轮询、轮询终止 beforeRouteLeave](https://img2023.cnblogs.com/blog/1161361/202302/1161361-20230202163847367-1585024463.png)