VUE2.0 饿了吗视频学习笔记（七-终）：compute,循环,flex,display:table

一、star组件使用到了computed属性

computed相当于属性的一个实时计算，当对象的某个值改变的时候，会进行实时计算。

computed: {
      starType() {
        return 'star-' + this.size
      },

<template>
  <div class="star" :class="starType">
    <span v-for="(itemClass,index) in itemClasses" :class="itemClass" class="star-item" key="index"></span>
  </div>
</template>

template可以直接绑定startType
使用star组件必须先注册，再使用。

二、Elements in iteration expect to have 'v-bind:key'错误

 

1、<span v-for="itemClass in itemClasses" :key="itemClass.index" :class="itemClass" class="star-item">，加红色部分可以解决

2、或者将"vetur.validation.template": true, 改成"vetur.validation.template": false, 即可

三、使用方法

<div class="star-wrapper">
<star :size="48" :score="seller.score"></star>
</div>

运行效果

 

 四、flex布局

.title
display: flex
width: 80%
margin: 28px auto 24px auto
.line
flex: 1
position: relative
top: -6px
border-bottom: 1px solid rgba(255, 255, 255, 0.2)
.text
padding: 0 12px
font-weight: 700
font-size: 14px

父容器div设置flex,line自动布局，text随内容宽度自动变化,如下图所示

flex: 参数1-是否等分，参数2-是否缩放，参数3-内容不足占位宽度

五、display：table解决了一部分需要使用表格特性但又不需要表格语义的情况，尤其是DIV+CSS很不方便解决的问题

 一、父元素宽度固定，想让若干个子元素平分宽度

通常的做法是手动设置子元素的宽度，如果设置百分数不一定能整除，设置具体的数值又限制了父元素的宽度固定，很烦。

可以使用display：table来解决：

.parent{display: table; width: 1000px;} .son{display: table-cell;}

如此一来，就算是三个或者六个元素也可以很方便均分父元素的宽度了。

二、块级子元素垂直居中

想让一个div或p在父元素中垂直居中一直是很多人解决不了的问题（注意直接对块级元素使用vertical-align是不能解决这个问题的，vertical-align定义行内元素的基线相对于该元素所在行的基线的垂直对齐），同样可以使用display：table方便解决：

.parent {display: table;} .son {display: table-cell; vertical-align: middle;}

将块级子元素的display设置为table-cell之后再使用vertical-align就可以了。
转自：https://www.cnblogs.com/stephen666/p/6995388.html

六、v-ref、v-el 

v-ref、v-el 弃用 统一使用ref属性为元素或组件添加标记，然后通过this.$refs获取

例如<p ref="a"></p>   获取方法为this.$refs.a 对于自定义组件同样适用

七、发布项目

npm run build

dist文件夹，就是整体项目

最近比较忙，就学习到这，基本套路已经熟悉，真正做项目时再仔细学习（终结）