饿了么项目（二）

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%默认就是一行