el-autocomplete核心参数 可以实现异步的数据拉取，从异步返回的数据中，选择需要的结果，并回显到文本框中。 fetch-suggestions 回调列表，异步的方式获取数据列表，显示在列表框中 @select 当选中某一项时，会触发这个方法，将数据获取到，这时，我们可以将数据回显，或者赋值给父页面上的元素，如果希望赋值父页面上v-model绑定的元素，可以通过v-model原理中说的，绑定input事件，将当前值进行传递即可。 实例代码 子组件代码 <template> <div> <el-autocomplete :fetch-suggestions...

以下是一些Pinia的其他高阶功能： storeToRefs()：响应式解构仓库，保证解构出来的数据是响应式的数据。 状态持久化：Pinia并没有内置的状态持久化功能，但你可以使用第三方库或自定义插件来实现状态的持久化。例如，你可以使用 localStorage 或 sessionStorage 来将状态保存在客户端。 插件系统：Pinia允许你编写自定义插件，以扩展和定制状态管理功能。你可以创建插件来处理持久化、日志记录、错误处理等任务，以适应你的特定需求。 响应式解构storeToRefs() 背景 在组件中访问仓库state,getters,a...

前端下载文件一般使用的是blob 核心的步骤是获取后端响应的文件流，用blob创建一个临时的URL，然后创建一个隐藏的<a>标签，实现下载需求。 那就先上代码 functiondownload(item){ axios.get(getServerUrl()+"/teacher/output/"+classId.value+"/"+item,{ responseType:'blob',//告诉浏览器响应类型是Blob }).then((response)=>{ letblob=newBlob([response.data]); //创建一个临时URL，用于下载 consturl...

最近在写项目的一些公共组件（一些选择器），很多个地方都需要用，所以在main.js全局声明了，但发现子页面调用还是有挺多的地方需写。 例如，要在template实例化组件，并用ref绑定，然后在js里的methods里写方法。 main.js声明全局组件 第一种方案 一开始想到的是用ref绑定组件，业务组件实例化公共组件，并赋予ref，然后通过这个ref绑定，直接调用公共组件的方法（为了一定能触发方法），例如 this.$refs.xxx.open() 如果用户在公共组件中，选择好数据操作完成后，公共组件触发emit方法，通过回调方法的方式通知业务组件，例如 this.$...

导语：最近开发了一个基于uniapp框架的项目，有一些感触和体会，所以想记录以下一些技术和经验，在这里做一个系列总结，算是对自己做一个交代吧。 目录 简介 全局文件 全局组件 常用API 条件编译 插件开发 简介 uniapp是DCloud公司于2015年开发的一款基于vue的跨端框架，编写一套代码就可以运行到web、小程序（各种小程序）和app（Android和iOS）端，使得开发一个项目的成本很小，效率很高，方便快捷。 uniapp官网 功能框架图 各端运行效果 全局文件 这里主要是两个文件：pages.json管理页面路由、和manifest.json管理应用配置。 page...

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 在Web开发中，异步请求是一个常见的操作。然而，在异步请求中正确地获取返回值却可能会变得棘手。本文将介绍如何解决异步请求中的返回值问题，并提供一种解决方案。 一、问题描述 在某个Web应用程序中，用户遇到了无法正确获取异步请求返回值的问题。具体来说，用户在第一个异步请求中设置了configIP变量的值，然后在第二个异步请求中使用了该变量，但是无法正确地获取到其值。 示例：我在js里写这段代码，但是总获取不到configIP这个参数，有的时候会变成127.0.0.1，有的时候会变成正确的，如何解决这个问题? varconfi...

地图在app中使用还是很广泛的，常见的应用常见有： 1、获取自己的位置，规划路线。 2、使用标记点进行标记多个位置。 3、绘制多边形，使用围墙标记位置等等。 此篇文章就以高德地图为例，以上述三个常见需求为例，教大家如何在uniapp中添加地图。 作为一个不管闲事的前端姑娘，我就忽略掉那些繁琐的账号申请，假设需要的信息问项目经理都要来了，如果你没有现成的信息，还需要申请，请查看： https://lbs.amap.com/api/javascript-api-v2/prerequisites 去高德地图注册账号，根据官网指示获取key。然后就正式开始前端uniapp+高德地图之旅啦！ 一、地图配...

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 前言 为了更好的了解原神角色，我模仿官网做了一个角色切换效果，在做的过程当中也总结了一些技术点。 为了让大家更好的体验，我兼容了PC端和移动端，建议在PC端查看效果更佳。接下来就为大家简单的分享一下！ 话不多说，原神启动！！ 效果 先看一下官网的效果：ys.mihoyo.com/main/charac… 我写的真实效果：chenyajun.fun//ysRoleSwi… 技术点 一、底部角色横向滚动效果 1、原理 外层容器：就是底部角色可视窗口。 内层容器： 用来存放角色头像，点击左右键或者角色需要滚动的容器。 滚...

背景 再很多场景中，我们可能想在子组件中修改父组件的数据，但事实上，vue不推荐我们这么做，因为数据的修改不容易溯源。 Vue2写法 在vue2中，我们使用.sync修饰符+自定义事件'update:xxx'，来使父子组件数据同步。 //父组件 <template> <div> <h2>我是父组件，我有{{money}}¥</h2> <hr> <!-这里使用.sync修饰符，使子组件pmoney与父组件money同步--> <Son:pmoney.sync="money"/> </div> ...

nvm、node、vue安装、创建vue项目 nvm作用：可以管理多个版本的node，切换node版本，下载node。 前情提要 参考：https://zhuanlan.zhihu.com/p/519270555 下载地址：https://github.com/coreybutler/nvm-windows/releases 一、常用命令 1、nvm查看安装了的node nvmls nvmlist//查看安装的node版本，如果所有的版本前面都没有，说明node指定版本没成功，运行node-v会提示‘node’不是内部或外部命令 2、nvm下载node //x.x.x版本号 nvmi...

模板页的重要性 Vue项目中使用布局组件来创建页面布局的方式是完全可行的，而且在很多项目中都被广泛采用，包括像ruoyi这样的框架。这种模式有助于实现统一的页面布局结构，减少重复代码，并提高代码的可维护性。 让我们具体分析一下你提到的ruoyi框架的做法： Layout组件：layout/index.vue是一个布局组件，定义了整个页面的结构，包括头部、侧边栏、底部等。在这个组件中，通过使用插槽来容纳具体页面的内容，就像我在之前的回答中展示的那样。 Router配置：在router/index.js中，为每个页面配置了component:Layout，这意味着每个路由都会使用Layout组件...

Vue2安装JSX支持 有时候，我们使用渲染函数（renderfunction）来抽象组件，而渲染函数使用Vue的h函数来编写Dom元素相对template语法差别较大，体验不佳，这个时候就派JSX上场了。然而在Vue3中默认是带了JSX支持的，而在Vue2中使用JSX，需要安装并使用Babel插件： @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props 安装脚本 npminstall@vue/babel-preset-jsx@vue/babel-helper-vue-jsx-merge-props 配置.babelrc文...

在vue中,默认情况下，一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时，会创建一个只带有初始状态的新实例。但是vue提供了keep-alive组件,它可以将一个动态组件包装起来从而实现组件切换时候保留其状态。本篇文章要介绍的并不是它的基本使用方法(这些官网文档已经写的很清楚了),而是它如何结合VueRouter来更自由的控制页面状态的缓存 全部缓存 我们先搭建一个Vue项目,里面有三个页面a,b,c,并给它们一些相互跳转的逻辑和状态 a页面 <template> <div> <div>A页面</di...

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 如何避免写出屎山，优雅的封装组件，在面试官面前大大加分，从这篇文章开始！ 保持单向数据流 大家都知道vue是单项数据流的，子组件不能直接修改父组件传过来的props，但是在我们封装组件使用v-model时，不小心就会打破单行数据流的规则，例如下面这样： <!-父组件--> <my-componentv-model="msg"></my-component> <!-子组件--> <template> <div> <el-inputv-model="m...

前言 🍊缘由 该大的不大，小程序包超出2M，无法上传发布 前段时间项目迭代时，因版本大升级，导致uniapp打包后小程序后，包体积大于2M。虽然将图片等静态资源压缩，体积大的资源放置cdn，在不懈的努力下，治标不治本，包体积还是不听话的长到2M以上。憋的实在没办法，遂将小程序分包，彻底解除封印，特来跟大家分享下如何将小程序分包，减小主包大小。 🎯主要目标 实现2大重点 如何进行小程序分包 如个根据分包调整配置文件 🍈猜你想问 如何与狗哥联系进行探讨 关注公众号【JavaDog程序狗】 公众号回复【入群】或者【加入】，便可成为【程序员学习交流摸鱼群】的一员，问题随便问，牛逼随便吹...

父子组件各自负责，在table中嵌套了子表格后，首次加载表格时，父组件会实例化子组件并传递参数，折叠后再次展开时，只会传递参数，子组件的数据刷新就属于子表格了。如 @@@code <templateexpandedRowRender="{record}"> <originIndex style="margin-left:55px;margin-right:50px;background-color:aliceblue" :unsionID="record.unsionID" /> </template> @@   可以提供按钮，用户手动刷...

1.初始化脚手架 　　1.1 全局安装@vue/cli npminstall-g @vue/cli 　　1.2切换到创建项目的目录，执行vuecreateprojectname 　　1.3选择符合自己要求的项进行Y/N，最终生成项目文件 2.脚手架文件结构 |-node_modules:存放下载依赖的文件夹 |-public:存放不会变动静态的文件，它与src/assets的区别在于，public目录中的文件不被webpack打包处理，会原 样拷贝到dist目录下 |-index.html:主页面文件 |-favicon.ico:在浏览器上显示的图标 |-src...

存储相关 Vuex和本地存储（如localStorage）以及cookie存储（如document.cookie）之间有一些关系，但它们是不同的概念，用于不同的目的。 Vuex： Vuex是Vue.js的官方状态管理库，用于在Vue.js应用程序中管理应用程序的全局状态。 Vuex主要用于在前端应用程序中存储和管理各种状态，包括用户信息、应用程序配置、数据缓存等。它提供了一个中心化的状态存储机制，可以让不同组件之间共享和同步状态。 Vuex的数据存储在内存中，通常不会持久化到硬盘上。 本地存储（localStorage）： localStorage是浏览器提供的一种本地存储机制，允许你...

项目结构 my-vue3-project ├─.env //默认环境变量 ├─.env.development //开发环境变量 ├─.eslintrc-auto-import.json //（autoimport变量，eslint配置）由auto-import插件生成 ├─.eslintrc.js //eslint配置文件 ├─.gitignore ├─auto-imports.d.ts //（autoimport变量，ts声明文件）由auto-import插件生成 ├─index.html ├─jsconfig.json ├─package-lock.json ├─...

1.安装vue-i18n npmivue-i18n-S 2.创建一个i8n的配置文件如：i18nConfig.js //配置vue-i18n实现国际化语言设置 import{createI19n}from'vue-i18n' importzh_cnfrom'../language/zh-CN' importen_usfrom'../language/en-US' importCONFIGfrom'../../confing' constmessages={ //目前只配置了中英两种语言 'zhCn':zh_cn, 'en':en_US } constlang=CONFIG.loc...