vue
文章平均质量分 80
以实战为线索,学习vue
卸载引擎
世上本没有码,搬的人多了便有了码。
展开
-
【Vue3】vue3快速实现响应式数据恢复初始值。浅拷贝与深拷贝的应用。
有一个经常遇到的场景就是,一个表单最后一列有个编辑按钮,点击编辑按钮之后打开表单弹窗,修改其中的数据,但是如果此弹窗再作为新增弹窗打开的时候,弹窗数据会缓存上次编辑的数据。在 Vue 3 中,由于引入了新的响应式系统,重置数据到初始值的方法与 Vue 2 不同。当你使用 reactive 创建响应式对象时,一个常见做法是保留初始数据的引用,以便在需要时恢复数据。原创 2024-06-03 16:05:53 · 1362 阅读 · 0 评论 -
【uniapp】uniapp小程序中实现拍照同时打开闪光灯的功能,拍照闪光灯实现
## 一、需求前提特殊场景中,需要拍照的同时打开闪光灯,(例如黑暗场景下的设备维护巡检功能)。起初我是用的`uviewui`中的`u-upload`组件自带的拍照功能,但是这个不支持拍照时打开闪光灯,也不支持从通知栏中打开闪光灯。## 二、解决方案采用组合形式解决:1. 使用uniapp官方内置组件中的 [媒体组件:camera](https://uniapp.dcloud.net.cn/component/camera.html) 实现闪光灯拍照,`uni.createCameraConte原创 2024-03-08 15:44:58 · 1186 阅读 · 0 评论 -
【Vue2】vue2中自定义组件实现双向绑定的写法,v-model在自定义组件中的实现
封装一些小组件的时候常常会用到双向数据绑定,下面简单总结一下用法原创 2024-03-08 15:13:29 · 1406 阅读 · 0 评论 -
【uniapp】uni-app开发手持PDA上的激光扫码程序,uniapp主动触发pda激光扫码(附完整代码)
工业级智能手机(PDA),PDA设备是Android9系统,带有激光扫码灯,现在要使用uniapp开发安卓程序,并实现在PDA设备上的激光扫码程序。// 在页面展示时触发,用于处理页面显示相关的逻辑,可能会多次执行,包括页面首次展示和从后台切换到前台时。// init传入一个回调函数做参数,在扫描时候会将数据传入此方法里,然后处理此方法的自定义业务逻辑。// onLoad 是在页面加载时触发,用于页面的初始化操作,只执行一次。激光扫码效果见如下视频。原创 2024-03-01 10:18:59 · 3031 阅读 · 12 评论 -
【Vue】使用elementPlus的table时,实现自定义tooltip效果,单行显示,超出则显示省略号,鼠标移入后,当文字数量大于20则换行自定义展示的tooltip
使用elementPlus的table时,实现自定义show-overflow-tooltip效果,文字在table中单行显示,超出宽度则显示省略号,鼠标移入后,当文字为30个字以内的时候单行显示tooltip,超出30个字则显示可以换行自定义展示的tooltip。原创 2023-08-15 14:52:25 · 4656 阅读 · 2 评论 -
【Vue3】Vue3中的组合式API是什么?hook是什么?什么是“组合式函数”?项目中如何使用自定义 hook 函数?
组合式API(Composition API)是一系列 API 的集合,使我们可以使用函数而不是声明选项的方式书写 Vue 组件。响应式 API:例如 ref() 和 reactive(),使我们可以直接创建响应式状态、计算属性和侦听器。生命周期钩子:例如 onMounted() 和 onUnmounted(),使我们可以在组件各个生命周期阶段添加逻辑。依赖注入:例如 provide() 和 inject(),使我们可以在使用响应式 API 时,利用 Vue 的依赖注入系统。原创 2023-07-22 10:36:35 · 880 阅读 · 1 评论 -
【JS】jsx/tsx是什么?为什么 Vue3 的组件库都在使用 jsx/tsx?如何在Vue3中使用 jsx/tsx?
前几天得到一个疑问,为什么 React 要用 JSX 语法,这样显得代码好像“很耦合”。按照传统应推荐 html、js、css 模版分离,这样设计的优越性到底在哪里?原创 2023-03-10 11:41:00 · 2862 阅读 · 7 评论 -
【Vue】浅谈vue2、vue3响应式原理,vue中数组的响应式,响应式常见问题分析
Vue 最标志性的功能就是其低侵入性的响应式系统。组件状态都是由响应式的 JavaScript 对象组成的。当更改它们时,视图会随即自动更新。vue2使用Object.defineProperty实现响应式。vue3使用Proxy实现响应式。原创 2023-02-16 16:37:46 · 2120 阅读 · 1 评论 -
【Web通信】WebSocket详解:WebSocket是什么?如何使用WebSocket?在Vue中封装WebSocket(心跳监测)。nginx配置websocket。
`WebSocket` 是一种基于`TCP`的**全双工**通信协议,它提供了一种在浏览器和服务器之间建立持久连接来交换数据的方法。数据可以作为“数据包”在**两个方向**上传递,而无需中断连接也无需额外的 `HTTP` 请求。- 使用场景:对于需要连续数据交换的服务,例如网络游戏,实时交易系统等,WebSocket 尤其有用。最典型的场景就是聊天室。原创 2022-11-21 17:27:38 · 1559 阅读 · 1 评论 -
【Vue】vue3.2中使用pdf.js踩坑:Cannot read from private field---pdf.js使用详解
本人项目中使用的是`vue3.2`+`vite`+`ts`,现在打算使用pdf.js库来加载预览pdf文件,下面是我的一些踩坑记录!真的太难受了!!!原创 2022-10-17 17:14:47 · 3097 阅读 · 9 评论 -
【Vue3】 vite获取.env文件中配置的环境变量
// 根据当前工作目录中的 `mode` 加载 .env 文件// 第二个参数:process.cwd()表示返回运行当前脚本的工作目录的路径(current work directory)// 设置第三个参数为 '' 来加载所有环境变量,而不管是否有 `VITE_` 前缀。const env = loadEnv(mode.mode, process.cwd(), '');原创 2022-09-19 11:07:04 · 10951 阅读 · 5 评论 -
【vue】vue3中状态管理Pinia(Vuex5)使用快速上手
Pinia和Vuex一样都是是vue的全局状态管理器。其实Pinia就是Vuex5,只不过为了尊重原作者的贡献就沿用了名字Pinia。关于vuex的介绍可以查看我之前的文章。原创 2022-09-14 11:41:54 · 944 阅读 · 0 评论 -
【Vue3】vue3中组合式Api的setup写法快速入门上手起步
使用setup语法糖和setup函数对比,使用语法糖的代码整洁了好多,不会有那么多的对象嵌套。也不用做什么额外的return,代码也简化了不少。原创 2022-08-15 16:42:25 · 3013 阅读 · 0 评论 -
前端token知识梳理:token如何存储?token过期如何处理?如何无感刷新token?
弄两个token,一个负责鉴权得token:access_token,一个负责刷新得token:refresh_token,每次请求的时候都带上这两个token,后端拦截器判断,先判断鉴权access_token是否有效和过期,如果有效的话,就允许访问。如果过期了,就判断刷新refresh_token是否有效,如果有效,就返回指定状态码,然后让前端根据这个状态码去吊用刷新token接口。如果刷新token失效了,就提示需要重新登录!...原创 2022-06-28 16:21:04 · 9749 阅读 · 4 评论 -
【axios】封装axios
Axios是一个基于 promise的 HTTP`库,可以用在浏览器和node.js中。(本文围绕XHR)axios提供两个http请求适配器,XHR和HTTP。XHR的核心是浏览器端的XMLHttpRequest对象;HTTP的核心是node的http.request方法。原创 2022-06-27 16:12:15 · 3163 阅读 · 0 评论 -
vue/js操作dom全屏切换,全屏打开dom.requestFullscreen();
if (dom.requestFullscreen) { dom.requestFullscreen(); } else if (dom.webkitRequestFullScreen) { dom.webkitRequestFullScreen(); } else if (dom.mozRequestFullScreen) { dom.mozRequestFullScreen(); } else { dom原创 2022-06-23 16:16:11 · 509 阅读 · 0 评论 -
【Vue】Vue中的管道、过滤器的使用(Vue中filter函数)
Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化(将数据转化为我们想要的格式)。过滤器可以用在两个地方:双花括号插值v-bind 表达式 (从 2.1.0+ 开始支持)过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符号|指示:<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | formatId">&原创 2022-05-27 15:28:45 · 3691 阅读 · 0 评论 -
【Vue】Vue中获取当前点击元素的父元素、子元素、兄弟元素。如何隐藏指定元素的父级元素?
Vue如何获取当前点击元素?获取父元素、子元素、兄弟元素呢?如何隐藏指定元素的父级元素?通过绑定点击事件:例如:<button class="delete-btn" @click="delete($event, roomItem)">删除</button>/** * @description: 删除指定的房间 */ delete(event:any, roomItem:any) { let currentTarget = event.currentTarge原创 2022-05-23 17:11:36 · 1336 阅读 · 0 评论 -
【Vue】vue2.6插槽slot使用详解(更新v-slot用法总结)
vue2.6插槽slot使用详解(更新v-slot用法总结)0、 插槽简介1、匿名插槽(默认插槽default)2、具名插槽(name)2.1 对 v-slot:todo 做操作:3、作用域插槽3.2 解构插槽Prop3.3 独占默认插槽(当被提供的内容只有默认插槽时,组件的标签才可以被当作插槽的模板来使用)总结todo-list实例在 2.6.0 中,具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot指令)。它取代了slot和 slot-scope这两个目前已被废弃但未被移除且仍在文档原创 2022-05-16 17:03:41 · 3989 阅读 · 1 评论 -
【Vue】前端状态管理之Vuex全解析
Vuex状态管理全解析:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。原创 2022-04-19 21:43:28 · 1049 阅读 · 1 评论 -
【Vue】vue中的静态资源处理---vue项目中路径使用的@和~的区别
vue中的静态资源处理:vue项目中路径使用的@和~的区别?在我们的项目结构里,有两个静态文件的路径,分别是:`src/assets` 和 `static/`。那这两个到底有什么区别呢?原创 2022-03-24 09:48:37 · 2152 阅读 · 1 评论 -
proxy代理-如何配置 vue.config.js 解决跨域(生产中)?
proxy代理的原理是什么proxy代理-如何配置 vue.config.js 解决跨域(生产中)?原创 2022-03-19 17:41:34 · 4983 阅读 · 0 评论 -
【Vue】vue2.6使用TS之vue-class-component与vue-property-decorator使用详解
(1)vue-class-component 是官方出品; vue-property-decorator 是社区出品;(2)vue-class-component 提供了Vue、Component等;(3)vue-property-decorator深度依赖了vue-class-component,拓展出了更多操作符:@Prop、@Emit、@Inject、@Model、@Provide、@Watch;原创 2022-03-06 15:11:05 · 4789 阅读 · 4 评论