vue3
文章平均质量分 87
vue3学习记录、实战。
ZSK6
一个好吃懒做、游手好闲、不误正事和自由浪漫的前端技术员
展开
-
【Vue3】vue模板中如何使用enum枚举类型
有的时候,我们想在vue模板中直接使用枚举类型的值,来做一些判断。原创 2024-08-13 15:56:36 · 771 阅读 · 0 评论 -
【vue3】vue3中如何使用typescript
现在vue3和typescript搭配使用是一个较常见的方案,下面参考vue3官网总结下在vue项目中使用ts(TypeScript)的方法。原创 2024-05-14 14:46:27 · 4200 阅读 · 0 评论 -
【Vue3】动态组件的使用
记录下动态组件的使用。使用场景:多个组件需要来回切换使用时,可以考虑使用动态组件。原创 2024-04-02 16:40:42 · 1381 阅读 · 0 评论 -
【Vue3】vue文件中的CSS
总结下vue3中组件的css用法。原创 2024-03-29 17:55:58 · 2304 阅读 · 1 评论 -
【Vue3】源码探索之旅:compiler-core之parseChildren函数(二)
parseChildren函数是在baseParse函数中作为createRoot函数的子节点参数传入的,今天来探索下parseChildren函数。原创 2024-02-02 17:45:38 · 1006 阅读 · 0 评论 -
【Vue3】vue组件生命周期总结
每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤,比如设置好数据侦听,编译模板,挂载实例到 DOM,以及在数据改变时更新 DOM,在此总结下一个vue组件的生命周期描述。原创 2024-02-01 14:43:34 · 2133 阅读 · 0 评论 -
【Vue3】组件props的使用
Props 是一种特别的 attributes,你需要在组件上声明注册,然后才能识别成props,而不是普通的attributes。本篇主要讲解props的用法,以及传递后的porps值如何保持其响应性。原创 2024-02-01 10:56:34 · 5274 阅读 · 0 评论 -
【vue3】vue3源码探索之旅:compiler-core(一)
compiler-core包是vue3源码代码编译的核心代码包,且与平台无关,这个包**主要功能是将代码解析成ast、然后转换成codegenNode对象、再编译生成可执行代码(render渲染函数)**原创 2024-01-29 16:55:05 · 1291 阅读 · 0 评论 -
【vue3源码】vue源码探索之旅:项目介绍
记录下我眼中的vue源码项目。原创 2024-01-27 22:54:45 · 991 阅读 · 0 评论 -
【Vue3】指令(Directives)的运用
vue3的指令是其核心内容之一,在此做下总结。[directives](https://cn.vuejs.org/guide/essentials/template-syntax.html#directives)指令是带有 v- 前缀的特殊 attribute。Vue 提供了许多内置指令,例如:v-bind、v-html等。原创 2024-01-26 17:11:23 · 2785 阅读 · 0 评论 -
【vue】nextTick的使用
nextTick涉及到js的事件循环机制,通过setTimeout(fn,0)可以实现它,或者使用比较新的专用事件处理api MutationObserver。nextTick是一个较为重要的方法,恰当的使用它可以解决问题和提高性能。原创 2024-01-15 17:39:58 · 450 阅读 · 0 评论 -
【vue3】vue3的应用实例是什么和怎么使用
应用实例指的就是createApp的返回值,它是一个对象,里面包含了多个vue相关的属性,例如component(组件)、directive(指令)use(插件)、runWithContext(vue运行上下文)、version(版本)等;我们使用这个实例对象,调用mount函数挂载到dom上,就可以创建一个vue单页应用(SPA)原创 2024-01-12 17:04:21 · 1295 阅读 · 0 评论 -
【Canvas】使用canvas实现多点连线效果
这是一个特别简单的圆点连线canvas动画。如果你有兴趣,可以根据此基础上扩展出更好玩的互动效果,点击改变中心点,然后圆点朝点击坐标缓动等等。圆点的数据结构(可以扩展圆点样式)。移动轨迹(方向、速度)。圆点数据有变化时,要及时更新画布。可优化点:是碰撞判断逻辑、圆点数据处理、requestAnimationFrameAPI封装一个可以指定ms数更新的函数(这样圆点数据变多浏览器不会报超时警告,根据实际数据处理速度动态变化画布更新时机)。原创 2024-01-12 13:42:08 · 1423 阅读 · 1 评论 -
【bug】记录一次使用Swiper插件时loop属性和slidersPerView属性冲突问题
最近在vue3使用swiper时,突然发现loop属性和slides-per-view属性同时存在启用时,loop生效,下一步只能生效一次的bug,上一步却是好的。非常滴奇怪。原创 2023-08-04 16:13:33 · 2966 阅读 · 4 评论 -
【pinia持久化存储】使用pinia和pinia-plugin-persistedstate依赖进行数据的持久化存储
使用pinia和pinia-plugin-persistedstate依赖进行数据的持久化存储。原创 2023-04-14 13:48:29 · 7516 阅读 · 0 评论 -
【推拉框-手风琴】vue3实现手风琴效果的组件
在工作时有时会用到竖形手风琴效果的组件。在此记录下实现代码和实现思路。原创 2023-03-03 15:41:10 · 3617 阅读 · 1 评论 -
VUE内置组件-KeepAlive的应用
\ 是一个内置组件,它的功能是在多个组件间动态切换时缓存被移除的组件实例。默认情况下,一个组件实例在被替换掉后会被销毁。这会导致它丢失其中所有已变化的状态——当这个组件再一次被显示时,会创建一个只带有初始状态的新实例。如果我们的确想要组件能在被“切走”的时候保留它们的状态。要解决这个问题,我们可以用 \ 内置组件将这些组件包裹起来即可实现效果。原创 2023-01-13 21:00:00 · 213 阅读 · 0 评论 -
vue3内置组件Transition简单介绍和应用
Transition> 是一个内置组件,这意味着它在任意别的组件中都可以被使用无需注册。**它可以将进入和离开动画应用到通过默认插槽传递给它的元素或组件上。由 v-if 所触发的切换由 v-show 所触发的切换由特殊元素 切换的动态组件注意: 仅支持单个元素或组件作为其插槽内容。如果内容是一个组件,这个组件必须仅有一个根元素。你传入的这些 class 会覆盖相应阶段的默认 class 名。原创 2023-01-11 15:31:46 · 4940 阅读 · 0 评论 -
学习使用axios
这里只是简单使用了下axios,在实际项目中你可能会更改请求头,以携带token,也可能会做些拦截,例如token失效后操作等。axios封装的get和post请求传参方式有多种形式,如想了解请到官网了解。原创 2022-12-13 17:20:39 · 207 阅读 · 1 评论 -
学习使用 Ant Design of Vue
vite + vue3 + ts 配置ui框架 ant design vue原创 2022-12-02 17:11:28 · 886 阅读 · 0 评论 -
简单配置下Vite
Vite 是一种新型前端构建工具,能够显著提升前端开发体验。一个开发服务器,它基于 原生 ES 模块 提供了 丰富的内建功能,如速度快到惊人的 模块热更新(HMR)。一套构建指令,它使用 Rollup 打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源。Vite 意在提供开箱即用的配置,同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性,并有完整的类型支持。vite在打包时已经做了优化(代码分割、异步加载优化等),因此,无需我们过多配置即可使用。原创 2022-12-02 15:24:05 · 6650 阅读 · 0 评论 -
学习使用Pinia
pinia的基础使用原创 2022-12-01 15:26:06 · 951 阅读 · 0 评论 -
Vue3学习使用创建自定义指令
学习使用自定义指令原创 2022-11-16 17:20:13 · 911 阅读 · 0 评论 -
Vue3的组合式函数
vue2的时候,以一个vue文件是按照vue给的模块文件来写的,也就是选项式API写法(一个文件里有template、script、style)。现在vue3新出了一个组合式API写法(一个文件里有template、script、style)。两者区别主要在script部分,选项式API写法中,script是已经预设了属性方法使用方式的,例data、components、computer、watch、methods等;组合式API写法则没有预设(根据暴露的方法或属性按照自己的想法写)。原创 2022-11-16 11:29:16 · 3533 阅读 · 0 评论 -
学习使用路由Vue-Router
讲了vue-router基本使用,除了这些外,常使用的还有路由守卫,路由传参(query和params),路由切换过渡效果和动态添加路由等,这里不再介绍,想了解请到官网。原创 2022-11-15 16:55:09 · 279 阅读 · 0 评论 -
vue3学习组件之高级使用
在以前vue3组件学习使用和利用递归组件实现简单的树组件中,分别讲了组件的基本使用和一部分高级用法(provide/inject)。这篇文章来将组件其他的使用方法。主要讲组件插槽(slot)、组件透传属性、异步组件和动态组件等其他高级用法。原创 2022-11-15 14:40:35 · 1210 阅读 · 0 评论 -
利用递归组件实现一个简单的树组件(vue3)
闲来无事不从容,睡觉东窗日已红。万物静观皆自得,四时佳兴与认同。最近学习vue3组件的时候实现了一个简单的树组件。话不多说,直接上代码。这个数组件实现了展开、选中和选择三个基本效果。如果有兴趣的话,可以自己参考代码实现其他更加牛叉的效果,例如,自定义树结构,单多选,搜索、排序等等。原创 2022-11-11 15:58:41 · 1931 阅读 · 0 评论 -
浅析vue的响应性
这次我们来浅析下vue3的响应性原理。原创 2022-10-31 18:08:38 · 300 阅读 · 0 评论 -
Vue3组件学习使用
前面我们已经构建了一个项目。现在我们在那个项目里面学习组件的用法。原创 2022-10-27 17:38:34 · 1187 阅读 · 0 评论 -
构建一个简单的Vue3+ts+vite的项目
构建一个简单的vue3+ts+vite的项目原创 2022-10-27 15:12:52 · 578 阅读 · 0 评论 -
Vu3系统性学习之基础使用(二)
vue3基础学习最终章原创 2022-10-26 17:41:55 · 622 阅读 · 0 评论 -
Vu3系统性学习之基础使用(一)
vue3现在已经是比较普遍技术,所以系统的学习下是非常有必要的。以前我已经了解过一次vue3,这次是一个系统性的回顾和记录。话不多说,不玩虚的,let’s go!——ZSK666。原创 2022-10-26 16:21:20 · 406 阅读 · 0 评论