![](https://img-blog.csdnimg.cn/20190927151043371.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue
文章平均质量分 64
vue2,vue3
凡小多
邮箱:wgh4318@foxmail.com
展开
-
基于el-input的数字范围输入框
在做筛选时可能会出现数字范围的筛选,例如:价格、面积,但是elementUI本身没有自带的数字范围组件,于是进行了简单的封装,不足可自行进行优化满足功能:相关代码:原创 2023-04-28 14:50:24 · 2951 阅读 · 1 评论 -
vue中使用闭包(例如防抖和节流)失效问题(直接调用)
原因:这个和vue的事件绑定原理有关。如果直接在函数体内部使用的话,结果就是,一个匿名的立即执行函数来进行执行。由于每次触发点击事件都会返回一个新的匿名函数, 就会生成一个新的函数执行期上下文(称之为执行栈),所以就会防抖/节流就会失效。防抖/节流使用无效,(例如防抖,按钮点击多次依旧执行多次)----> 查看是闭包无效,定义的局部变量依旧为初值。----> 没有相应清除定时器。// 以下方法调用不生效。原创 2023-02-08 15:20:29 · 1895 阅读 · 0 评论 -
vue3学习笔记之router(router4 + ts)
使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。它们只注册一个新的路由,也就是说,如果新增加的路由与当前位置相匹配,就需要你用。属性可以定义路由的元信息。使用路由元信息可以在路由中附加自定义的数据。能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。进行页面的跳转会同样也会创建渲染新的Vue组件,但是在。要将嵌套路由添加到现有的路由中,可以将路由的。记住,如果你需要等待新的路由显示,可以使用。,这将有效地添加路由,就像通过。作为第一个参数传递给。原创 2023-02-01 22:56:14 · 2562 阅读 · 0 评论 -
vue3性能优化
一般前后端数据交互是前端发送请求,后端返回数据。缺点是每次获取新数据都需要提交新请求。实现是根据后端数据的改变推送新数据到前端,运用场景一般图表展示,图表数据实时变化。后端数据返回过多时,但不想分页或过滤优化,原理是删除可视区域外的DOM节点。VueUse 库已经集成了 webWorker —谷歌浏览器自带的 DevTools。也可以全局安装Lighthouse。的,所以可以使用这个插件进行包分析。原创 2023-01-20 10:09:55 · 2418 阅读 · 0 评论 -
Electron + vite + vue3简单实现
/ 渲染进程接收主进程传递信息。接收渲染进程传递数据,通过。'主进程传递信息 :>> '// 渲染进程传递主进程信息。接收/传递信息主进程。原创 2023-01-19 15:21:58 · 3133 阅读 · 3 评论 -
vue3学习笔记(总)——ts+组合式API(setup语法糖)
接受一个内部值,返回一个响应式的、可更改的 ref 对象,此对象只有一个指向其内部值的属性 。也可以获取属性 的浅层作用形式。1.4 triggerRef()强制触发依赖于一个浅层 ref 的副作用,这通常在对浅引用的内部值进行深度变更后使用。强制更新注意: ref()和shallowRef()不能一块写,不然会影响shallowRef 造成视图更新由于 ref底层调用了triggerRef(),所以会造成视图的强制更新1.5 customRef()创建一个自定义的 ref,显式声明对原创 2023-01-18 16:28:18 · 7040 阅读 · 0 评论 -
vite+vue3环境变量的配置
直接打开 dist 文件下的 index.html 不行会报跨域错误,可以使用。文件中自定义了越来越多的环境变量,你可能想要在代码中获取这些以。另外,Vite 执行时已经存在的环境变量有最高的优先级,不会被。为前缀的用户自定义环境变量的 TypeScript 智能提示。类文件会在 Vite 启动一开始时被加载,而改动会在。为前缀的变量才会暴露给经过 vite 处理的代码。应为这些环境变量在打包的时候是会被硬编码的通过。一份用于指定模式的文件(例如。默认情况下,Vite 在。Vite 在一个特殊的。原创 2023-01-18 14:36:28 · 4862 阅读 · 0 评论 -
unocss原子化
例如,ml-3(Tailwind),ms-2(Bootstrap),ma4(Tachyons),mt-10px(Windi CSS)均会生效。预设(实验阶段)是一系列流行的原子化框架的 通用超集,包括了。安装图标库,根据地址栏后缀安装对应图标库。属性语义化 无须class。原创 2023-01-18 09:12:12 · 753 阅读 · 0 评论 -
vue3学习笔记之样式穿透(:deep)及CSS 新特性(:soltted、:gloabl、v-bind、mouldCSS)
的方式,以保证唯一(而这个工作是由过PostCSS转译实现的),达到样式。标签会被编译为 CSS Modules 并且将生成的 CSS 类作为。渲染出来的内容,因为它们被认为是父组件所持有并传递进来的。通过在DOM结构以及css样式上加唯一不重复的标记。:全局选择器,定义全局样式,不用单开一个没有。默认情况下,作用域样式不会影响到。常用场景:一般用于TSX和渲染函数。:改变css解析时私有属性的位置。自定义注入名称(多个可以用数组):在子组件定义样式插槽内容样式。常见作用场景:修改组件库样式。原创 2023-01-17 09:26:06 · 9040 阅读 · 0 评论 -
vue3学习笔记之TSX的使用
绑定事件按照React的风格来。构建的,所以安装的是。原创 2023-01-12 16:44:20 · 5378 阅读 · 0 评论 -
vue3学习笔记之Transition&TransitionGroup
height : 0;} .to {传入的这些 class 会覆盖相应阶段的默认 class 名。这个功能在你想要在 Vue 的动画机制下集成其他的第三方 CSS 动画库时非常有用,比如原创 2023-01-10 11:28:51 · 1795 阅读 · 0 评论 -
vue3笔记案例——Teleport使用之模态框
理想情况下,我们希望触发模态框的按钮和模态框本身是在同一个组件中,因为它们都与组件的开关状态有关。但这意味着该模态框将与按钮一起渲染在应用 DOM 结构里很深的地方。使用 传送组件可以将组件传送至其他层级的DOM结构中父组件模态框组件结合了动画组件,实现模态框显示消失的动画效果原创 2023-01-04 09:35:37 · 605 阅读 · 0 评论 -
vue3笔记案例——Suspense使用之骨架屏
suspense的使用原创 2023-01-02 22:59:42 · 733 阅读 · 0 评论 -
vue3的路由传参query、params以及动态路由传参
例如,我们可能有一个User组件,它应该对所有用户进行渲染,但用户ID不同。在VueRouter中,我们可以在路径中使用一个动态字段来实现,我们称之为路径参数。很多时候,我们需要将给定匹配模式的路由映射到同一个组件。的时候,改为对象形式并且只能使用。的时候,改为对象形式新增。//模拟根据id获取数据。,path无效,然后传入。...原创 2022-07-18 09:30:00 · 23170 阅读 · 6 评论 -
自动引入插件unplugin-auto-import,以vite为例
插件地址安装vite配置配置完成之后使用 等无须 导入 ,可以直接使用原创 2022-07-08 16:37:52 · 3706 阅读 · 3 评论 -
vue3自定义全局拖拽指令(设置边界)
在 mounted 和 updated 时触发相同行为,而不关心其他的钩子函数。那么你可以通过将这个函数模式实现自定义全局拖拽指令directive.tsmain.ts使用原创 2022-07-11 14:13:50 · 559 阅读 · 0 评论 -
vue3自定义hooks之图片转base64
- Vue3 的 hook函数 相当于 vue2 的 mixin, 不同在与 hooks 是函数 - Vue3 的 hook函数 可以帮助我们提高代码的复用性, 让我们能在不同的组件中都利用 hooks 函数原创 2022-07-12 14:30:00 · 1057 阅读 · 2 评论 -
vue3给数组赋值丢失响应式的解决方法
由于vue3使用proxy,对于对象和数组都不能直接整个赋值。只有push或者根据索引遍历赋值才可以保留reactive数组的响应性或者或者例子效果图:原创 2022-07-07 11:23:47 · 8974 阅读 · 0 评论 -
Vue3集成Tailwind CSS
Tailwind CSS 是一个由js编写的CSS 框架 他是基于postCss 去解析的官网地址:Tailwind CSS 中文文档可以在vscode安装 Tailwind插件进行代码的输入提示生成配置文件配置文件文档修改配置文件 tailwind.config.js创建 tailwind.css文件main.ts中引入 tailwind.css文件如果您想基于 Tailwind 生成的默认样式自定义任何 CSS ,通常情况下只需创建一个 CSS 文件,并使用 指令包含 的 , 和原创 2022-07-13 10:54:35 · 787 阅读 · 0 评论 -
vue3之css插槽选择器、全局选择器以及动态css
默认情况下,作用域样式不会影响到 < slot /> 渲染出来的内容,因为它们被认为是父组件所持有并传递进来的解决方案 :全局选择器之前我们想加入全局 样式 通常都是新建一个style 标签 不加scoped 现在有更优雅的解决方案解决方案 :等同于动态CSS单文件组件的 style 标签可以通过 v-bind 这一 CSS 函数将 CSS 的值关联到动态的组件状态上:如果是对象请加引号...原创 2022-07-13 10:29:40 · 1988 阅读 · 2 评论 -
vue3开发移动端
将px转成vh和vw配置 vite.config.ts因为vite中已经内联了postcss,所以并不需要额外的创建 postcss.config.js文件注意:若需要声明文件则可以复制以下引入声明文件 跟同级代码案例安装JDK Java Downloads | OracleAndroid Studio修改逻辑代码配置权限打包打包的时候路径记得换成线上的服务器地址...原创 2022-07-14 14:44:51 · 2288 阅读 · 0 评论 -
vue之tab栏切换
一个简单的tab栏切换组件,由tabs以及tab-pane组成。原创 2022-08-08 09:45:00 · 6983 阅读 · 0 评论 -
vue - 插槽
插槽父组件向子组件传递带数据的标签,当一个组件有不确定的结构时, 就需要使用slot 技术注意:插槽内容是在父组件中编译后, 再传递给子组件的。作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于父组件 ===> 子组件分类:默认插槽、具名插槽、作用域插槽默认插槽: ```vue 父组件中: <Category> <div>html结构1</div>原创 2021-11-06 12:09:32 · 52 阅读 · 0 评论 -
Vue - 组件
Vue 组件什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可;组件化和模块化的不同:模块化: 是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一;组件化: 是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用;调用组件如果要使用组件,直接把组件的名称,以 HTML 标签的形式,引入到页面中,即可<组件名称></组件名称&g原创 2021-10-02 11:15:00 · 87 阅读 · 0 评论 -
定时器循环展示数组
方法通过条件判断截取原数组相应内容组成新数组。原创 2022-08-08 11:27:20 · 348 阅读 · 0 评论 -
vue指令之滚动动画
实现可视区域添加删除动画类名。为了更好的动画效果使用了。原创 2022-11-30 11:07:55 · 781 阅读 · 0 评论 -
vue自定义指令之图片懒加载
先将真实图片地址置为空或者预先指定的图片,在图片进入可视区域时,再将图片替换为真实地址。图片进入可视区域的监听。原创 2022-09-08 16:32:10 · 543 阅读 · 0 评论 -
Vue - el 挂载点和 data 数据对象
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。原创 2021-09-28 11:45:33 · 184 阅读 · 0 评论 -
vue - 列表渲染
v-for指令:用于展示列表数据语法:v-for="(item, index) in xxx" :key="yyy"可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)react、vue中的key有什么作用?(key的内部原理)数据监测<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>总结数据监视</title> <原创 2021-11-05 16:08:46 · 61 阅读 · 0 评论 -
vue - 绑定样式
绑定样式: 1. class样式 写法:class="xxx" xxx可以是字符串、对象、数组。 字符串写法适用于:类名不确定,要动态获取。 数组写法适用于:要绑定多个样式,个数不确定,名字也不确定。 对象写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。 2. style样式 :style="{fontSize: xxx}"其中xxx是动态值。 :style="[a,b]"其中a、b是样式对象。<!DOCTYPE html><原创 2021-11-05 14:45:44 · 259 阅读 · 0 评论 -
动画效果:实现卡片翻转抽奖动画(正反面内容不一样)
根据不同条件动态添加实现动画效果首先,为卡片列表添加一个是否翻转的元素 分别设置正反两面的样式及内容翻转动画一:完整代码动画二:完整代码原创 2022-09-16 14:56:10 · 1192 阅读 · 0 评论 -
Vue - axios
axiosaxios 必须先导入才可以使用使用 get 或 post 方法即可发送对应的请求then 方法中的回调函数会在请求成功或失败时触发通过回调函数的形参可以获取响应内容,或错误信息axios 网址// 导入 axios< script src = "https://unpkg.com/axios/dist/axios.min.js" > < /script>// 发送请求axios.get(地址 ? key = value & key2 = va原创 2021-09-28 19:16:06 · 100 阅读 · 0 评论 -
Vue - 路由
路由后端路由:对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源;前端路由:对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有一个特点:HTTP请求中不会包含hash相关的内容;所以,单页面程序中的页面跳转主要用hash实现;在单页面应用程序中,这种通过hash改变来切换页面的方式,称作前端路由(区别于后端路由);vue-routervue-router 安装在 vue 中使用 vue-router原创 2021-10-04 10:53:31 · 53 阅读 · 0 评论 -
正则表达式之联系方式校验(手机号+固号)
一个简单的手机号+固号的校验方法。原创 2022-08-10 17:52:31 · 2507 阅读 · 0 评论 -
vue - 事件修饰符和键盘事件
事件修饰符键盘事件原创 2021-11-05 11:17:08 · 66 阅读 · 0 评论 -
vue导航栏下拉菜单(附带展开收缩动画)
先看效果:下拉动画方法一:鼠标移入移出事件使用的是vue的 组件以及鼠标事件 和 优点:缺点:案例代码方法二:hover将下拉菜单需要下拉的导航栏下一级下,使用 控制元素,不要设置相对定位,以免定位时下拉菜单宽度不能100%铺满导航栏宽度。将菜单初始高度设为0优点:缺点:案例代码.........原创 2022-08-19 16:04:29 · 5197 阅读 · 0 评论 -
解决elementUI多选下拉框组件进入页面就自动进行校验的问题
原因:因为校验字段设置为undefined解决:将字段初始值设置为[]<el-form-item label="添加菜品" prop="productIds"> <el-select v-model="comboForm.productIds" multiple placeholder="请选择" style="width: 100%" @change="handelChangeProduct" > <el-optio原创 2022-03-24 11:24:00 · 5714 阅读 · 2 评论 -
vue - vue3快速上手
Vue3快速上手源码的升级使用Proxy代替defineProperty实现响应式重写虚拟DOM的实现和Tree-Shaking…新的特性Composition API(组合API)setup配置ref与reactivewatch与watchEffectprovide与inject…新的内置组件FragmentTeleportSuspense其他改变新的生命周期钩子data 选项应始终被声明为一个函数移除keyCode支持作为 v-on原创 2021-11-06 20:45:46 · 132 阅读 · 0 评论 -
quill富文本编辑器——修改默认图片、视频上传功能
quill富文本编辑器默认的图片上传是将图片地址转换为base64格式,可能会导致字段过长;默认的视频上传是插入iframe标签,与需要的video标签不符合初始化编辑器时重写image上传事件视频上传先引入注册自定义video.js模块上传成功的回调video.js案例...原创 2022-08-15 09:23:35 · 1223 阅读 · 3 评论 -
vue - vuex
Vuex1.概念 在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。Github 地址vuex2.何时使用?多个组件需要共享数据时多个组件依赖于同一状态来自不同组件的行为需要变更同一状态3.搭建vuex环境创建文件:src/store/index.js//引入Vue核心库import Vue from 'vue'//引入Vueximport Vuex f原创 2021-11-06 15:40:02 · 55 阅读 · 0 评论