n17742637334的博客

原创 微信小程序video标签控件隐藏（播放 全屏 进度条 声音 ios静音播放）

【代码】微信小程序video标签控件隐藏（播放 全屏 进度条 声音 ios静音播放）

原创 Echarts配置

watchEffect 是 Vue 3 中的一种响应式副作用函数，它会在依赖的数据（这里是 bingtu.value）变化时自动执行。如果 bingtu.value 有数据，chart.setOption(option) 就会被调用来更新饼图。这样可以确保图表只在数据加载完成后更新。如上面的代码所示，由于我的数据类型和他想要的数据类型不一致，所以需要进行修改，便利渲染数据。首先安装 npm install echarts。怎么替换为获得数据？，想要修改的内容在里面修改配置。在里面有option，是。

原创 vue点击全屏

在需要的地方调用就好。

原创 vue-next-admin修改配置指南

先使用上面的ico转换工具把图片转换为ico，然后去public文件夹把下面的ico文件删除（复制下名字），然后把自己的ico图片粘贴上去，修改为老图片的名字即可。然后把后面的几个文件拉到项目文件夹里面,例如我在这在assets文件夹下建了一个icon文件夹用于存放，然后在min.js引用，最后直接使用。在src-stores-themeConfig.ts文件夹里面修改对应的颜色即可，修改完毕之后记得一键恢复默认，否则无变化。先把想要的图标存到我的项目然后下载。找到对应的代码修改即可。

原创 百度富文本编辑器配置（vue3）

UEditor 并不支持通过 npm 的方式来安装，vue-ueditor-wrap 也只是一个 Vue 组件，组件本身并不是。目录下，比如下面是一个由 Vue CLI（v3+）创建的项目，静态资源目录就是 public。pubilc 内不要多层嵌套文件 不然会找不到所在的资源，可能会出现如下报错。将解压的文件夹重命名为 UEditor 并移动到你项目的。了解 UEditor 基本使用，请参考。的配置问题，安装配置流程以及如何解决的。今天分享一下我做的项目里面的一个百度。4.v-model 数据绑定。

原创 uniapp录制语音

开始录音：通过开始录音。停止录音：通过停止录音，并获取录音文件路径。管理录音时长：使用定时器实时更新录音时长。播放录音：通过播放录音。清理资源：在组件销毁时，销毁音频上下文，释放资源。

原创 微信小程序地图开发总结-规划路线

在本篇文章中，我们使用腾讯地图 API 和微信小程序实现了一个简单的路径导航功能，展示了如何获取用户当前位置，计算从起点到终点的路径，并在小程序中展示该路径。通过结合腾讯地图的方向查询 API 和微信小程序的地图组件，我们可以快速地开发出强大的地图导航功能。如果你对地图开发感兴趣，可以深入学习腾讯地图的更多 API 功能，例如：兴趣点查询、周边搜索、路线规划等。中，首先引入腾讯地图 SDK，之后我们可以在页面中使用该 SDK 进行路径规划。获取当前用户的位置，再调用腾讯地图的。组件来展示地图，并通过。

原创 ES6新增特性使用

/ 输出: [1, 2, 3, 4, 5, 6]// 创建一个新的数组，内容与 arr 相同。// 在原数组前后插入元素。// 输出: [0, 1, 2, 3, 4]// 输出: Hello, Alice!// 按顺序将数组元素赋值给变量。// 输出: [1, 2, 3]

原创 4. React 性能优化技巧：如何让你的应用更快

React.memo和useMemo是优化 React 渲染性能的常用方法。懒加载和代码分割有助于减少首屏加载时间，提高用户体验。

原创 3. React Hooks：为什么你应该使用它们？

Hooks 是一组可以让函数组件拥有状态、生命周期功能的 API。useState：管理状态useEffect：执行副作用操作（如数据请求、DOM 更新等）useContext：访问 React 上下文useRef：访问 DOM 元素或保存可变值使用useState和useEffect，可以让你在函数组件中实现类组件的功能。React Hooks 使得函数组件变得更加强大，并且让你的代码更加简洁和可复用。

原创 深入理解 React 状态管理：useState 和 useReducer

useState是最常用的状态管理钩子，适用于简单的状态管理。useReducer更适合复杂的状态管理，尤其是当状态逻辑需要根据多个不同的 action 更新时。通过掌握这两种钩子，你将能更高效地管理 React 组件的状态。

原创 React 初学者指南：从零开始构建第一个 React 应用

React 是一个用于构建用户界面的 JavaScript 库，它能够让我们高效地构建复杂的 UI。对于 React 初学者来说，最重要的就是理解它的基本概念以及如何开始使用它。本文将引导你从零开始构建你的第一个 React 应用。

原创 react跳转传参的方法

首先下载命令行 npm react-router-dom。：这是从其他页面传递过来的状态数据。提供的一个钩子，用于获取当前路由的位置对象。前面跳转的是页面 后面传的是你需要传的参数。组件导航时，可以传递一个。这样就可以接受参数啦。

原创 vue中nextTick的作用

Vue.js利用浏览器的异步队列机制，将DOM更新操作放入到一个队列中，然后通过异步任务的方式执行队列中的任务。综上所述，nextTick是Vue.js中一个非常实用的方法，它允许开发者在DOM更新完成后执行特定的操作，从而避免在DOM更新过程中进行不必要的计算和操作，提高应用的性能和可维护性。这些任务包括更新DOM以及执行nextTick队列中的回调函数。由于异步任务是在下一个事件循环中执行的，因此在执行nextTick的回调函数时，DOM已经更新完成，可以安全地执行相关操作。nextTick的作用。

原创 pinia简介

通过 Pinia，开发者可以更加轻松和高效地管理应用程序的状态，提高开发效率和代码质量。Pinia 的 API 设计简洁明了，抛弃了 Vuex 中的 mutations，只保留了 state、getters 和 actions，使得代码编写更加容易和直观。使用 npm 或 yarn 安装 Pinia，例如：npm install pinia 或 yarn add pinia。Pinia 同时支持 Vue 2 和 Vue 3，使得开发者可以在不同版本的 Vue 项目中使用相同的状态管理库。

原创 程序员表白专用(砰砰爱心)

【代码】程序员表白专用(砰砰爱心)

原创 input的占位符颜色修改

原创 vue组件的基础功能使用

写好之后使用 :data进行数据绑定，mydata是请求过来的数据源，之后如果需要搜索什么的过滤可以替换，后面的内容currentpage4是页数,pagesize是每页多少条数据。可以使用computed属性。

原创 vue之子组件向父组件传值

父组件通过 :message="parentMessage" （前面的message是自定义的名字，可以在子组件使用defindeprops接收，后面的parentmessage是要传递的内容）向子组件传递数据，子组件通过 defineProps 来接收数据。1.父组件通过 props 向子组件传值。

原创 computed与直接计算的区别

computedcomputed是，用来基于响应式数据进行缓存计算。watchwatch是观察者，用于监听数据的变化，并在数据变化时执行回调操作.不仅是为了监听数据变化，还可以在数据变化时执行副作用操作。

原创 Vue中的导航守卫有哪三种？分别有什么作用

使用router.beforeEach注册，接收三个参数to（目标路由对象）、from（当前导航正要离开的路由对象）和next（一个函数，用于控制路由的跳转）。Vue Router中的导航守卫主要分为三种：全局前置守卫、全局解析守卫和全局后置钩子。全局的清理操作：在导航成功完成后执行，用于执行一些全局的清理工作，如页面统计、日志记录等。确保异步操作完全解析：在导航被确认之前执行，确保所有异步路由组件和守卫都被解析完成。全局的权限验证：在每次路由跳转前进行全局的权限验证，确保用户有权限访问目标路由。

原创 vue之常用组件网站

vue移动端Vant 4NutUIcube-uivue电脑端OpenTinyVuetifyNaive UIreact移动端Ant DesignNutUIreact vant。

原创 vue解决跨域问题

原创 vue之子组件向父组件传值

参考博客先挂上props。

原创 vue的组件使用

1.安装element plus。

原创 节流与防抖

给大家总结一下，老规矩，不喜欢打字，上干货，开箱即用。

原创 vue跳转传参

path 跳转只能使用 query 传参 ,name 跳转都可以。query ：获取来自 search 部分的参数。params ：获取来自动态路由的参数。

原创 vue之vant上传图片

创建formData对象,然后构建用于文件上传的表单数据,使用append指定上传数据，最后请求接口上传。1.引入组件之后，使用:after-read="afterRead"事件（

原创 vue之vant上传图片

2.再回调函数创建formData对象,然后构建用于文件上传的表单数据,使用append指定上传数据，最后请求接口上传。1.引入组件之后，使用:after-read="afterRead"事件（文件读取前的回调函数）

原创 vue 封装接口

2. 在science.is页面引入axions。然后再把你请求的放进这个里 进行一个return。1.新建api文件夹、新建接口对应的js。在你需要用的页面导入你起的index名字。

原创 axios拦截器

1.新建一个utils文件夹，新建一个request.js。2.在request.js中写入以下模板。最后在你使用的页面使用。

原创 vue从0开始的项目搭建(含环境配置)

作为vue项目的文件夹， 在此文件夹中空白处按shift键同时点击鼠标右键，选择在此处打开Powershell窗口。2.在命令行中输入以下命令： npm create vue@latest 回车,出现下图这种一直回车。右键文件夹,选择vscode打开(如果没有vscode可以查看这个链接。下次给大家讲解进去之后的基础配置与作用,我是阿福,请多多关照!然后ctrl+j 打开终端,输入npm run dev即可运行。那么先右键最顶部文件夹+打开终端输入npm run dev即可。注意:如果报错如下图。

原创 简述vuex中的常用属性及作用

使用方式：在Vuex的store中定义modules，然后在组件中通过this.$store.moduleName.state/getters/mutations/actions来访问模块的状态或方法。作用：用于从state中派生出一些状态，类似于Vue组件中的计算属性。使用方式：在Vuex的store中定义state，然后在组件中通过this.$store.state.xxx来访问这些状态。作用：用于存储和管理应用的状态（即数据），类似于Vue组件中的data属性，但它是全局的，所有组件都可以访问。

原创 Vuex数据刷新丢失如何处理

例如，vuex-persistedstate是一个常用的Vuex插件，它可以将Vuex的状态持久化到localStorage或sessionStorage中。Vuex的状态数据是保存在运行内存中的，当页面刷新时，内存中的数据会被清除。可以通过监听页面的beforeunload和load事件，在页面卸载前将状态保存到本地存储中，并在页面加载时从本地存储中恢复状态。在创建Vuex store时，将插件添加到plugins数组中，并配置存储选项（如使用localStorage还是sessionStorage）。

原创 Vuex数据刷新丢失如何处理

例如，vuex-persistedstate是一个常用的Vuex插件，它可以将Vuex的状态持久化到localStorage或sessionStorage中。Vuex的状态数据是保存在运行内存中的，当页面刷新时，内存中的数据会被清除。可以通过监听页面的beforeunload和load事件，在页面卸载前将状态保存到本地存储中，并在页面加载时从本地存储中恢复状态。在创建Vuex store时，将插件添加到plugins数组中，并配置存储选项（如使用localStorage还是sessionStorage）。

原创 Vue中双向数据绑定是如何实现的？底层原理简介

Vue中的双向数据绑定是通过一种称为“响应式系统”的机制实现的，它允许数据对象与DOM保持同步。这种机制的核心在于Vue如何观察数据的变化，并在数据变化时更新DOM，以及在DOM变化时更新数据。它订阅了Observer中属性值变化的消息，并在收到消息时触发Compiler中对应的更新函数，从而更新DOM。同时，它会为每个指令对应的节点添加监听数据的订阅者，以便在数据变化时能够更新DOM。当组件被挂载时，Compiler会解析模板中的指令，并为每个指令对应的节点绑定更新函数和Watcher。

原创 单页面应用和多页面应用区别及优缺点

综上所述，单页面应用和多页面应用各有其优缺点，选择哪种应用方式需要根据项目的具体需求、开发团队的实际情况以及目标用户的使用习惯等因素进行综合考虑。单页面应用：只有一个HTML页面，通过JavaScript动态更新页面内容，实现页面的“跳转”实际上是局部资源的刷新，而非整页刷新。多页面应用：由多个独立的页面组成，每个页面都需要加载完整的HTML、CSS和JS等资源。页面跳转时，整个页面会重新加载。单页面应用：由于不需要重新加载整个页面，减少了白屏现象和页面切换时的等待时间，提高了用户体验。

原创 前端去除富文本标签

【代码】前端去除富文本标签。

原创 对比state和props的区别？

作用范围：state是私有的，只属于创建它的组件，不能在组件之间共享（除非通过提升状态到共同的父组件或使用React Context等高级特性）。当父组件的props发生变化时，React会将新的props传递给子组件，并触发子组件的重新渲染（如果子组件的props是其渲染输出的依赖之一）。来源：state是由组件自身创建和管理的，通常在组件的构造函数（constructor）或类组件的初始化阶段设置。来源：props的值来源于父组件，是父组件在调用子组件时传递给子组件的。3. 作用范围与用途。

原创 为什么调用 setState 而不是直接改变 state

这种方式确保了状态的正确合并，避免了直接修改状态可能导致的数据覆盖或丢失问题。异步更新与批量处理：setState是异步执行的，React会对多次连续的setState调用进行合并和优化，从而避免不必要的多次渲染，提高性能。通过setState更新状态，就是以一种声明式的方式告诉React组件的状态需要变化，而React会负责处理具体的渲染和更新逻辑。在React中，调用setState方法而不是直接改变state的原因涉及多个方面，包括性能优化、状态管理的可预测性、React的设计理念等。