1. ElementUI介绍

1.1 什么是ElementUI

1.2 ElementUI 常用组件

?2. ES6

2.1 什么是ES6

1. ElementUI介绍

1.1 什么是ElementUI

Element ， “ 饿了么 ” 出品的一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面

端组件库。

1.2 ElementUI 常用组件

详见 elementUI官网 Element - The world's most popular Vue UI framework

?2. ES6

2.1 什么是ES6

编程语言 JavaScript 是 ECMAScript 的实现和扩展。 ECMAScript 是由 ECMA （一个类似

W3C 的标准组织）参与进行标准化的语法规范。 ECMAScript 定义了：

语言语法 – 语法解析规则、关键字、语句、声明、运算符等。

类型 – 布尔型、数字、字符串、对象等。

原型和继承

内建对象和函数的标准库 – JSON 、 Math 、数组方法、对象自省方法等。

ECMAScript 标准不定义 HTML 或 CSS 的相关功能，也不定义类似 DOM （文档对象模型）

的 Web API ，这些都在独立的标准中进行定义。 ECMAScript 涵盖了各种环境中 JS 的使用

场景，无论是浏览器环境还是类似 node.js 的非浏览器环境。

ECMAScript 6.0 （以下简称 ES6 ）是 JavaScript 语言的下一代标准， 2015 年 6 月正式发

布。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开

发语言。

ECMAScript 标准的历史版本分别是 1 、 2 、 3 、 5 。

2.2 常用语法新特性

2.2.1 变量声明let

我们都是知道在 ES6 以前， var 关键字声明变量。无论声明在何处，都会被视为声明在函

数的最顶部(不在函数内即在全局作用域的最顶部) 。这就是函数变量提升例如

function aa() { 
    if(true) { 
        var test = 'hello man' 
    }
    alert(test) 
}

以上的代码实际上是 :

function aa() { 
    var test; 
    if(true) { 
        test = 'hello man' 
    }
    alert(test) 
}

接下来 ES6 主角登场：

我们通常用 let 和 const 来声明， let 表示变量、 const 表示常量。 let 和 const 都是块级作用

域。怎么理解这个块级作用域？在一个函数内部，在一个代码块内部。看以下代码

function aa() { 
    if(bool) { 
        let test = 'hello man' 
    } else { 
        //test 在此处访问不到 
        console.log(test) 
    } 
}

2.2.2 常量声明

const 用于声明常量

const name = 'lux' 
name = 'joe' //再次赋值此时会报错

2.2.3 模板字符串

es6 模板字符简直是开发者的福音啊，解决了 ES5 在字符串功能上的痛点。

第一个用途，基本的字符串格式化。将表达式嵌入字符串中进行拼接。用 ${} 来界定。

//es5 
var name = 'lux' 
console.log('hello' + name) 

//es6 const name = 'lux' 
console.log(`hello ${name}`) //hello lux

第二个用途，在 ES5 时我们通过反斜杠 () 来做多行字符串或者字符串一行行拼接。 ES6 反

引号 (``) 直接搞定

// es5 
var msg = "Hi \ man!" 

// es6 
const template = `<div> 
    <span>hello world</span> 
</div>`

2.2.4 箭头函数

ES6 很有意思的一部分就是函数的快捷写法。也就是箭头函数。

箭头函数最直观的三个特点。

1 不需要 function 关键字来创建函数

2 省略 return 关键字

3 继承当前上下文的 this 关键字

看下面代码（ ES6 ）

(response,message) => {
     ....... 
}

相当于 ES5 代码

function(response,message){
     ...... 
}

[JavaScript知识库]ElementUI和ES6简介

1. ElementUI介绍

1.1 什么是ElementUI

1.2 ElementUI 常用组件

?2. ES6

2.1 什么是ES6

2.2 常用语法新特性

2.2.1 变量声明let

2.2.2 常量声明

2.2.3 模板字符串

2.2.4 箭头函数