一、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文件夹,就是整体项目
最近比较忙,就学习到这,基本套路已经熟悉,真正做项目时再仔细学习(终结)

VUE2.0 饿了吗视频学习笔记(七-终):compute,循环,flex,display:table的更多相关文章

  1. VUE2.0 饿了吗视频学习笔记(四):颜色、跳转、设置、vue-resource

    https://gitee.com/1981633/vue_study.git 源码下载地址,随笔记动态更新中 1.设置选中项颜色 <template> <div id=" ...

  2. VUE2.0 饿了吗视频学习笔记(六):定位问题、文字显示、模糊背景图片、点击事件

    一.定位问题按照视频写代码时,发现元素“5个“”定位不对,如下图 正常位置为 还以为是哪里写错了,仔细研究了下,需要在父div上加relative. position:relative/absolut ...

  3. VUE2.0 饿了吗视频学习笔记(二):新版本添加路由和显示Header

    https://gitee.com/1981633/vue_study.git 源码下载地址,随笔记动态更新中 webpack.dev.conf.js中添加两段代码 'use strict' cons ...

  4. VUE2.0 饿了吗视频学习笔记(一):VUE示例data.json

    https://gitee.com/1981633/vue_study.git 源码下载地址,随笔记动态更新中有的同学找不到data.json,以下是data.json内容 { "selle ...

  5. VUE2.0 饿了吗视频学习笔记(五):父子对象传递、显示图片

    一.父子组件之间对象传递 1.app.Vue中的v-header 中加入 v-bind:seller="seller" template> <div id=" ...

  6. VUE2.0 饿了吗视频学习笔记(三):VUE2.0取消了v-link

    https://gitee.com/1981633/vue_study.git 源码下载地址,随笔记动态更新中 写法如下 <div class="tab-item"> ...

  7. vue2.0 饿了么项目学习总结

    最近在GitHub上发现一个基于vue2.0的饿了么项目.本着互联网的分享精神,现在将我自己所理解的,所总结的经验分享给大家.本篇文字我将从学习的角度向大家分享. 在学习本项目之前我已经将vue2.0 ...

  8. Asp.net core 2.0.1 Razor 的使用学习笔记(五)

    按说这里应该写关于Role角色类的笔记,但是我还没时间实验这块,所以等以后我搞定了再来分享.现在先写其他部分. Asp.net core 2.0.1 Razor 的使用学习笔记——建立模型 按照微软官 ...

  9. Asp.net core 2.0.1 Razor 的使用学习笔记(六)

    Asp.net core 2.0.1 Razor 的使用学习笔记——基本页面的建立 VS这版(vs版本:15.5.6  .net版本:4.7.02558)的Razor页面自动生成就是坑爹货,它自动生成 ...

随机推荐

  1. SAP入行就业

    就大局势来说, 缺乏人最多的模块有abap 还有就是FICO 和MM. 如果您 英语水平特别高的话,建议您学习FICO HR 或BW. 如果您想追求高薪,那就是FICO无疑了.想快速就业或者有编程基础 ...

  2. 关于适用base64对图片进行编码在服务器上性能的相关讨论

    周五在写open api的时候 和

  3. python 抽象类与接口类

    几个类 实现的方法都一致的话 就继承同一个父类 在父类写一个公共方法 给子类使用

  4. BZOJ4455 ZJOI2016小星星(容斥原理+树形dp)

    相当于给树上的每个点分配一个编号使父亲和儿子间都有连边. 于是可以考虑树形dp:设f[i][j][k]为i号点的编号为j,其子树中编号集合为k的方案数.转移显然.然而复杂度3n·n3左右,具体我也不知 ...

  5. Dominator Tree & Lengauer-Tarjan Algorithm

    问题描述 给出一张有向图,可能存在环,对于所有的i,求出从1号点到i点的所有路径上的必经点集合. 什么是支配树 两个简单的小性质—— 1.如果i是j的必经点,而j又是k的必经点,则i也是k的必经点. ...

  6. 【Luogu4512】多项式除法(FFT)

    题面 洛谷 题解 模板题... 我直接蒯我写的东西... 这个除法是带余除法,所以并不能直接求逆解决. 要求的就是给定两个多项式\(A(x),B(x)\),其项数为\(n,m\) 求解一个\(n-m\ ...

  7. 洛谷P3233 世界树

    题意:给定树上k个关键点,每个点属于离他最近,然后编号最小的关键点.求每个关键点管辖多少点. 解:虚树 + DP. 虚树不解释.主要是DP.用二元组存虚树上每个点的归属和距离.这一部分是二次扫描与换根 ...

  8. 由asp的一个错误,看语言的不同:asp & java

    今天查看网页源代码,无意发现源代码尾部抛出asp的错误信息,但没有显示在网页上. 如果没查看源代码,还没发现asp运行代码出错了. 大致情况是这样,在asp中,有一个变量来表示用户当前使用的容量,注意 ...

  9. html5的data-*属性,我们一起认识下

    html5的data-自定义属性出来很久了,我们一起认识一下. 比如如下一个代码,我们怎么取到对应的name,对应的age? 既然data-*自定义属性是它的一个属性,这个时候就可以用getAttri ...

  10. idea 显示properties 中文

    有时我们打开.properties文件时,中文显示为utf8编码格式,可以在file->setting->editor->file encodings下 把transparent n ...