时光的涂鸦墙

语法

基础语法

1
2
3
4
5
6
7
8
9
10

(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
         // equivalent to:  => { return expression; }

// 如果只有一个参数，圆括号是可选的:
(singleParam) => { statements }
singleParam => { statements }

// 无参数的函数需要使用圆括号:
() => { statements }

高层级的变化

• 模板解析器不再依赖于 DOM（除非你使用真正的 DOM 作为模板），因此只要你使用字符串模板，你将不再受到任何 1.0 版本中的解析限制。但是，如果你依赖在存在的内容中挂载一个元素作为模板（使用el元素），你将依然受到这些限制。
• 编译器（将字符串模板转换为渲染方法的部分）和运行时间现在能够被分开。这里有两种不同的构建：
  • 独立构建：包括编译并且运行。这种方式和vue 1.0几乎完全一样。
  • 运行时编译：由于它不包括编译器，在编译步骤时要么预编译模板，要么手动编写渲染功能。npm 包默认导出这个版本，那么你需要有一个编译的过程（使用Browserify或Webpack）,从中vueify或vue-loader将可以进行模板预编译。

由于 FetchAPI 是基于 Promise 设计，有必要先学习一下 Promise，推荐阅读 MDN Promise 教程
本文章内容推荐阅读 MDN Fetch 教程

数组的创建

1
2
3
4

var arrayObj = []; //普通数组创建
var arrayObj = new Array();　//创建一个数组
var arrayObj = new Array([size]);　//创建一个数组并指定长度，注意不是上限，是长度
var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]);　//创建一个数组并赋值

语法

• 用于函数调用

  1	myFunction(...iterableObj)

• 用于数组字面量

  1	;[...iterableObj, 4, 5, 6]

Flex 容器属性

display

定义一个 Flex 容器，根据其取的值来决定是内联还是块。Flex 容器会为其内容建立新的伸缩格式化上下文。

1
2
3

.container {
  display: flex; /* or inline-flex */
}

Redux 主要分为三个部分 Action、Reducer、及 Store

原理：

• view直接触发dispatch；
• 将action发送到reducer中后，根节点上会更新 state，改变全局view。

组件的生命周期包含三个主要部分：

• 挂载： 组件被插入到 DOM 中。
• 更新： 组件被重新渲染，查明 DOM 是否应该刷新。
• 移除： 组件从 DOM 中移除。

react-router API

基本用法

安装命令：

1

$ npm install -S react-router

使用展示：

filter的使用方法

• 在模板中使用filter

我们可以直接使用filter，跟在表达式后面用 | 分割

{{ expression | filter }}

也可以多个filter连用，上一个filter的输出将作为下一个filter的输入