应用视觉设计

文本样式

text-align：文本对齐

使用 text-align 属性创建视觉平衡

text-align属性：控制文本的对齐方式****

• text-align: justify;两端对齐，即每行的左右两端都紧贴行的边缘。
• text-align: center;文本居中对齐。
• text-align: right;文本右对齐。
• text-align: left;是的默认值，文本左对齐。

^{和_{：文本上下标}}

阅读更多

使用 CSS 变量

创建：

• 在变量名前添加两个破折号并为其赋值，例子如下：

1

--penguin-skin: gray;

阅读更多

盒模型：css 定义所有的 html 元素都可以拥有像盒子一样的外形和平面空间

标准盒模型(W3C 盒模型)

元素实际宽度： width+左右 padding+左右 border+左右 margin；

元素实际高度： height+上下 padding+上下 border+上下 margin

阅读更多

安装

百度自行下载安装，也有中文版的

它可以–

模拟后端接口，返回给前端数据

模拟 mock 后端接口：

阅读更多

单线程

JavaScript 的单线程，与它的用途有关。作为浏览器脚本语言，它主要用来实现与用户的一个互动，以及操作 DOM。

阅读更多

数据双向绑定原理(数据劫持原理)

• 深度遍历实例 data 中的所有属性，
• 通过Object.defineProperty()方法将它们全部变成getter、setter以此进行数据劫持
• 每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染

阅读更多

ES7 新特性

• Array.prototype.includes:检查数组中是否包含某元素，返回 bool 值

1
2

const arr = ["Foo", "Bar", "Crushdada"];
console.log(ar.includes("Foo")); //true

• ES7 允许用表达式计算乘方

阅读更多

ES6 模块化

模块化好处：

• 防止命名冲突
• 代码复用
• 高维护性

阅读更多

ES6 对象方法的扩展

Object.is()：

• 判断两个值是否相等

阅读更多

ES6 数值扩展

运算打印一个浮点数，发现结果并非预期

1
2

console.log(0.1 + 0.2); //0.30000000000000004
console.log(0.1 + 0.2 == 0.3); //false

阅读更多