- 博客(174)
- 收藏
- 关注
RSS订阅
原创 一文搞懂Git版本工具常用的操作命令
比如我们对刚才添加的代码不满意，想通过Git命令回退到之前的版本。为了保证代码的同步，我们需要将远程代码拉到本地，git有2个命令可以将远程仓库的内容拉到本地，一个是git pull，可以将远程仓库的代码拉到本地仓库，同时合并到本地工作空间；如下图是整个合并分支的过程，红线上面的是branch0分支的test.md文件的内容，绿线上面是master分支中test.md文件的内容，前者比后者多3行内容（含1行空行），执行合并命令后再看master分支中test.md的内容已经与branch0中的一致了。
2024-01-11 11:03:38
292
原创 使用el-menu做侧边栏导航遇到需要点击两次菜单才展开
如上图，在我第一次点击选中“告警管理”这个菜单的时候，外联监测它会立马收缩起来，当我第二次点击时就不会收缩，而是展开状态，这是因为我的el-menu里default-active和el-submenu的index及el-menu-item的index属性不一致导致的，
2023-06-27 10:27:41
1792
原创 JSON.parse解析json出错的替代方案：小程序上解析json出bug，而在微信开发者工具上解析json正常。
组件进行解码，后通过JSON.parse()将变量还原。如下所示，请求拿到后端数据后需要将其缓存到本地，这里有个坑就是 wx.setStorageSync和wx.setStorage单个key存储的数据最大1mb，如果你拿到后端的数据大于1mb，你直接存本地就会导致真机上报错，而微信开发者工具上可能不会报错，所以你看到了我这里用了try catch , 除此之外，我还把数据通过路由wx.reLaunch携带传递给下一页。函数可把字符串作为 URI 组件进行编码。然后使用的话需要先引入这个util.js。
2023-06-13 11:19:14
1438
原创 Vue项目里防抖的使用
在Vue项目里，找到src下的directives目录，如果发现src下没有这个目录，那我们就自己建一个directives目录。有时候我们表单保存时，如果快速点击保存按钮，会出现多次提交保存同一表单到数据库的问题，这样会导致同一表单短时间重复提交多次，于是我们可以用到防抖。最后在入口文件main.js里引入自定义指令。
2023-05-27 09:42:34
914
原创 18个常用的 JS 工具函数助力高效开发
日常开发中，面对各种不同的需求，我们经常会用到以前开发过的一些工具函数，把这些工具函数收集起来，将大大提高我们的开发效率。
2023-05-06 09:28:20
225
原创 知道区id,如何根据区id获取到省id及市id
有时候，后端返回给我们的数据结构如下图所示，数组对象结构，省对应一个省id及省name,市对应一个市id及市name，区对应区id及区name。前端需要根据区id找到市id、市name、省id、省name，这个时候需要用到递归啦!详细代码如下： //vue文件里的template模板里 <template> <div @click.prevent="digui">递归例子</div> </template>
2021-07-12 22:07:55
1739
2
原创 类数组与数组的区别及相互转化，通过Array.from将类数组转为真正的数组
函数的arguments对象arguments是一个类数组对象，包含着传入函数中的所有实参集合，虽然arguments主要作用是保存函数实参，但这个arguments有一个callee属性，它是一个指针，指向拥有这个arguments对象的函数。函数也是对象，因此函数也有属性和方法，每个函数都包含length属性和prototype这个原型属性，其中，length表示函数希望接收的形参个数.类数组与数组的区别相同点：都可用下标访问每个元素，都有length属性。不同点：数组对象的类型是Array
2020-05-18 16:16:05
4030
原创 脚手架vue-cli和@vue/cli的搭建及区别
vue-cli与@vue/clivue脚手架版本目前有2,3,4.不管搭建哪个版本的脚手架，首先都需要安装node.node的安装node的安装我们可以直接去node官网(http://nodejs.cn/)下载安装，node安装完之后，node自带的包管理工具npm也就安装好了，我们win系统直接开始在cmd窗口输入node -v查看node版本号，如下图能看到版本号说明node安装成功:...
2020-04-14 22:17:03
14410
6
原创 echarts做折线堆叠面积图充满撑满整个div，并且要大屏的适配
这里，由于我们在main.js里vue原型上挂载了echarts,所以可以直接this.$echart来获取echart对象。
2024-06-11 16:54:45
702
原创 el-tree回显复选框时半选中和全选中的树
项目需求如下：当我点击“编辑”后，需要在tree树上全勾中和半勾中选项，由于后端接口返回的tree树是含了父级节点id的数组集合，所以我们回显时需要处理好这个全勾中和半勾中的问题。
2024-06-11 10:21:43
1149
原创 Vue2里CSS动画实际应用之transform属性和animation属性的使用
最近项目需要做个简单的动画，如上图，框出来的图片需要上下浮动在Y轴上来回循环的移动，这个要用到如下css代码：.active-image-7 { animation: 5s float7 linear infinite normal; } @keyframes float7{ 0% { transform: translateY(0px); } 50% { transform: tra
2024-06-04 11:05:04
319
原创 Pinia（五）: 了解和使用plugin
如果要添加外部属性, 添加来自其他库的类的实例, 添加其他非响应式的数据, 我们应该使用 markRaw 包装一下再传递给 pinia.
2024-05-31 13:47:01
847
原创 Pinia（四）: 了解和使用getters
大多数时间, getter 都仅仅依赖于 state, 但是有时候也会依赖其他 getter. 所以呢, 如果 getter 定义为非箭头函数就可以通过 this 拿到整个 store 实例, 但是由于 TS 又必须为函数返回值定义类型. 但是这并不影响将 getters 定义为箭头或者, 也不影响不使用 this 的 getters。getters 可以通过返回一个函数 A 来接收参数, 这个 A 的返回值也就是 getter 的值.直接在 getter 内部使用即可。直接通过 store 实例对象。
2024-05-30 11:52:19
283
原创 Pinia（三）: 了解和使用state
state 就是我们要定义的数据, 如果定义 store 时传入的第二个参数是对象, 那么 state 需要是一个函数, 这个函数的返回值才是状态的初始值.这样设计的原因是为了让 Pinia 在客户端和服务端都可以工作。我们可以通过 store 的 $subscribe 方法侦听 state 的改变. 使用 $subscribe 而不是 watch() 的好处是 $subscribe 总是在 state 修改之后执行一次.官方推荐使用箭头函数(()=>{ })获得更好的类型推断。
2024-05-30 11:43:38
1010
原创 Pinia（二）: 了解和使用Store
1.通过 defineStore 函数定义 store.defineStore 接收两个参数id: 唯一的标识, string 类型. Pinia 使用 id 与开发者工具建立联系.第二个参数可以是一个函数, 也可以是一个对象.defineStore 返回一个函数, 一般约定将返回值命名为 use…2.第二个参数: 对象类型如果要传入对象类型作为第二个参数, 在对象中可以配置state: 状态, 即数据. 📕注意 state 是一个函数, 函数的返回值才是真正定义的数据。
2024-05-30 11:31:25
1123
原创 Pinia（一）：安装pinia
Pinia安装与快速上手(Vue3@3.2.37+Vite@1.0.0)创建 src/store/index.ts。在 main.ts 中引入和使用。
2024-05-30 11:13:48
169
原创 Vue3路由的安装与使用（嵌套路由）
安装命令 npm install vue-router@4。在id后面添加括号,正则校验参数值为数字,输错跳404。src\router\index.ts下。id后面加个*号,传或不传都可以。
2024-05-30 10:54:00
256
原创 TS 进阶类型之联合类型、交叉类型、类型别名、 函数类型、对象类型、字面量类型、泛型、as断言
当 TS 不确定一个联合类型的变量到底是哪个类型的时候,可以定义多种类型，例如，一个变量既支持 number 类型，又支持 string 类型.对象的属性是可以有修饰符的，目前有两种修饰符，分别是 readonly 关键字对应的可选属性 和?联合类型 | 是指可以取几种类型中的任意一种，而交叉类型 & 是指把几种类型合并起来。类型是有父子关系的，子类型的值可以赋值给父类型，但是父类型的值是不能够赋值给子类型的.然后我们在每个属性前面加上了 readonly 这样所有的属性都是只读的了。
2024-05-27 18:12:21
461
原创 TS安装、TS八大基础类型、TS元组、枚举和断言
常数枚举与普通枚举的区别是，它会在编译阶段被删除，并且不能包含计算成员，假如包含了计算成员，则会在编译阶段报错.
2024-05-27 18:08:39
943
原创 深入理解Vue3里的defineModel
既然defineModel是声明了一个prop，那同样也可以定义prop的type、default。除了支持type和default，也支持required和validator，用法和定义prop时一样。defineModel也支持自定义修饰符，比如我们要实现一个将输入框的字母全部变成大写的uppercase自定义修饰符，同时也需要使用内置的trim修饰符。<template>// get我们这里不需要},});</script>
2024-05-13 18:27:55
1380
原创 Vue3里defineSlots与defineOptions
该API是在 < script setup> 里使用的。它还返回 slots 对象，该对象等同于在 setup 上下文中暴露或由 useSlots() 返回的 slots 对象。通过这个宏，可以指定组件中的插槽名称和对应的数据，这样在使用组件时，可以通过具名插槽的方式传递内容。defineSlots() （声明了slot的子组件才使用该api）虽然这个宏函数在 Vue 3 中并不是必须的，因为它主要是为了向后兼容，但它可以用来声明组件的 data、methods、computed 等选项。
2024-05-13 17:53:19
605
原创 Vue3里通过defineExpose编译宏可以指定允许父组件访问子组件哪些属性和方法，通过provide和inject 顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信
备注：顶层组件给底层组件提供的是数据时，底层组件只是渲染值；如果底层组件想要改传递的该值，需要顶层组件重新提供更改改数据的方法，底层组件获取到该方法后调用就能更改顶层组件传的值了。默认情况下在< script setup >语法糖下组件内部的属性和方法是不开放给父组件访问的，可以通过defineExpose编译宏指定哪些属性和方法允许访问。通过 ref标识 获取真实的 dom对象或者组件实例对象。传递方法：点击按钮，数字修改表示顶层组件的值已经修改。:底层组件通过inject函数获取数据。
2024-05-07 11:16:25
535
原创 Vue 引入config.js后别的js访问不到window对象下的属性
这个时候我们打印window.g就是undefined。因为vue的编译是以webpack为基础的 而index.html的引用在webpack编译之前 无法使用相对路径 而BASE_URL为内置全局变量 可以指向到项目真正的根目录下。这是因为<%= BASE URL %>代表 public文件夹下，<%= BASE_URL %>data/表示public/data 文件夹下。
2024-04-08 16:59:59
420
原创 Vue项目登录页实现获取短信验证码的功能
现在我们管理后台有个需求，就是登录页面需要获取验证码，用户可以输入验证码后进行登录。之前我们写过不需要调后端接口就获取验证码的方法，具体看。
2024-04-01 14:25:22
1153
原创 为什么不推荐用innerText，最好用innerHTML
innerHTML和innerText 这两个属性都是获取document对象的文本内容的，innerHTML指的是从对象的起始位置到终止位置的全部内容,包括Html标签。**同时，innerHTML 是所有浏览器都支持的，innerText 是IE浏览器和chrome 浏览器支持的，Firefox浏览器不支持。通过 chrome 浏览器打开，弹出内容为 “hello world” 和 “hello world”通过IE浏览器打开，弹出内容为 “hello world” 和 “hello world”
2024-04-01 11:50:05
114
原创 从A项目跳转到B项目，Vue两个不同项目之间实现跳转
这里的window.g.BackUrl是我们在B项目的public下的config.js里对跳回地址进行设置的值，也就是在B项目代码config.js里写上A项目的访问地址，方便调用，然后这里homePage也是A项目的首页路由地址，这样就实现了从B项目跳回A项目。最近遇到一个需求，就是有两个不同的项目，姑且叫项目A与项目B吧，前端技术栈都是Vue,现在登录成功A项目后希望点击A项目里某个按钮可以跳转到B项目里的某个页面，然后点击B项目里某个按钮可以跳回到A项目里的某个页面。
2024-04-01 11:23:38
829
原创 Vue动态设置控制表格列表展现列
最近遇到一个需求，表格列表默认不展示某一列，当我设置后可以展示该列，也可以展示和隐藏别的列，起到可以对整个表格列展示隐藏控制的效果，如下示例，默认不展示“单位名称”这一列，在我点击设置齿轮后可以看到，有“单位名称”这一列，但未打钩：当我勾中“单位名称”，去掉“地址”的勾中后，列表可以看到“单位名称”这一列，看不到“地址”这一列。达到了我们控制表格列展示隐藏的效果。这里用到的UI组件库是iview和elementUI。实现思路是：列表展示列我们用到了tableHead,然后我们定义了一个数组showLis
2024-03-22 11:58:08
570
原创 Vue项目使用process.env关键字及Vue.config.js配置解决前端跨域问题
由于我们的项目需要在不同环境下进行运行(开发，生产，测试等)，这避免我们需要多次的去切换请求的地址以及相关的配置，vue-cli2是可以直接在config文件中进行配置的，但是vue-cli4和vue-cli3已经简化了，没有config文件怎么办？既然知道项目运行的是那个模式，是不是我们就可以在不同模式下运行不同的变量信息，如开发环境使用端口8080，线上（生产）环境的端口是80，这个时候你会想，我知道不同模式配置不同信息，那信息配置在那个文件呢。需要注意的是，以上方法适用于开发环境下解决跨域问题。
2024-03-19 17:43:11
665
原创 git推送代码报错error: failed to push some refsto‘远程仓库地址’解决办法，以及撤销 git rebase变基命令git rebase --abort的使用
于是我们的仓库就有了README.m和.gitignore文件，然后我们把本地项目关联到这个仓库，并把项目推送到仓库时，我们在关联本地与远程时，两端都是有内容的，但是这两份内容并没有联系，当我们推送到远程或者从远程拉取内容时，都会有没有被跟踪的内容，于是你看git报的详细错误中总是会让你先拉取再推送，但是拉取总是失败。我们在创建仓库的时候，都会勾选“使用Reamdme文件初始化这个仓库”这个操作初识了一个README文件并配置添加了忽略文件。最近在把代码推送到远端仓库时遇到一个问题，推送不上去，报错。
2024-03-15 09:47:40
100
原生js实现淘宝放大镜效果
2023-10-19
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人