持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第30天，点击查看活动详情
样式选择器
id：我们都知道，id是唯一标识一个元素的，一个html文件里不能有重复id，那么id选择器是给特定 id 的 HTML元素指定特定的样式。
class：class可以标识一类元素，也就是说如果使用class选择器定义的样式，是可以再html元素之间复用的。
当然，我们也可以直接在标签内使用style属性，他可以包含任何 CSS 属性，属性之间用分号隔开。
如果我们对一个标签同时使用了多个class，又或者夹带有style属性的定义，就会出现多重样式的场景，这时候浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。
在我们使用element组件的时，你可能会发现自己不论怎么修改标签的class或者style的某一个css属性，他可能不会发生任何改变。
这是因为element组件有自己的内部样式，可能会与你定义的样式有所冲突。
调试样式
开发者模式 点击左上角再页面点选要调试的元素
右侧style调试 勾选或修改样式属性
Computed：查看css最终套用结果，可以排查一些父元素样式的影响
样式切换
动态绑定class属性：
<元素 :class=‘{类名1：boolean，类名2：boolean}’>
这里的布尔值=true的时候，就会将样式绑定到标签中。
通过这种方法实现样式的切换,如点击/选中/hover效果的实现
动态绑定style属性：
<元素 :style=‘{key(属性名)：属性值}’>
通过这种方法，常用于根据不同场景，给子组件传不同的样式属性来改变子组件样式
对Element样式的修改
如果element本身组件的样式 无法支持你的需求，你可以通过调试获取样式名，在自己的样式域内加一个同名的class ，然后定义一波新的属性值 当然，有的组件也支持自定义样式：
举例：对messageBox的修改
块级元素(block)特性：总是独占一行，可修改宽高内外边距等属性
address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
内联元素(inline)特性：和相邻的内联元素在同一行，不可修改宽高内外边距等属性
a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
利用CSS我们可以改变html标签的展示，自由地修改我们需要的属性。主要用的CSS样式有以下三个： display:block -- 显示为块级元素 display:inline -- 显示为内联元素 display:inline-block -- 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
e.g.：将所有
重叠、溢出等样式问题
①浮动属性float:left 容易造成重叠现象，重叠的元素要么都使用浮动或者都不用 ②Dialog最好设置固定或最小高宽，不使用百分数 ③overflow属性处理溢出：如果一个元素的大小设置太小不能包含其内容，就可以用overflow来指定对溢出的处理 Visible：默认值，表示不裁剪，强制显示元素内容 Scroll：裁剪内容，同时提供滚动条 Hidden：裁剪内容，超出部分隐藏 Auto：表示只有在必要的时候才裁剪内容并添加滚动条
e.g.:文本省略
常用链接
CSS教程：www.runoob.com/css/css-tut…
Element组件：element.eleme.cn/#/zh-CN/com… 值得注意的是，element组件的一些属性的含义，并不等同于html原生标签的属性，且有一些组件同名属性不同用法（如table和form的prop） 因此使用时时大家一定要仔细阅读官方网站中的使用说明。
16进制颜色信息：zh.spycolor.com/009f6b#
学习链接
Vue生命周期：blog.csdn.net/gao_xu_520/…
Created：实例创建完成后执行
Mounted：挂载完毕后执行
上面两个常用来调用为初始化页面做准备的方法。区别是：
created是html渲染完成前执行，适合用来初始化数据
mouted是html渲染完成后执行，如要操作html中的元素必选mounted，亦或向后端发起请求拿到数据以后做一些业务处理
计算属性：computed
computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。其中的set方法可以直接当实例中定义的变量来使用
而methods不同，是在重新渲染的时候总会重新调用执行。
JS时序问题
js是单线程的，如果什么都同步执行的话，会堵塞、等待时间过长。因此一些耗时的方法就会使用异步来实现。
代码里我们经常会用到异步方法，如ajax、fetch调取服务；
还有的方法汇总包含setTimeout、nextTick的异步任务；
但如果异步的不当使用，往往会导致一些时序问题。
解决时序问题
① 常见的时序问题
如下， getMemberRewardInfo方法是一个promise方法，用它来赋值的话，then还没有执行完毕，curRewardInfo就只能得到一个undefined。 这时候，需要使用 async+await 对异步方法进行同步化，当getMemberRewardInfo有一个正常的返回值时，await语句才会返回数据。
在async函数内部，有await的地方会先执行，然后再执行函数内await之后的代码
如果在for循环里遇到异步，使用async+await的方法也无济于事。 这种情况下就需要使用Promise.all()+map()才能保证循环中的异步全部执行完毕再执行下一步：
Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组
② Vuex中的时序问题
我们常在vuex中实现服务调用和返回处理，有一个执行( action)和state赋值(mutation)的过程 我们发现vuex的执行是有顺序的，action实现实际也是一个异步的过程，如果直接取state的值在页面中使用，就会出现数据延迟的情况
解决方案： 将state存储的数据放在Computed中，可以保证能在值发生变化的时候执行赋值，而mapAction调用时会触发mutation来改变state的值，所以只有把state里的值放在computed里才能保证其每次mutation后进行计算 同样，使用computed计算好的state数据在赋值时，也需要在mapAction 方法前加上await来等待方法执行完毕，否则也会出现赋值问题。