Vue3——阶段练习(composition api的综合实战)

求一键三连

希望大家看完觉得有用的话点赞、关注和收藏,感谢!!!

在这里插入图片描述
这里面最重要的就是组件化抽取思想

前言

真实的开发中,用到的的细节的知识很少,因为实际应用场景用到的就只有那些东西。

出错首先看有没有拼错,再去检查你的逻辑

前期配置

assets(素材)
assets 代表 js、css、模板、图片、flash 等等资源文件,就是资源的意思,一般存放开发过程中自己写的静态资源

reset.css 是重置的css(写好之后要在main.js导入)

抽取组件

1.先完成页面

一开始没有抽取的思想,所以我们就按照一个vue文件的写法,先把这个页面给实现了,之后再进行抽取

先搭HTML框架,分为header,list,list采用v-for循环来实现,先大致的把整个页面实现出来,样式不用调试,最后再调
在这里插入图片描述

遍历和v-if判断都用template ,循环绑定key ,绑定一般都是id,因为是唯一的
在这里插入图片描述
一下子写不下列表,就是先写一个小的,然后看看能不能看到列表和数据,再去写里面的东西

最主要的时候先把框架全部写好,然后逻辑结构没有问题,最后再慢慢去搞里面的东西
在这里插入图片描述

2.开始抽取

抽取思路:整个组件可以抽成一个模块,因为这个组件也就是网页一个部分而已
RoomArea:AreaHeader+AreaItem
在RoomArea实现v-for循环,item就是一个小的模块
组件树
在这里插入图片描述

3.细节调整

同样的返回逻辑可以放在一起,返回一个对象,这样操作起来更方便,查看代码也更方便
所以这些比较多的,统一采用computed函数来写,记住语法
在这里插入图片描述
在这里插入图片描述
这样就可以根据服务器里面的数据来设置样式

开发最多的事情就是抽取组件,然后封装使用

模拟网络请求

在这里插入图片描述

样式css调整

样式对齐:

margin:0px -8px 如果没有对齐,加个-就OK了
宽度很有意思,都是33.333%,这样三个就刚好一样了,对齐了
在item里面还嵌套了一个inner-item,再加一个margin,这样最后内容之间就是有间距的(负值是拉长宽度的)
在这里插入图片描述

less(CSS预处理语言)

之前自己没有学这一块,在掘金上看了一篇文章
学习Less-看这篇就够了

在vue CLI项目里面使用less 要在里面npm install less-loader -D
还要花时间学习一下less。
真正的花时间的可能还是在css调试上,css还要花时间学一学,自己掌握的并不够好,复习!

猜你喜欢

转载自blog.csdn.net/Tommy__li/article/details/128649987
今日推荐