笔记
文章平均质量分 88
前端min金.
这个作者很懒,什么都没留下…
展开
-
vue——超详细的美食杰项目—菜谱大全
vue——超详细的美食杰项目—菜谱大全效果介绍1.家常菜谱Tab切换:2.筛选:效果介绍下面我们实现的效果就是图一中的。点击‘家常菜谱’下的其中一项时背景颜色改变并向路由中显示参数。在点击‘中华小吃’时‘家常菜谱’选中的将会失效。是一个类似Tab切换的效果。还有就是我们的筛选一项,点击‘工艺’的其中一项,再点‘口味’和‘难度’中的选项时,所有被点击的选项背景样式并不会消失并且路由中也有被点击的参数。这些路由参数是被点击选项时所对应的参数以下步骤都是在recipe.vue组件中实现1.家常菜原创 2021-10-10 08:00:00 · 895 阅读 · 0 评论 -
VUE——超详细的美食杰项目—登录注册
VUE——超详细的美食杰项目项目介绍代码过程登录页面登录页面——JS导航守卫注册页面退出登录项目介绍本篇主要实现美食杰项目的登录、注册和退出登录 代码过程登录页面<template> <div class="login-section"> <!-- :rules="rules" --> <el-form label-position="top" label-width="100px" class="原创 2021-09-24 08:02:45 · 538 阅读 · 0 评论 -
VUE——超详细的美食杰项目—发布菜谱的添加和删除
VUE——超详细的美食杰项目—添加和删除介绍第一步第二步第三步第四步第五步介绍上一篇写了个人资料编辑,这次我们写发布新菜谱的数组添加和删除,一共使用了create.vue和stuff.vue两个组件,下面让我们看一下效果第一步create.vue组件在create.vue组件中声明一个raw_materia_struct结构对象,在data中raw_material对象下获取const raw_materia_struct={ name:'',specs:''}export def原创 2021-09-27 07:57:12 · 393 阅读 · 0 评论 -
VUE——超详细的美食杰项目—瀑布流形式
VUE——超详细的美食杰项目—瀑布流形式内容介绍Home.vue组件waterfall.vue组件menu-card.vue组件内容介绍今天我们要写的是滚动条下拉实现从缓冲中到缓冲完瀑布流形式的效果。下面看效果图Home.vue组件**本组件中引入了menu-card 和Waterfall 两个子组件,下面开始获取api中的数据。在moutend中获取getBanner和getMenus的list,把list中的数据在赋值给data 中的banners和getMenus数组import M原创 2021-09-30 23:15:25 · 489 阅读 · 0 评论 -
vue——超详细的美食杰项目—个人信息展示
vue——超详细的美食杰项目—个人信息展示效果介绍store文件下的index.jsspace.vuefans.vuemenu-list.vuemenu-card.vue效果介绍图一中的123用户是自己的信息,不仅有编辑个人资料还有自己的作品、粉丝、关注、收藏等图二、图三中显示的用户是别人的个人信息展示,当我们查看别人的个人信息中就没有‘编辑个人资料’这种选项。但是我们也可以看到别人的作品、粉丝、关注、收藏等好,废话不多说咱开整store文件下的index.js在路由中的个人信息中配置子原创 2021-10-09 08:00:00 · 4402 阅读 · 0 评论 -
VUE——超详细的美食杰项目—菜谱详情
VUE——超详细的美食杰项目—菜谱详情效果介绍detail.vuedetail-header.vuedetail-content.vuecomment.vue效果介绍实现页面数据渲染,还有实现点击收藏之后在用户里面可以看到组件收藏的菜谱。实现发表评论等效果加粗样式detail.vue在detail.vue组件里有三个引入的子组件,分别为菜谱介绍、菜谱的做法和步骤和登录的用户发表的评论。首先我们引入要获取的后端数据,在data中声明一个menuInfo数组,通过监听路由改变的方法获取到后端的数据,原创 2021-10-12 20:05:16 · 1089 阅读 · 1 评论 -
VUE——超详细的美食杰项目—修改个人资料
VUE——超详细的美食杰项目—个人资料简单介绍编辑个人资料展现个人信息总结简单介绍上一篇写的是美食杰的登录和注册,今天我们接着来编写个人资料,通过获取后端已更改的信息通过渲染展现到个人信息当中编辑个人资料edit.vue组件在编辑个人资料的edit.vue组件里,upload-img子组件中imgMaxWidth是上传图宽度限制,res-url是从upload-img子组件传过来的自定义事件,接收上传的图片<template> <div class="edit"&g.原创 2021-09-27 07:56:23 · 944 阅读 · 0 评论