- 博客(44)
- 收藏
- 关注
原创 v-for中的key是什么作用
在使用v-for进行列表渲染时,我们通常会给元素或者组件绑定一个key属性。这个key属性有什么作用呢?我们先来看一下官方的解释:key属性主要用在Vue的虚拟DOM算法,在新Inodes对比时辨识VNodes;如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法;而使用key时,它会基于key的变化重新排列元素顺序,并且会移除/销毁key不存在的元素;
2024-05-06 18:46:17
489
原创 v-show和v-if的区别
v-show是不支持template;v-show不可以和v-else-起使用;v-show元素无论是否需要显示到浏览器上,它的DOM实际都是有渲染的,只是通过CSS的display属性来进行切换;v-if当条件为false时,其对应的元素压根不会被渲染到DOM中;如果我们的元素需要在显示和隐藏之间频繁的切换,那么使用v-show;如果不会频繁的发生切换,那么使用v-if;
2024-05-06 10:08:15
160
原创 vue3 v-on的用法
prevent-调用 event.preventDefault().stop-调用 event.stopPropagation().passive-{passive: true}模式添加侦听器。.capture-添加事件侦听器时使用 capture 模式。.self-只当事件是从侦听器绑定的元素本身触发时才触发回调。.{keyAlias}-仅当事件是从特定键触发时才触发回调。.middle-只当点击鼠标中键时触发。.right-只当点击鼠标右键时触发。.left-只当点击鼠标左键时触发。
2024-04-30 15:37:43
287
原创 CDN引入Vue3
注意:我们打开bootcdn网站,发现会有很多版本的,例如vue.global.prod.js、vue.esm-browser.min.js等。注意几个关键词,其中global是指提供一个全局的Vue属性、esm-browser是可以使用。在html的内引入,好似下面这样,我这边使用了。,因为比较顺眼,主要官网中提供的CDN很容易挂。
2024-04-25 08:57:56
892
2
原创 ES6中的Set集合
接口,所以可以使用「扩展运算符」和[for…它类似于数组,但成员的值都是唯一的集合实现了 iterator。4)has,检测集合中是否包含某个元素,返回boolean值。3)delete,删除元素,返回 boolean 值。ES6 提供了新的数据结构Set(集合)。2)add,增加一个新元素,返回当前集合。1)size,返回集合的元素个数。5)clear,清空集合。
2024-03-21 15:26:58
560
原创 苹果iOS证书(.p12)、描述文件(.mobileprovision)和推送证书(.p12)申请
下图所示:Bundle ID 选择 “Explicit”,在 Description 中填写描述,然后填写 Bundle ID,Bundle ID 要保持唯一性,建议填写反域名加应用标识的格式 如:“com.xxxx.xxx”, 接下来需要选择应用需要使用的服务(如需要使用到消息推送功能,则选择“Push Notifications”),然后点击 “Continue”。打开“应用程序”–>“实用工具”–>“钥匙串访问”–>“证书助理”中选择“从证书颁发机构请求证书”。如果没有帐号可以打开。
2024-03-20 16:12:39
3177
原创 let和const的特性
2、块级作用域 :if else while for 里面都不能在外面读取。4、对于数组和元素的修改,不算做对常量的修改,不会报错。3、不影响作用域链:向上一级寻找变量。1、变量不能重复声明。2、常量的值不能修改。
2024-03-15 13:26:15
359
原创 Vue3调用钉钉api,内嵌H5微应用单点登录对接
钉钉内嵌H5微应用单点登录对接https://open.dingtalk.com/document/isvapp/obtain-the-userid-of-a-user-by-using-the-log-free前端需要的代码1、安装 dingtalk-jsapinpm install dingtalk-jsapi2、在所需页面引入import * as dd from 'dingtalk-jsapi'; // 引入钉钉api3、接收corpIdconst corpId = route
2024-03-11 18:07:23
1450
原创 async函数和await
async函数是使用async关键字声明的函数。async函数是AsyncFunction构造函数的实例,并且其中允许使用await关键字。async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为,而无需刻意地链式调用promise。
2024-02-27 14:39:33
351
原创 Promise链式调用
概念:依靠then()方法会返回一个新生成的Promise对象特性。继续串联下一环任务,直到结束。细节: then()回调函数中的返回值,会影响新生成的 Promise对象最终状态和结果。好处:通过链式调用,解决回调函数嵌套问题。
2024-02-27 11:11:19
353
原创 JS 异常处理
我们可以通过try / catch 捕获错误信息(浏览器提供的错误信息)3.Error对象配合 throw使用,能够设置更详细的错误信息。try:试试 catch:拦住 finally:最后。1.throw抛出异常信息,程序也会终止执行。2.throw后面跟的是错误提示信息。调试界面,按F8停止调试。
2024-02-01 17:48:00
427
原创 JS浅拷贝和深拷贝
如果是简单数据类型拷贝值,引用数据类型拷贝的是地址(简单理解:如果是单层对象,没问题,如果有多层就有问题)如果一个函数在内部可以调用其本身,那么这个函数就是递归函数。3.通过JSON.stringify()文现。拷贝的是对象,不是地址。1.通过递归实现深拷贝。
2024-02-01 16:36:49
507
原创 [Violation] Added non-passive event listener to a scroll-blocking ‘touchstart‘ event. Consider marki
【代码】[Violation] Added non-passive event listener to a scroll-blocking ‘touchstart‘ event. Consider marki。
2024-01-30 14:25:23
973
原创 includes()函数
的搜索,以确定是否可以在一个字符串中找到另一个字符串,并根据情况返回 true 或 false。position:可选,在字符串中开始搜索 searchString 的位置。searchString:要在 str 中搜索的字符串。includes() 方法执行。
2024-01-30 09:27:36
619
原创 startsWith()函数
String 的 startsWith() 方法用来判断当前字符串是否以另外一个给定的子字符串开头,并根据判断结果返回 true 或false。searchString 期望被找到的起始位置(即 searchString 的第一个字符的索引)。searchString:要在该字符串开头搜索的子串。position:可选。
2024-01-30 09:13:46
657
原创 JS Array.from()
Array.from() 静态方法从可迭代或类数组对象创建一个新的浅拷贝的数组实例。简单来说就是把伪数组转换为真数组。
2024-01-29 16:50:15
390
原创 JS every()的应用
every() 方法测试一个数组内的所有元素是否都能通过指定函数的测试。如果每个数组元素都符合条件,则为 true。否则为 false。
2024-01-29 16:17:20
390
原创 VUE2页面刷新解决store数据丢失的问题
监听 beforeunload 这个方法,beforeunload 在页面刷新时触发,监听 beforeunload 让页面在刷新前将数据存到 sessionStorage 中。然后,在页面刷新时,读取 sessionStorage 中的数据到 store 中。刷新页面时,vue实例重新加载,从而,store也被重置了。localStorage: 是永久存储,浏览器关闭后数据不会丢失,除非主动删除数据。系统登录后获取到用户权限存入store中,发现在刷新页面之后,store中的权限数据丢失了。
2024-01-23 13:44:48
1482
1
原创 uniapp rich-text去掉img标签内置样式,自定义img样式
【代码】rich-text去掉img标签内置样式,自定义img样式。
2023-12-25 15:56:57
724
1
原创 vue3+element-plus动态路由菜单
icon使用的是阿里巴巴图标库,需要下载在index.html全局引入。2、创建组件 SideMenu.vue。路由先存到store里面。创建routes.ts。
2023-11-24 16:39:59
916
1
原创 Vue3-Vite创建项目
Vite 需要 Node.js 版本 14.18+,16+。然而,有些模板需要依赖更高的 Node 版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本。3.选择框架(上下箭头选择,回车键确定)5.项目创建完成,运行项目。
2023-11-17 16:44:42
62
原创 vue/cli脚手架搭建的vue3项目兼容低版本谷歌浏览器
找到项目中的.browserslistrc文件,增加一行。chrome >48 (版本号可以自行修改)
2023-10-08 09:15:53
858
1
原创 TypeScript类型缩小
类型缩小的英文是Type Narrowing;我们可以通过类似于typeof padding === "number”的判断语句,来改变TypeScript的执行路径;在给定的执行路径中,我们可以缩小比声明时更小的类型,这个过程称之为缩小;而我们编写的 typeof padding === "number可以称之为类型保护( type guards );
2023-02-23 16:29:13
113
原创 !!运算符和??运算符的作用
它是ES 11增加的新特性;)是一个逻辑操作符,当操作符的左侧是null。将一个其他类型转换成boolean类型;类似于Boolean(变量)的方式;或者undefined时,返回其右侧操作数,否则返回左侧操作数;有时候我们还会看到!操作符,这些都是做什么的呢?
2023-02-23 10:51:34
137
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人