Vue3
文章平均质量分 88
vue3学习过程
DogEgg_001
这个作者很懒,什么都没留下…
展开
-
Vue3通用后台管理系统(四):使用Nodejs实现后端功能
使用node实现后端功能是参考这篇博客写的,我对node的详细功能其实还不太清晰。原创 2023-11-22 22:53:39 · 635 阅读 · 0 评论 -
Vue3后台通用管理系统(三):用户登录与跳转、全局路由守卫
退出登录即删除token、删除本地存储的menulist、删除tagsList(存储在menuStore中,需要引入再操作)这个项目功能感觉好少。后面想把后端部分重新用node和mysql实现一下 加油。获取对应的menulist后存储到store中,通过本地存储。点击commonHeader里的退出退出登录,返回到登录页。需要使用到cookie,若cookie存在即为登录状态。点击发送登录请求,将账号密码传给mock。未登录时不能跳转到除登录页以外的页面;登录后不能再跳转到登录页;原创 2023-11-19 23:55:54 · 3562 阅读 · 0 评论 -
Vue3后台通用管理系统(二):header面包屑的实现、tags标签的实现、用户管理页的实现
当刷新网页后,路由还是保持不变,但currentItem中存储的当前路径会清空变为默认数据,因此需要在每次项目刷新后,判断当前路径,将tabList中符合当前路径的item对象传给currentItem。使用template中的作用域插槽,它的作用是在外部获取组件内的数据 ,这里是为了获取这一行的数据,我们让slot-scope值为scope,那么由scope.row就可以得到数据。接收一个回调函数,或返回 Promise。,如果是,就将路由跳转到前一个tag,同时要更改面包屑的当前路径数据。原创 2023-11-18 20:11:50 · 958 阅读 · 0 评论 -
Vue3后台通用管理系统(一):header、aside组件的基本搭建、首页home组件的实现
使用vue3+ts+pinia+element-plus搭建一个通用的后台管理系统(没准后面会改成特定的功能)header、aside是非路由组件,中间的部分用于放置不同的路由组件,例如home、user等。原创 2023-11-11 15:57:41 · 1253 阅读 · 0 评论 -
Vue3+TS:看板——todolist小案例
脑子碎碎的,后面应该开始做个项目再巩固巩固就能找面试了吧惯例写项目之前先写个todolist整理一下思路虽然这个项目很简单,但在完成的时候还是踩到了超多的坑,刚开始准备把数据存储在aside组件里,content组件可以通过miit插件实现兄弟组件通信,但是数据传过去了之后不是响应式的,又准备把数据放到app.vue上,用父子通信就好解决了;写着写着defineProps、ts又忘了,马上滚回去看自己写的博客。。这个todolist只用了自定义事件 父子通信,感觉还是蛮有收获的,就是感觉ts太恐怖啦。原创 2023-11-05 23:48:42 · 565 阅读 · 0 评论 -
Vue3(三)<script setup>语法糖的基本使用
script setup>是在单文件组件(SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。更少的样板内容,更简洁的代码。能够使用纯 TypeScript 声明 props 和自定义事件。更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数,避免了渲染上下文代理对象)。更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。原创 2023-10-26 12:39:49 · 224 阅读 · 0 评论 -
Vue3(二)生命周期、自定义hook、组合式api、新组件、vue3改变等
hook,本质是一个函数。自定义hook,就是将setup中使用的组合式函数进行封装,实现代码复用;与vue2的mixin类似;自定义Hooks是为了处理组件逻辑的一种模式。它可以让我们在不使用组件之间复制粘贴代码的情况下重用状态逻辑。它们以use开头。它们可以调用其他的hook。例如:实现获取鼠标坐标的函数,封装到文件中,组件需要就可以引入调用在hooks/usePoints.js中:// 自定义钩子 实现获取鼠标打点坐标x: 0,y: 0})// 实现鼠标打点})})原创 2023-10-25 21:34:45 · 206 阅读 · 0 评论 -
Vue3(一)setup、响应式ref、reactive、computed、watch、watchEffect
监视单个数据setup() {// 监视ref定义的数据 单个// 第一个参数:监视的数据;第二个参数:监视数据的回调;第三个参数:配置(immediate、deep)console.log('修改了age', newValue, oldValue)...监视多个数据// 监视ref定义的数据 多个 以数组形式console.log('name或age被修改了', newValue, oldValue);})监视ref定义的对象/数组数据//监视ref定义的对象/数组数据。原创 2023-10-22 17:52:37 · 624 阅读 · 0 评论