- 博客(48)
- 收藏
- 关注
RSS订阅原创 数组中的对象组织成一个树状结构
转换为带有层级关系的树形结构，并在输出时展示树的顶层结构和操作后的完整部门数据。数组转换成树形结构，并输出转换后的结果和原始的。这样可以通过部门ID快速查找部门对象。这段代码的主要目的是将扁平的部门数据。这里定义了一个包含部门信息的数组。，每个部门用对象表示，包括。对象，将每个部门对象。（部门名称）等属性。
2024-06-26 15:26:58
380
原创 前端 --- 检测当前页面(窗口)的可见性状态
事件的行为在不同的浏览器中可能有所不同，因此在使用时需要注意浏览器兼容性。此外，一些移动设备或电脑的节能模式也可能会影响页面的可见性状态，进而触发这个事件。当用户切换到其他标签页、最小化浏览器窗口、或者将浏览器窗口隐藏在其他窗口后面时，页面的可见性会发生变化，此时就会触发visibilitychange事件。事件是一个在浏览器中的 Document 对象上触发的事件，用于检测当前页面的可见性状态是否发生变化。
2024-05-30 11:17:47
287
原创 swiper 点击事件失效问题
在刚开始使用是 swiper 时，点击事件有时失效，这些个问题的原因是：swiper设置loop=true时，会生成虚拟slide进行填充，对这些虚拟slide元素进行操作是无效的。当然这样往往不符合我们的要求（我们当然既要又要啦），下面的方法可以解决loop为true时点击事件对于每一个展现出来的轮播图都生效。使用html自定义属性传值时，属性必须要data-开头，在data-之后必须要有字符串，且因为大小写会失效，所以多单词时建议用“-”连接。通过html属性的方式传递给swiper包裹的子元素。
2024-05-14 16:15:15
853
原创 scrollintoview方法滚动距离顶部距离
方法是 DOM API 的一部分，用于将元素滚动到视图中。这个方法接收一个布尔值参数。，指示是否需要滚动到视图的顶部。
2024-04-26 16:40:43
996
原创 vue: npm run serve报错Error: ENOSPC: System limit for number of file watchers reached
原因是vue热更新监听文件过多，取消对node_modules的监听就好了。
2023-12-01 15:45:35
888
原创 如何在 Vue 项目中解决 el-dropdown-item 点击无效的问题
当在 Vue 项目中遇到 el-dropdown-item 点击无效的问题时，可以通过在 @click 后添加 .native 来解决。
2023-11-29 17:03:21
1625
原创 vue3+ant design vue实现解析本地excel文件，导出为数组
vue3+ant design vue实现解析本地excel文件，导出为数组。
2023-08-04 09:45:41
253
原创 vuex 中dispatch 和 commit
需要注意的是，在 Vuex 中，actions 中不能直接修改 state 的状态，只能通过触发 mutations 来修改 state 的状态。方法用于触发 mutations，它接收一个 mutation 的 type 和 payload 作为参数。都是用于触发 Vuex 中的 actions 和 mutations 的方法，但是它们的作用和用法略有不同。方法用于触发 actions，它接收一个 action 的 type 和 payload 作为参数。需要注意的是，在组件中使用。
2023-07-21 17:05:07
1165
原创 在 ant Design 中取消点击 Enter 后的默认行为
使用antDesign-vue时，在表单中取消点击 Enter 后触发的默认表单提交操作
2023-07-14 17:16:04
339
原创 前端将UTC时间格式转化为本地时间格式
在前后端分离式开发中，后端返回的时间格式往往是 UTC格式的，即’2023-07-13T06:17:24.388947’，而我们需要用“YYYY-MM-DD HH:mm:ss”这种格式呈现给用户。
2023-07-14 16:51:58
579
原创 使用 Swagger 打开 .yaml 文件
你可以从 Swagger 官方仓库的 GitHub 页面下载最新的 Swagger UI ZIP 文件：https://github.com/swagger-api/swagger-ui/releases。文件，你可以使用 Swagger UI 或 Swagger Editor。无论你选择使用 Swagger UI 还是 Swagger Editor，都能帮助你打开和查看。在 Swagger UI 页面的右上角，你会看到一个输入框。将下载的 ZIP 文件解压缩到你想要放置 Swagger UI 的目录。
2023-07-04 17:01:19
2142
原创 使用map方法对数组进行遍历并返回一个新的修改后的数组，而不改变原数组
【代码】使用map方法对数组进行遍历并返回一个新的修改后的数组，而不改变原数组。
2023-04-12 18:05:59
544
原创 Vue监视数据的原理
1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()特别注意：Vue.set(）和 vm.$set()不能给vm 或 vm的根数据对象 添加属性！Vue.set(target，propertyName/index，value）或。通过setter实现监视，且要在new Vue时就传入要监测的数据。（1）.对象中后追加的属性，Vue默认不做响应式处理。2.Vue.set(）或vm.$set()3.如何监测数组中的数据？
2023-03-17 09:45:21
55
原创 Vue 中 computed 和 watch 的区别?
当需要进行数值计算,并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时都要重新计算。computed 是计算属性, 可以根据 data 中的数据成员,动态计算出一个新的数据成员(这个数据成员在 data 中并不存在), 计算属性的函数必须有返回值;watch 是监视器, 可以监视 data 中某一个数据成员的改变或路由中的某些属性的改变, 可以根据这个改变, 做一些其他操作(不仅仅局限于更新其他相关数据).watch是监听数据变换，没有缓存。
2023-03-15 08:29:22
139
原创 Vue router 路由
路由路由（英文：router）就是对应关系。前端路由：Hash 地址与组件之间的对应关系。SPA 与前端路由SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。 此时，不同组件之间的切换需要通过前端路由来实现。结论：在 SPA 项目中，不同功能之间的切换，要依赖于前端路由来完成！前端路由的工作方式① 用户点击了页面上的路由链接② 导致了 URL 地址栏中的 Hash 值发生了变化③ 前端路由监听了到 Hash 地址的变化
2022-05-16 20:20:10
139
原创 Vue2 自定义指令
什么是自定义指令vue 官方提供了 v-text、v-for、v-model、v-if 等常用的指令。除此之外 vue 还允许开发者自定义指令。vue 中的自定义指令分为两类，分别是：⚫ 私有自定义指令⚫ 全局自定义指令私有自定义指令在每个 vue 组件中，可以在 directives 节点下声明私有自定义指令。示例代码如下：directives:{// 为绑定 HTML 元素设置红色字体 color:{ // el 代表此时要绑定的 DOM 结构 bind(el){
2022-05-05 15:55:57
716
原创 Vue2 插槽 （默认插槽，具名插槽，作用域插槽）
插槽 (slot)作用：让父组件可以往子组件指定位置插入 html 结构，也是组件的一种通信方式。分类: 默认插槽，具名插槽，作用域插槽。默认插槽父组件（此时 Count 是一个组件）: <Count> <div> html 结构</div> </Count>子组件： <template> <div> &
2022-05-04 20:37:57
1807
原创 vue2 动态组件
什么是动态组件动态组件指的是动态切换组件的显示与隐藏。如何实现动态组件渲染vue 提供了一个内置的 组件，专门用来实现动态组件的渲染默认情况下，切换动态组件时无法保持组件的状态。此时可以使用 vue 内置的 组件保持动态组件的状态。例如：<button @click="coms = 'Left'">渲染 Left组件</button> <button @click="coms = 'Right'">渲染 Right组件</button>
2022-05-01 17:27:44
610
1
原创 js 数组的 forEach,some,every,reduce,sort 方法
forEach() 方法的使用forEach 遍历数组的每一项const arr = ['小红','倪大红','苏大强','我滴宝'] arr.forEach((item,index)=>{ if(item === '苏大强'){ console.log(index); // 2 } });some() 方法的使用从开始便利找到符合条件的便停止便利，相比 forEac
2022-05-01 17:14:18
396
1
原创 ref 引用
什么是 ref 引用ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用。每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs 指向一个空对象。使用 ref 引用 DOM 元素<h3 ref="myh3">MYRef 组件</h3><button @click="getRef">获取 $refs 引用</button>metho
2022-05-01 16:47:45
1008
2
原创 Vue 生命周期
生命周期是指一个组件从创建~ 运行 ~ 销毁 整个阶段，强调的是一个时间段1. 生命周期回调函数、生命周期函数、生命周期钩子。2. 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。常用的生命周期钩子：1.created: 发送ajax请求数据在created函数中调用methods中的方法，请求服务器数据，并且把请求数据转存到data中，供template模板t渲染时使用<template> <div c...
2022-04-24 15:05:12
671
原创 Vue组件
Vue 组件组成部分template 组件的模板结构 （DOM）script JS行为style 定义样式Vue组件的使用用 import 导入组件使用components注册组件以标签的形式使用刚注册组件注册全局组件以标签形式直接使用在 main.js 文件中添加import Count from '@/components/Count.vue'Vue.component('MyCount',Count)组件的 props可以提高组件的复用性数组格式使用 p
2022-04-24 14:32:10
1174
原创 vue2 过滤器，侦听器，计算属性，axios，vue-cli,vue组件
过滤器过滤器注意点1.要定义在 filters 节点下，本质上是一个函数2.在过滤器函数中，一定要有 return 值3. 在过滤器的形参中，可以获取到“管道符”前面待处理的那个值4. 如果全局过滤器和私有过滤器名字一致，此时按照就近原则，调用的是"私有过滤器"<div id="app"> <p>{{ message | capi }}</p> </div> <script src="./lib/vue-2.6
2022-04-22 13:08:39
1103
原创 初识vue2 了解相关指令
推荐大家安装的 VScode 中的 Vue 插件Vue 3 Snippets https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippetsVetur https://marketplace.visualstudio.com/items?itemName=octref.vetur什么是 vue构建用户界面用 vue 向 html 页面填充数据，非常方便。
2022-04-14 20:04:31
185
原创 轮播图 js
<div class="focus fl"> <!-- 左侧按钮 --> <a href="javascript:;" class="arrow-l"> <img src="./img/arrow-prev.png" alt=""> </a> <!-- 右侧按钮 --> <a href="javascript:;"
2022-01-20 12:00:06
46
原创 js放大镜
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
2022-01-15 19:54:56
54
原创 字符串的应用（二）
1，字符串内容的对齐方式s='hello,Python''''居中对齐'''print(s.center(20,'*'))'''左对齐'''print(s.ljust(20,'*'))print(s.ljust(10))print(s.ljust(20))'''右对齐'''print(s.rjust(20,'*'))print(s.rjust(20))print(s.rjust(10))'''右对齐，使用0进行填充'''print(s.zfill(10))pr.
2021-09-16 20:43:52
46
原创 字符串的应用（一）
1，字符串的驻留机制s1='#'s2='#'print(s1 is s2)a='asd'b='as'+'d'c=''.join(['as','d'])print(a is b)print(a is c)# 用 join 可以更方便的识别地址是否相同# 驻留机制通俗来说就是看 地址 一样否运行结果为：TrueTrueFalse2，字符串的查询操作举例：a='hello,hello'print(a.index('lo'))print(a..
2021-09-14 20:04:02
4867
2
原创 python 第八章
1 集合的使用首先集合元素不能重复且集合元素是无序的s={2,3,4,44,5,5,6,77,77}print(s,type(s))#{2, 3, 4, 5, 6, 44, 77} <class 'set'>2 集合的相关操作s={1,23,43,54,666}'''集合元素的判断操作'''print(1 in s)print(44 in s)print(23 not in s)'''集合元素的新增操作'''s.add(78)p...
2021-09-11 10:12:18
88
1
原创 python 第七章
1 了解元组首先元组是一个不可变序列，不可进行增删改查不可变序列有字符串元组可变序列有：列表字典另外append为添加函数#在列表 字典中 []sl=[10,34,44]print(sl)print(sl,id(sl),type(sl))# 在元组 字符串中（）s='hello's=s+'world'print(s)print(id(s))print(type(s))输出结果为：[10, 34, 44][10, 34, 44] ...
2021-09-11 10:04:04
42
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人