随笔分类 - vue
摘要：前言在上一篇中，我们深入探讨了 Sass 中 @import 语法的局限性，正是因为这些问题，Sass 在 1.80 版本 后逐步弃用 @import，推出了更现代化的 @use 语法作为替代。在本文中，我们将深入解析 @use 的核心用法。 @use 用法为了改进 @import 语法的局限性，S
阅读全文
摘要：工作中使用组件之间传值在此记录 目录VUE3中的组件通信六种方法介绍与基本使用一、父传子(props)二、 Emits 传值（子组件向父组件传值）三、v-model 双向绑定四、 provide/inject（跨层级组件传值）五、事件总线（mitt 库）第三方库六、 Vuex 或 Pinia（状态管
阅读全文
摘要：
对于日常使用vue3开发项目的前端小伙伴来说，组件通信方式可以说是必会的基本功，今天带大家一起盘下vue3的通信方式。 我们这里按照组件的关系来划分。总共包含14中组件通信方式。 一、父子通信 props defineEmits $attrs $ref + defineExpose $parent
阅读全文
对于日常使用vue3开发项目的前端小伙伴来说，组件通信方式可以说是必会的基本功，今天带大家一起盘下vue3的通信方式。 我们这里按照组件的关系来划分。总共包含14中组件通信方式。 一、父子通信 props defineEmits $attrs $ref + defineExpose $parent
阅读全文
摘要：
在Mars3D中下载地图数据主要涉及离线瓦片数据的获取与部署。以下是具体步骤及方法： 1. 下载XYZ瓦片数据 工具选择：推荐使用专业地图下载工具如水经微图，支持按行政区划、矩形或多边形区域下载地图瓦片数据1。 下载流程： 选择地图类型（如天地图、谷歌地图等）并划定下载区域。 设置下载参数，包括级别
阅读全文
在Mars3D中下载地图数据主要涉及离线瓦片数据的获取与部署。以下是具体步骤及方法： 1. 下载XYZ瓦片数据 工具选择：推荐使用专业地图下载工具如水经微图，支持按行政区划、矩形或多边形区域下载地图瓦片数据1。 下载流程： 选择地图类型（如天地图、谷歌地图等）并划定下载区域。 设置下载参数，包括级别
阅读全文
摘要：
本来项目前期没有做按钮防抖功能 快结束时才想起来 然后一个个写太慢了 然后就想着封装一下 vue3:新建directive.js export default { //自定义节流操作 preventReClick: { mounted(el, binding) { el.addEventListen
阅读全文
本来项目前期没有做按钮防抖功能 快结束时才想起来 然后一个个写太慢了 然后就想着封装一下 vue3:新建directive.js export default { //自定义节流操作 preventReClick: { mounted(el, binding) { el.addEventListen
阅读全文
摘要：
echarts大屏适配以及图标配置项里面的文字适配。 1-创建js文件，并复制下面的函数 (function flexible (window, document) { var docEl = document.documentElement var dpr = window.devicePixel
阅读全文
echarts大屏适配以及图标配置项里面的文字适配。 1-创建js文件，并复制下面的函数 (function flexible (window, document) { var docEl = document.documentElement var dpr = window.devicePixel
阅读全文
摘要：
1、作用： Vue官方文档的解释是： 如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。 通俗的说，就是为了解决跨域问题。 2、用法：
阅读全文
1、作用： Vue官方文档的解释是： 如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。 通俗的说，就是为了解决跨域问题。 2、用法：
阅读全文
摘要：
vue实现录音并转文字功能，包括PC端，手机端和企业微信自建应用端不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。 原理浏览器实现录音并转文字最快捷的方法是通过Web Speech API来实现，这是浏览器内置示例的api方法，可以直接调用，无需引入任何依赖包，
阅读全文
vue实现录音并转文字功能，包括PC端，手机端和企业微信自建应用端不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。 原理浏览器实现录音并转文字最快捷的方法是通过Web Speech API来实现，这是浏览器内置示例的api方法，可以直接调用，无需引入任何依赖包，
阅读全文
摘要：
效果 封装loading加载（也可以直接使用，封装为了方便多次调用） 组件定义：loadDiy.js import { Loading } from "element-ui"; export const servicesLoading = (node,str,lock) => { return Lo
阅读全文
效果 封装loading加载（也可以直接使用，封装为了方便多次调用） 组件定义：loadDiy.js import { Loading } from "element-ui"; export const servicesLoading = (node,str,lock) => { return Lo
阅读全文
摘要：
插槽(slot)插槽在vue中是一种很常见的写法，让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式 一共有三种分类：默认插槽、具名插槽、作用域插槽，下面一一根据案例改造说明 1 基本案例首先编写一个基本的案例，三个组件展示不同的数据类型 页面进行展示 现在要改需求，美食的列表只
阅读全文
插槽(slot)插槽在vue中是一种很常见的写法，让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式 一共有三种分类：默认插槽、具名插槽、作用域插槽，下面一一根据案例改造说明 1 基本案例首先编写一个基本的案例，三个组件展示不同的数据类型 页面进行展示 现在要改需求，美食的列表只
阅读全文
摘要：
node-sass 安装过程 npm 拉下 node-sass包； 根据node版本和node-sass版本拉取对应的binding.node编译器，原因是sass的编译语言比较特殊，需要下载对应版本的编译器才能编译；（node scripts/install.js 阶段） 如果能拉下binding
阅读全文
node-sass 安装过程 npm 拉下 node-sass包； 根据node版本和node-sass版本拉取对应的binding.node编译器，原因是sass的编译语言比较特殊，需要下载对应版本的编译器才能编译；（node scripts/install.js 阶段） 如果能拉下binding
阅读全文
摘要：
本文的目的，是为了让已经有 Vue2 开发经验的 人 ，快速掌握 Vue3 的写法。 因此， 本篇假定你已经掌握 Vue 的核心内容 ，只为你介绍编写 Vue3 代码，需要了解的内容。 一、Vue3 里 script 的三种写法 首先，Vue3 新增了一个叫做组合式 api 的东西，英文名叫 Com
阅读全文
本文的目的，是为了让已经有 Vue2 开发经验的 人 ，快速掌握 Vue3 的写法。 因此， 本篇假定你已经掌握 Vue 的核心内容 ，只为你介绍编写 Vue3 代码，需要了解的内容。 一、Vue3 里 script 的三种写法 首先，Vue3 新增了一个叫做组合式 api 的东西，英文名叫 Com
阅读全文
摘要：
引言 有这么一个需求：列表页进入详情页后，切换回列表页，需要对列表页进行缓存，如果从首页进入列表页，就要重新加载列表页。 对于这个需求，我的第一个想法就是使用keep-alive来缓存列表页，列表和详情页切换时，列表页会被缓存；从首页进入列表页时，就重置列表页数据并重新获取新数据来达到列表页重新加载
阅读全文
引言 有这么一个需求：列表页进入详情页后，切换回列表页，需要对列表页进行缓存，如果从首页进入列表页，就要重新加载列表页。 对于这个需求，我的第一个想法就是使用keep-alive来缓存列表页，列表和详情页切换时，列表页会被缓存；从首页进入列表页时，就重置列表页数据并重新获取新数据来达到列表页重新加载
阅读全文
摘要：
一、代码分割 一个大型前端应用，如果所有代码都放在单一文件，体积会特别大，下载时间长，白屏时间久，用户体验差。 代码分割是一种有效的优化方式。提前把代码切分为多个小块，只下载当前必需的部分，用到哪块下载哪块。就像吃自助餐一样，吃多少拿多少。 早期的代码分割一般通过 webpack 实现。随着 ES6
阅读全文
一、代码分割 一个大型前端应用，如果所有代码都放在单一文件，体积会特别大，下载时间长，白屏时间久，用户体验差。 代码分割是一种有效的优化方式。提前把代码切分为多个小块，只下载当前必需的部分，用到哪块下载哪块。就像吃自助餐一样，吃多少拿多少。 早期的代码分割一般通过 webpack 实现。随着 ES6
阅读全文
摘要：
Vue 3是一个非常流行的前端框架，广泛应用于大型互联网企业和个人项目。 虽然我们已经熟悉了一些常见的 Vue 3 知识，但还有一些不太常见但实用性很强的点可以帮助我们进一步优化和提升 Vue 3 应用的性能和开发效率。 本文将介绍一些不太常见的Vue 3知识点。01、TeleportTelepor
阅读全文
Vue 3是一个非常流行的前端框架，广泛应用于大型互联网企业和个人项目。 虽然我们已经熟悉了一些常见的 Vue 3 知识，但还有一些不太常见但实用性很强的点可以帮助我们进一步优化和提升 Vue 3 应用的性能和开发效率。 本文将介绍一些不太常见的Vue 3知识点。01、TeleportTelepor
阅读全文
摘要：
随着互联网技术的迅速发展，用户对网页的加载速度和交互体验有了更高的期待。作为开发者，我们常常需要在服务器端渲染（SSR）与客户端渲染（CSR）之间做出选择。这两种渲染方式各有特点，适用于不同的场景和需求。今天，就让我们一起来探索SSR和CSR的世界，帮助你为你的应用选择最合适的渲染策略。 什么是渲染
阅读全文
随着互联网技术的迅速发展，用户对网页的加载速度和交互体验有了更高的期待。作为开发者，我们常常需要在服务器端渲染（SSR）与客户端渲染（CSR）之间做出选择。这两种渲染方式各有特点，适用于不同的场景和需求。今天，就让我们一起来探索SSR和CSR的世界，帮助你为你的应用选择最合适的渲染策略。 什么是渲染
阅读全文
摘要：单点登录是什么？你是怎么理解的？单点登录是如何实现的 普通登录 提到单点登录，首先可以想到传统登录，通过登录页面根据用户名查询用户信息，判断密码是否正确，正确则将用户信息写到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
阅读全文
浙公网安备 33010602011771号