- 博客(259)
- 资源 (5)
- 收藏
- 关注
原创 vue中 v-cloak指令
v-cloak指令用于隐藏尚未完成编译的DOM模板。有时会出现网络延迟或异步操作的情况,导致模板中的插值表达式内容并不一定能够及时被编译解析,网页中则会出现一部分未被解析的插值表达式,利用v-cloak指令,将指令中包含的内容先进行隐藏,当全部内容被解析编译完以后再显示,v-cloak指令不能单独使用,需要配合样式来实现。
2026-01-02 20:59:19
287
原创 vue 指令 中 v-pre指令
v-pre指令会跳过当前所在元素及其所有子元素的编译。比如插值表达式,不会理解这个表达式的含义,只是将内容直接展示在页面中。
2026-01-02 20:20:58
116
原创 vue 内置指令 v-text和v-html
v-text指令会渲染指令中的value属性,不管渲染的是什么内容,该指令都会将其渲染为纯文本后输出。如果value属性中带有HTML标签内容,那么页面中仍旧会显示带有标签的文本结果。本质是会用innerText的方式进行内容插入和显示。渲染内容进行HTML解析,就可以通过v-html指令实现。实际是用innerHTML的方式进行内容插入和显示。
2026-01-02 20:12:38
98
原创 vue中的动画
在Vue中只能使用内置组件transition实现单一元素的动画,对于多元素分组动画,则可以使用transition-group组件处理。(CSS样式动画可以划分为transition过渡动画和animation逐帧动画)
2025-12-31 23:34:48
87
原创 vue中数组变更的方法
为Vue内部对data中的数组的一系列变更方法进行了重写包装,被包装的变更方法一共有7个,分别是push、pop、shift、unshift、splice、sort和reverse方法,这7个方法内部会先对数组列表进行相应操作,再更新页面。
2025-12-27 19:31:40
87
原创 vue v-for 列表渲染指令注意
3、指令遍历的目标是一个正整数n时,其一般用于让当前模板在1~n的取值范围内重复产生n次,value为从1开始到n为止依次递增的数值。v-for指令可以遍历多种不同类型的数据,数组是较为常见的一种类型,当然类型还可以是对象或数值。value为被遍历的obj对象的属性值,name为属性名。令遍历一个对象时,遍历的是对象自身所有可遍历的属性。
2025-12-27 19:25:02
253
原创 vue v-if和v-show比较
v-if指令的标签会新建HTML标签结构并显示,而v-show指令只需要去除display为none的样式让标签结构重新显示出来。当再次更新数据后,表达式的值变为false,需要隐藏标签结构。v-if指令的标签直接被删除,v-show指令的标签通过指定display为none的样式来隐藏标签结构。v-if指令对应的模板标签结构不会被解析,也就不会产生对应的HTML标签结构;而v-show指令则会解析模板标签结构,生成HTML标签结构,只不过它会通过指定display为none的样式来隐藏标签结构。
2025-12-27 19:20:34
129
原创 vue 绑定动态样式
v-bind 可以简化成冒号。一个标签上静态class与动态class可以同时存在,最终编译后,Vue会将动态class与静态class合并,并指定为标签对象的class样式。2.与class绑定类似,,style绑定同样是通过“v-bind:style="表达式"”来绑定动态style样式,表达式的值支持字符串、对象和数组3种类型,在实际开发中,一般使用对象类型的写法就够了。对象写法 要绑定的样式的个数确定、名字也确定,但要动态地决定是否使用 这里的对象的属性是类名 参数是true与false。
2025-12-27 19:03:17
237
原创 vue watch监听
watch回调默认是在数据发生变化时自动调用,但是可以初始化时就执行一次监听。watch的属性不能再是一个函数了,需要是一个配置对象,并通过handler配置来指定监听回调函数。同时我们可以通过配置immediate为true来指定监听回调函数在初始化过程中执行第1次,当然在被监听数据发生改变时也会执行。watch默认是浅层监听,只有在被监听属性本身发生变化时才会触发回调,它监听不到属性对象内部的数据变化。watch选项不仅可以监听data对象中外部的属性,还可以监听其内部的属性 监听内部属性就要写。
2025-12-27 18:55:46
148
原创 vue 计算属性 setter
get方法,当它在初始化时会执行一次,并且任意依赖数据发生变化时会再次执行,set方法则是在修改属性值后,会自动执行。计算属性是只读的,也就是只能计算返回一个值,设置计算属性值可以使用getter和setter的计算属性来实现。计算属性是一个对象,包含get方法(常称为getter)和set方法(常称为setter)
2025-12-27 18:36:32
112
原创 vue 计算属性和method方法 优先使用哪个
为计算属性内会将计算属性函数返回的结果数据进行缓存处理,如果结果数据需要在页面中显示多次,那么计算属性函数只会执行1次,但method方法会对应执行多次。使用计算属性,效率高。
2025-12-27 18:31:09
319
原创 vue 计算属性
计算属性函数中的this就是当前组件对象,通过它可以直接访问data中的数据,初始化显示时,系统会自动调用这个计算属性函数得到返回值并显示到页面上。定义在computed配置对象中,本质上就是一个函数,内部可以根据已有的data数据进行计算,产生要显示的结果数据并返回它,当模板显示的某个数据需要通过已有数据进行一定的逻辑计算才能确定时,就可以选择用计算属性语法来实现。
2025-12-27 18:29:50
73
原创 vue3中,data函数和method方法中的this是什么、
在methods对象中定义的所有方法最终也会被添加到代理对象中,也可以在方法中通过this来更新data属性,从而触发页面自动更新。data函数和method方法中的this,本质上是一个代理(Proxy)对象。可以通过this来读取或更新data对象中的属性。它代理了data对象中所有属性的读/写操作。
2025-12-27 17:18:31
124
原创 vue3中操作样式的变化
CSS Modules为每个类生成唯一哈希名,实现样式真正隔离,避免全局污染。适合大型项目、组件库开发。默认情况下,插槽内容(slot)的样式不受子组件scoped样式的影响。内的选择器也会声明为全局样式,即不添加组件唯一属性,影响整个应用。是Vue 3的推荐语法,取代了Vue 2中的。可以专门选择并样式化父组件传递进插槽的内容。定义跨组件的统一样式,如主题色、公共字体。4. 样式模块化(CSS Modules)不想额外创建非scoped的。1. 深度作用域选择器。
2025-12-24 21:04:58
630
原创 vue2 与vue3 中v-model修改原因
因为Vue2中的v-model只能双向绑定一个数据,而Vue3直接改造成了modelValue与update:modelValue的形式,并且可以自定义其他动态属性和事件,所以可以进行多个值的拆解与绑定处理。在一个组件中接收多个属性。
2025-12-21 21:15:54
86
原创 vue2 与vue3 中v-model的区别
Vue3将v-model的设计原理进行了改造,v-model不再单纯是“v-bind:value”与“v-on:input”的结合,已经演化为“v-bind:modelValue”与“v-on:['update:modelValue']”的结合,直接绑定modelValue并且监听update:modelValue就可以实现v-model双向数据绑定的操作。在Vue2中,可以在子组件标签上用v-model来实现父子组件之间的双向通信,它的本质是“v-bind:value”与“v-on:input”的结合。
2025-12-21 21:14:06
222
原创 javascript 执行函数
执行函数前会创建激活对象,并将函数内的变量声明提升至激活对象中,变量值为undefined 开始执行函数代码后,激活对象中的undefined会随着代码执行逐步被实际值替换。函数内代码全部执行完毕后,执行上下文将从栈中弹出并销毁,若激活对象未被其他应用指向,那么就会被销毁。
2025-12-21 21:00:25
238
原创 js中undefined的情况
2、对象 访问对象中不存在的属性时, js规范要求默认返回undefined 而非抛出异常。3、函数 函数体缺少retrun语句的时候,函数调用表达式默认返回undefined、1、变量 声明变量但是没有进行赋值操作的时候,js引擎自动初始化为undefined。
2025-12-15 20:05:11
88
原创 使用vconsole
使用vconsole 可以在手机上 看到控制台的信息 目前看还是比较方便的,也可以多平台使用。index.html页面中直接添加。类似于微信小程序的移动端调试。
2025-12-06 20:09:37
111
原创 javascript 中的 window.window === window
window.window === window 是自引用特性,全局对象在浏览器中被具象化为window对象。一些库会通过window.window 或者类似的方式来保证获取到正确的全局对象。开发者通过window.xxxxx链式调用的时候,始终访问同一对象。window作为全局代理 其window属性指向自身。javascript 允许对象有指向自身的属性。
2025-12-03 21:37:21
75
原创 vue3 中放弃 filter过滤器
Vue2中经常使用的filter过滤器功能,在Vue3中已经不再提供,而是利用一般方法进行数据的过滤筛选操作。
2024-12-31 20:16:40
277
原创 vue3 Suspense组件
也就是说,在Vue3中,开发人员并不需要关心数据加载的状态,新的Vue组合式API将了解组件的当前状态,而且它能够区分组件是正在加载还是已准备好显示。例如,在数据加载过程中,会先显示fallback中加载数据时的应急装置组件;在数据加载完毕后,再显示default中默认的渲染视图组件。当等待数据的时间比开发人员希望的时间要长时在Vue3中无须自定义代码即可实现。该组件除了可以给定默认加载数据后的渲染视图,还可以设置加载数据时的应急视图。只需要通过Suspense组件管理这一过程。
2024-12-31 20:11:47
354
原创 vue3 Teleport瞬移组件
但如果想要将button按钮元素放置于div这一目标元素下,则可以直接利用Teleport组件,将button按钮元素内容瞬间移动至目标元素下。例如,设置to属性为“.target-portal”,那么button按钮元素就成了div元素的嵌套子元素,它们不再是并列关系,而是嵌套结构,假设现在页面中有两个元素,分别为div元素和button按钮元素,在当前页面中这两个元素是并列元素,它是一个可以使元素从一个组件转到另一个组件的组件。Teleport是瞬移组件,也称为传送门组件。
2024-12-31 20:08:58
433
原创 Tailwind CSS 使用简介
参考网站号称是开始使用 Tailwind CSS通过 npm 安装,并创建你的文件。在文件中添加所有模板文件的路径。将 Tailwind 指令添加到你的 CSS。
2024-12-31 19:59:23
628
原创 获取钉钉微应用免登授权码(h5微应用)
替换为当前访问用户的企业corpId。例如:https://www.dingtalk.com?第三方企业应用可以在微应用的首页URL中使用。注意 5分钟有效期 只能用一次。做为参数占位符,钉钉容器会将。获取微应用免登授权码。
2024-12-31 19:50:52
1345
原创 钉钉h5微应用鉴权配置客户端 API 鉴权步骤
这里的biz.contact.choose 只是举一个例子 你需要什么功能可以去链接中找。注意 其多个参数 都是需要后端计算后返回给前端使用的 微应用type要使用0.企业的corpid就可以去钉钉管理后台右上角头像那里找 也可以都让后端给返回。这里记录一下使用的钉钉h5微应用 配置客户端 API 鉴权的内容。注意不是所有的都功能都需要鉴权。配置完成后使用dd.ready。先要引入钉钉环境 见下链接。
2024-12-28 21:09:28
1007
原创 钉钉h5微应用鉴权
如果当前页面用到需要鉴权的JSAPI,此页面就需要执行鉴权流程。钉钉开放平台会获取当前页面中需要鉴权的JSAPI,然后执行鉴权。但是如果调用钉钉业务、安全相关的JSAPI的调用,需要先鉴权,然后再调用。注意 使用手机基础能力的部分JSAPI是不需要鉴权的 只需要在。钉钉h5微应用 使用部分钉钉权限的时候需要鉴权。具体那些需要鉴权 请看这个链接。
2024-12-28 20:44:21
581
原创 钉钉h5微应用,鉴权提示dd.config错误说明,提示“jsapi ticket读取失败
1. 可能是你的企业corpid不对 登录钉钉管理后台 就可以找到对应企业的corpid 请严格使用这个corpid。调用获取jsapi_ticket接口,使用的access_token对应的corpid和dd.config中传递的corpid不一致。2. 鉴权的url地址不对 这个地址,用户后端签名使用的url地址和前端访问地址需要严格一致,包括端口号。这个提示大多是因为钉钉服务器没有成功读取到该企业的jsticket数据。
2024-12-28 20:38:23
988
原创 钉钉h5微应用安卓报错error29 ios报错error3 加上报错52013,签名校验失败 (前端)
这里的url可以理解为需要完全一致,有时候钉钉网关和nginx 可能会导致你自己的获取的链接与钉钉配置的链接一致。如果前端获取的地址不能与进入系统的地址完全一致,请后端鉴权接口的时候不使用前端传递的地址 而是配置固定的地址。用户后端签名使用的url地址和前端访问地址需要严格一致,包括端口号。前端部分可以用alert显示出当前的location.href,后端部分请在签名的时候打印日志。访问通过反向代理服务器、各种NAT等场景下容易出现这种问题,如http缺省的80端口,和显式增加80的不是同一个URL。
2024-12-28 19:53:19
1184
原创 vscode vue文件 点击ctrl没有跳转到有@路径的自定义组件
基本上你搜索compilerOptions 就找到。paths 与baseUrl 这两项都要有。核心思想 vscode 不知道@是哪里。第二步 json文件添加内容。
2024-12-28 10:21:46
872
移动端使用时候,如果固定宽高页面显示效果不好,这个js可以使canvas识别移动设备,设置画布宽高。
2020-07-30
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人
RSS订阅