饿了么项目（二）

最新推荐文章于 2021-09-26 00:06:13 发布

原创最新推荐文章于 2021-09-26 00:06:13 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#笔记

笔记专栏收录该内容

6 篇文章

订阅专栏

本文介绍了在Vue项目中使用vue-resource与axios进行后端交互，以及如何显示不同图标、还原设计稿、处理元素定位、制作评分组件等前端开发常见问题。通过实例详细讲解了span内放图片、父元素font-size设置、z-index应用、背景堆叠效果的实现等技巧，并提到了github客户端的使用和fixed定位的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-resource

用来和后端交互.axios更好用.

显示不同的图标

created时先由数字type建立一个classMap的数组,通过:class=”classMap[从后端拿到的数字type]”绑定相应class，然后在css里设置不同class的background-image.

对设计稿的还原

要注意其他地方标注的尺寸.同时移动端应该是设计稿上标注的1／2.

span里放图片

span是行内元素，要设置宽高，首先要设置display：inline-block。background-size，background-image，background-repeat:no-repeat

父元素设置font-size

当元素为inline-block时，父元素font-size设置为0可以消除行内两个块之间的字体间隙.但是要注意font-size设置为0会使文字省略消失.解决方法是父元素不设置font-size,改成将两个span挨着，这样两个span之间的字体间隙就会消失.

vertical-align

设置vertical-align解决不了位置对齐的问题，要设置margin来解决.

绝对定位

是相对于父元素(算上padding和margin)来定位的

img标签

img标签里src用:src.然后img标签可以设置width和height属性

z-index

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

背景堆叠效果

为了达到堆叠的效果,在容器的外部新建一个div,里面放img,绑定src.设置width和height为100%,然后再设置绝对定位，充满整个容器.注意在和另一个背景颜色重叠时，另一个背景颜色要用到rgba，如果没有a模糊效果，那么z-index更小的图片背景就看不见了.

注意观察

header的图片漏到description里面了，要设置overflow：hidden

github客户端

客户端上新建一个仓库，上传的时候如果网页上已经有同名的仓库了，就不能上传.上传时不勾选私有，还要写上描述.

fixed

class为background的div作为背景设置display：fixed后应该是相对viewport定位，但是没有覆盖全屏，是因为没有设置top和left

props

父组件绑定了props后,传递到自组件，自组件要在script里面定义props,相应的prop要注明type.

export default

props:{}
data() {return{}}
methods:{}
components:{}
created() {} 函数用(){}
定义变量函数都不用var，let声明
computed:{starType(){return….}}
操作data里面的值用this,注意不要污染data里面值,创建新的data,直接this.xxx = …就行了.

创建component

export default里定义父组件引用star组件时要绑定的props.声明props的类型.在父组件里引用时，绑定对应的props

<star :size="24" :score="seller.score"></star>

清除浮动

制作评分组件

computed:{
        starType(){
            return 'star-' + this.size
        },
        itemClasses() {
          let result = []
          let score = Math.floor(this.score * 2) / 2
          let hasDecimal = score % 1 !== 0
          let integer = Math.floor(score)
          for(let i = 0;i < score;i++){
            result.push(CLS_ON)
          }
          if(hasDecimal){
            result.push(CLS_HALF)
          }
          while(result.length < LENGTH){
            result.push(CLS_OFF)
          }
          return result

$index

$index被取消了，现在用（item，index）来解决

v-for="(item,index) in seller.supports"

创建的组件定位

先创建一个div，把star组件包在里面，然后再对div设置css

其他css和js

v-if是在不在dom中，v-show是在dom中，显不显示
用h1表示标题，语义话一些
需要复用的地方去设计组件
写程序不能写死，要具有可扩展性
Math.floor()向下取整,Math.floor(x*2)/2得到.5或者整数
div里包的span，text-align可以用来设置span的位置
flex布局要用在div容器上，某些安卓浏览器会有兼容性问题
vue-loader在编译时会用到postcss工具，会自动加上兼容性的css样式
backdrop-filter:blur(10px)设置背景模糊,filter:blur(10px)会使所有内容模糊
overflow:auto和scroll一样
white-space:nowrap
text-overflow:ellipsis当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。
font-weight属性: 400 等同于 normal，而 700 等同于 bold（粗体），细体:lighter
块级元素只设置高,不设置宽100%默认就是一行