vue手册： 2

ES2015: 2

一.一言蔽之 2

二.ES2015给java开发带来了什么？ 2

三.ES2015新语法详解 3

四.ES2015的前端开发实战 7

五.ES2015的Node.js开发实战 8

六.一窥ES7 8

七.后记 8

vue.js 1.0解读： 8

vue手册：

必备基础：html5，es6，git。

vue起始就是个文件库，node-modules，他的运行底层还是借助es5+。

ES2015:

1.一言蔽之

ES2015 标准提供了许多新的语法和编程特性以提高 JavaScript 的开发效率和体验

2.ES2015给java开发带来了什么？

2.1.语法糖

语法糖(Syntactic sugar)，也译为糖衣语法，是由英国计算机科学家彼得·约翰·兰达(Peter J. Landin)发明的一个术语，指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会

2.2.工程优势

JavaScript 的模块化构建：

从许多年前开始，各大公司、团队、大牛都相继给出了他们对于这个问题的不同解决方案，以至于定下了如 CommonJS、AMD、CMD 或是 UMD 等 JavaScript 模块化标准，RequireJS、SeaJS、FIS、Browserify、webpack 等模块加载库都以各自不同的优势占领著一方土地

解读实例：

//import引入文件。‘fs’，‘readline’，‘path’文件格式，但是里面一般都export语法。fs,readline,path就是申明文件export对象的实例变量

import fs from 'fs'

import readline from 'readline'

import path from 'path'

let Module = {

//noop代表函数名称

readLineInFile(filename, callback = noop, complete = noop) {

//readline里面有createInterface方法，他的参数是一个对象input: fs.createReadStream(path.resolve(__dirname, './big_file.txt')

let rl = readline.createInterface({

input: fs.createReadStream(path.resolve(__dirname, './big_file.txt'))

})

rl.on('line', line => {

//... do something with the current line

callback(line)

})

rl.on('close', complete)

return rl

}

function noop() { return false }

export default Module

可惜的是，目前暂时还没有任何浏览器厂商或是 JavaScript 引擎支持这种模块化语法。所以我们需要用 babel 进行转换为 CommonJS、AMD 或是 UMD 等模块化标准的语法。

3.ES2015新语法详解

3.1. let、const和块级作用域

const定义常量的

var i 一直存在整个上下文。

var buttons = document.querySelectorAll('button')

var output = document.querySelector('#output')

for (var i = 0; i < buttons.length; i++) {

buttons[i].addEventListener('click', function() {

output.innerText = buttons[i].innerText

})

}

</script>

执行完了，真个页面对于i是4，四个按钮因为上下文变化的var i，所以他们都是4，所以会报错Uncaught TypeError: Cannot read property 'innerText' of undefined

解决方案：用let。

let 语句会使该变量处于一个块级作用域中；

块级作用域

3.2. 箭头函数（Arrow Function）

使用方法

let names = [ 'Will', 'Jack', 'Peter', 'Steve', 'John', 'Hugo', 'Mike' ]

let newSet = names

.map((name, index) => {

return {

id: index,

name: name

}

})

.filter(man => man.id % 2 == 0)

.map(man => [man.name])

.reduce((a, b) => a.concat(b))

console.log(newSet) //=> [ 'Will', 'Peter', 'John', 'Mike' ]

箭头函数与上下文绑定：

对函数内部的上下文（this）绑定为定义函数所在的作用域的上下文

let obj = {

hello: 'world',

foo() {

let bar = () => {

return this.hello

}

return bar

}

window.hello = 'ES6'

window.bar = obj.foo()

window.bar() //=> 'world'

注意事项

3.3. 模板字符串

支持变量注入

let name = 'Will Wen Gunn'

let title = 'Founder'

let company = 'LikMoon Creation'

let greet = `Hi, I'm ${name}, I am the ${title} at ${company}`

支持换行

let sql = `

SELECT * FROM Users

WHERE FirstName='Mike'

LIMIT 5;

3.4. 对象字面量扩展语法

方法属性省略function

let obj = {

// before

foo: function() {

return 'foo'

// after

bar() {

return 'bar'

}

支持注入_proto_

a：

class Foo {

constructor() {

this.pingMsg = 'pong'

}

ping() {

console.log(this.pingMsg)

}

let o = {

__proto__: new Foo()

}

o.ping() //=> pong

b：

let o = {

__proto__: new Foo(),

constructor() {

this.pingMsg = 'alive'

msg: 'bang',

yell() {

console.log(this.msg)

}

o.yell() //=> bang

o.ping() //=> alive

同名方法属性省略语法

// module.js

export default {

someMethod

}

function someMethod() {

// ...

}

// app.js

import Module from './module'

Module.someMethod()

可以动态计算的属性名称：

let arr = [1, 2, 3]

let outArr = arr.map(n => {

return {

[ n ]: n,

[ `${n}^2` ]: Math.pow(n, 2)

}

})

console.dir(outArr) //=>

[

{ '1': 1, '1^2': 1 },

{ '2': 2, '2^2': 4 },

{ '3': 3, '3^2': 9 }

]

3.5. 表达式解构

3.6. 函数参数表达、传参

默认参数值

后续传参

注意事项

解构传参

注意事项

3.7. 新的数据结构

Set和WeakSet

Map和WeakMap

3.8. 类(Classes)

语法

定义

继承

静态方法

遗憾与期望

3.9. 生成器（Generator）

来龙

基本概念

Generator Function

Generator

基本使用方法

3.10. promise

概念

基本用法

弊端

3.11. 原生的模块化

历史小回顾

基本用法

全局引入

局部引入

接口暴露

降级兼容

3.12. Symbol

黑科技

3.13.Proxy(代理）

四.ES2015的前端开发实战

1. 构建界面

2. 结构定义

3. 架构设计

模块化

数据支持

界面渲染

4.构建应用

入口文件

数据层:文章

路由:首页

准备页面渲染

加载数据

设计组件

路由:文章页面

路由:发布新文章

5.路由绑定

6.合并代码

五.ES2015的Node.js开发实战

1.架构设计

2.构建应用

入口文件

数据抽象层

Posts控制器

API获取所有文章，获取指定文章，发布新文章。

Comments

API获取指定文章的评论，发表新评论

配置路由

3.配置任务文件

4.部署到DaoCloud

Dockerfile

创建DaoCloud上的MongoDB的服务

代码创建

六.一窥ES7

1.async/await

2.Decorators

简单实例

黑科技

七.后记

ES6重点：

import，export，=>,module等。

es6特点：

定义函数：

var human={

breath(name){

console.log(name+"is breathing...");

}

vue.js 1.0解读：

安装：

安装vue库；默认在C:\Users\Administrator\AppData\Roaming\npm\node_modules可以看到npm安装的全局库

vue install -g vue --registry=https://registry.npm.taobao.org;

安装vue命令行库：

vue install -g vue-cli;

查看版本：

vue -V；

理解

组件即对象：

对象的固定属性都是要美元符引用的。每个属性也可以看作是一个对象

vue-ES2015:相关推荐

硬核开篇：Arco Vue + Flask 手把手实战开发一测试需求平台
✍ 此系列为整理分享已完结入门搭建<TPM提测平台>系列的迭代版,拥抱Vue3.0将前端框架替换成字节最新开源的arco.design,其中约60%重构和20%新增内容,定位为从 0-1手 ...
vue启动项目报错 Couldn‘t find preset “es2015“ relative to directory
解决方法 1.安装 ES 标准 npm install babel-preset-es2015 --save-dev 2.在webpack.base.conf.js文件中加入如下代码 module: ...
第四天：Vue组件的slot以及webpack
插槽认识slot 在生活中,很多地方都有插槽,电脑的USB插槽,插板中的电源插槽等. 插槽的目的是让我们原来的设备具备更多的扩展性.比如电脑的USB我们可以插入U盘.鼠标.键盘.硬盘.手机.音响等等 ...
【转】Vue.js 2.0 快速上手精华梳理
Vue.js 2.0 快速上手精华梳理 Sandy 发掘代码技巧:公众号:daimajiqiao 自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新 ...
用 cooking 搭建一个简单又优雅的 Vue 项目开发环境 (入门篇)
本文适合 Vue 的初学者,以及对 webpack 不熟悉的同学阅读.前提是你要会用基本的命令行. Node 和 NPM,以及掌握 ES2015 的基础知识.本文都是在 macOS 环境下运行,要求使 ...
Vue开发入门看这篇文章就够了
摘要: 很多值得了解的细节. 原文:Vue开发看这篇文章就够了作者:Random Fundebug经授权转载,版权归原作者所有. 介绍 Vue 中文网 Vue github Vue.js 是一套构建 ...
VS Code 成主宰、Vue 备受热捧！2019 前端开发趋势必读
前端在生产和开发中占据着越来越重要的地位,PC 端.手机端.桌面端.智能手表端等等设备都离不开前端的身影.本文将围绕框架.编程语言.工具.React.Vue 等方面,全面回顾 2019 年前端与 We ...
Vue之Todolist案例和ES6语法
2.7 Todolist案例 2.7.1 准备工作 <!DOCTYPE html> <html> <head><meta charset="utf- ...
iView：一套基于Vue的高质量UI组件库
基于Vue的UI组件库现在已经有很多了,尤其是移动端的.现在又多了一个 iView . 先睹为快 iView 主要服务于PC界面的中后台业务,是一套高质量的开源UI组件库,先上地址: github.c ...
vue音乐项目歌手详情页小结
技术栈 1,vue 2,vuex 3,vue-router(子路由) 需求分析 1)歌手列表点击歌手会跳转到下级页面歌手详情页,歌手详情页由四个部分组成歌手图片返回按钮:点击返回歌手tab页随机 ...

vue-ES2015:

vue手册：

ES2015:

2.1.语法糖

2.2.工程优势

3.ES2015新语法详解

3.1. let、const和块级作用域

3.2. 箭头函数（Arrow Function）

3.3. 模板字符串

3.4. 对象字面量扩展语法

3.5. 表达式解构

3.6. 函数参数表达、传参

3.7. 新的数据结构

3.8. 类(Classes)

3.9. 生成器（Generator）

3.10. promise

3.11. 原生的模块化

3.12. Symbol

3.13.Proxy(代理）

vue.js 1.0解读：

安装：

理解

vue-ES2015:相关推荐

最新文章

热门文章