前者MVC Vue2学习总计(七)——ES6与Module模块化、Vue-cli脚手架搭建、开发、公布项目与综合示范

1.4. Spread / Rest 操作符

Spread / Rest 操作符指的是 …,具体是 Spread 依旧 Rest
要求看上下文语境。

当被用于迭代器中时,它是三个 Spread 操作符:

function foo(x,y,z) {
  console.log(x,y,z);
}

let arr = [1,2,3];
foo(...arr); // 1 2 3

示例:

        <script type="text/javascript">
            function show(n1,n2,n3){
                console.log(n1,n2,n3);
            }

            var arr=[5,7,9,1,6,7];
            show(1,2,3);
            show(arr);

            show(...arr);  //将数组中的前3位取出作为3个参数的值
        </script>

结果:

ECMAScript 1

当被用来函数字传送参时,是三个 Rest 操作符:

function foo(...args) {
  console.log(args);
}
foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

示例:

        <script type="text/javascript">
            function show(...args){  //可变参数,args是一个数组
                console.log(args);
            }

            show(1,2,3,true,false,'Hello'); 
        </script>

结果:

ECMAScript 2

1.11. Map 和 WeakMap

ES6 中三种新的数据结构集:Map 和 WeakMap。事实上各类对象都足以视作是一个Map。

2个目的由多少个 key-val 对构成,在 Map 中,任何类型都得以看作靶子的
key,如:

var myMap = new Map();

var keyString = "a string",
    keyObj = {},
    keyFunc = function () {};

// 设置值
myMap.set(keyString, "value 与 'a string' 关联");
myMap.set(keyObj, "value 与 keyObj 关联");
myMap.set(keyFunc, "value 与 keyFunc 关联");

myMap.size; // 3

// 获取值
myMap.get(keyString);    // "value 与 'a string' 关联"
myMap.get(keyObj);       // "value 与 keyObj 关联"
myMap.get(keyFunc);      // "value 与 keyFunc 关联"
WeakMap

WeakMap 正是2个 Map,只不过它的有着 key 都以弱引用,意思正是 WeakMap
中的东西垃圾回收时不考虑,使用它并非顾虑内存泄漏难题。

另多少个急需注意的点是,WeakMap 的享有 key 必须是指标。它唯有多少个方式delete(key),has(key),get(key) 和 set(key, val):

let w = new WeakMap();
w.set('a', 'b'); 
// Uncaught TypeError: Invalid value used as weak map key

var o1 = {},
    o2 = function(){},
    o3 = window;

w.set(o1, 37);
w.set(o2, "azerty");
w.set(o3, undefined);

w.get(o3); // undefined, because that is the set value

w.has(o1); // true
w.delete(o1);
w.has(o1); // false

七、示例

https://git.coding.net/zhangguo5/vue2.git

2.2、在Node.js中使用Module

升高node 8.5 使用
experimental-modules参数,且供给具有文件名后缀都要修改为mjs
node –experimental-modules index.mjs
概念模块lib.mjs:

/**
 *定义模块
 */
//导出
export let msg="求和:";
export function sum(n){
    let total=0;
    for(var i=1;i<=n;i++){
        total+=i;
    }
    return total;
}

定义main.mjs文件

/**
 * 使用模块
 */
//导入
import { sum, msg } from './lib.mjs';
let result = sum(100);
console.log(msg + "" + result);

在指令行下转换来当前目录,使用node加参数experimental-modules执行,结果如下:

ECMAScript 3

1.12. Set 和 WeakSet

Set
对象是一组不另行的值,重复的值将被忽视,值类型能够是原始类型和引用类型:

let mySet = new Set([1, 1, 2, 2, 3, 3]);
mySet.size; // 3
mySet.has(1); // true
mySet.add('strings');
mySet.add({ a: 1, b:2 });
可以通过 forEach 和 for...of 来遍历 Set 对象:

mySet.forEach((item) => {
  console.log(item);
    // 1
    // 2
    // 3
    // 'strings'
    // Object { a: 1, b: 2 }
});

for (let value of mySet) {
  console.log(value);
    // 1
    // 2
    // 3
    // 'strings'
    // Object { a: 1, b: 2 }
}

Set 同样有 delete() 和 clear() 方法。

语法

Object.setPrototypeOf(obj, prototype)

运用vue-cli能够正式项目,进步开发作用,可是利用vue-cli时需求有的ECMAScript6的学识,尤其是ES6中的模块管理内容,本章先介绍ES6中的基础与模块化的剧情再利用vue-cli开发vue项目。

四、TodoList示例

3.伍 、打包龙图布

协调的连串文件都急需安置 src 文件夹下

品类支出成功之后,能够输入 npm run build 来拓展包装工作

npm run build

打包达成后,会生成 dist
文件夹,即使已经修改了文本路径,可以平昔打开当麻芋果件查看

品种上线时,只必要将 dist 文件夹放到服务器就行了。

2.4.贰 、导出格局二

在export接口的时候, 大家能够应用 XX as YY, 把导出的接口名字改了,
比如: closureFn as sayingFn, 把那些接口名字改成不看文书档案就知道怎么的

//lib.js文件
let fn0 = function() {
    console.log("fn0");
};
let obj0 = {}
export { fn0 as foo, obj0 as bar};

//main.js文件
import {foo, bar} from "./lib";
foo();
console.log(bar);

 

2.3.2、转换ES6为ES5

当环境准备好了,就足以编写制定3个es6作风的公文如:es6.js,内容如下:

let add=(x,y)=>x+y;
const n1=100,n2=200;
var result=add(n1,n2);
console.log(result);

在当前目录执行命令:

babel es6.js -o es5.js

ECMAScript 4

改换后的结果es5.js:

"use strict";

var add = function add(x, y) {
  return x + y;
};
var n1 = 100,
    n2 = 200;
var result = add(n1, n2);
console.log(result);

从转换后的结果能够看到es6已变成es5了,箭头函数不见了。 

WeakSet

看似于 WeakMap,WeakSet 对象能够让你在一个聚众中保存对象的弱引用,在
WeakSet 中的对象只同意出现贰遍:

var ws = new WeakSet();
var obj = {};
var foo = {};

ws.add(window);
ws.add(obj);

ws.has(window); // true
ws.has(foo);    // false, foo 没有添加成功

ws.delete(window); // 从结合中删除 window 对象
ws.has(window);    // false, window 对象已经被删除

1.2. 箭头函数(Arrow Functions)

ES6 中,箭头函数就是函数的一种简写形式,使用括号包裹参数,跟随贰个=>,紧接着是函数体:

var getPrice = function() {
  return 4.55;
};

// Implementation with Arrow Function
var getPrice = () => 4.55;

需求留意的是,上边例子中的 getPrice 箭头函数选取了简洁函数体,它不需求reture 语句,上边那么些例子使用的是寻常函数体:

let arr = ['apple', 'banana', 'orange'];

let breakfast = arr.map(fruit => {
  return fruit + 's';
});
console.log(breakfast); // apples bananas oranges

本来,箭头函数不仅仅是让代码变得不难,函数中 this
总是绑定总是指向目标自笔者。具体能够看看上边多少个例证:

function Person() {
  this.age = 0;

  setInterval(function growUp() {
    // 在非严格模式下,growUp() 函数的 this 指向 window 对象
    this.age++;
  }, 1000);
}
var person = new Person();

大家平常索要利用二个变量来保存 this,然后在 growUp 函数中引用:

function Person() {
  var self = this;
  self.age = 0;

  setInterval(function growUp() {
    self.age++;
  }, 1000);
}

而使用箭头函数能够节省那几个麻烦:

function Person(){
  this.age = 0;

  setInterval(() => {
    // |this| 指向 person 对象
    this.age++;
  }, 1000);
}

var person = new Person();

示例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>ES6</title>
    </head>

    <body>
        <script type="text/javascript">
            var add1 = function(a, b) {
                return a + b;
            }
            var add2 = (a, b) => a + b;

            var f1 = function(n) {
                return n + 1;
            }
            var f2 = n => n + 1;

            function counter1() { //普通情况
                this.n = 100;
                var self = this;
                (function(i) {
                    self.n += i;
                    console.log(self.n);
                })(50);
            }
            var c1 = new counter1();

            function counter2() {
                this.n = 100;
                setTimeout(function() { //错误,this指向window
                    console.log(this);
                    this.n += 50;
                    console.log(this.n);
                }, 1000);
            }
            var c2 = new counter2();

            function counter3() {
                this.n = 100;
                setTimeout(() => { //箭头函数,this指向当前对象
                    console.log(this);
                    this.n += 50;
                    console.log(this.n);
                }, 1000);
            }
            var c3 = new counter3();
        </script>
    </body>

</html>

结果:

ECMAScript 5

参数

obj
将棉被服装置原型的对象.

prototype
该指标新的原型(可以是1个目的恐怕null).

3.三 、运维品种

6)、运行项目,输入:npm run
dev。服务运营成功后浏览器会暗许打开3个“欢迎页面”,如下图:

ECMAScript 6

编写翻译成功后能够直接在浏览器中查看项目:

ECMAScript 7

3.1.② 、修改npm为天猫镜像(非要求)

因为npm的仓库有为数不少在国外,访问的快慢较慢,提出修改成cnpm,换到taobao的镜像。

开拓命令行工具,复制如下配置:

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

安装那里是因为我们用的npm的服务器是国外,有的时候大家设置“正视”的时候很不快一点也不快顶尖慢,所以就用那几个cnpm来安装大家说必要的“正视”。安装到位之后输入
cnpm -v,如下图,若是出现相应的本子号,则表明安装成功。

ECMAScript 8

版本号:

ECMAScript 9

1.0.学学能源

作者引进的ES6上学材质是开源书籍《ECMAScript 6
入门》
,周密介绍 ECMAScript 6
新引入的语法天性。

ECMAScript 10

URL:http://es6.ruanyifeng.com/

源码:https://github.com/ruanyf/es6tutorial/

1.8. 目的超类

ES6 允许在目的中选拔 super 方法:

var parent = {
  foo() {
    console.log("Hello from the Parent");
  }
}

var child = {
  foo() {
    super.foo();
    console.log("Hello from the Child");
  }
}

Object.setPrototypeOf(child, parent);
child.foo(); // Hello from the Parent
             // Hello from the Child

示例:

            var car={
                voice(){
                    console.log("车在叫...");
                }
            };

            var bus={
                voice(){
                    super.voice();
                    console.log("大巴车在叫...");
                }
            }
            Object.setPrototypeOf(bus,car);  //将bus的原型指向car
            bus.voice();

结果:

ECMAScript 11

3.一 、环境搭建

二、ES6中的Module模块化

ES6在此以前运用RequireJS或然seaJS完结模块化,
requireJS是基于AMD规范的模块化库, 而像seaJS是基于CMD规范的模块化库,
两者都是为了为了加大前端模块化的工具。

明天ES6自带了模块化, 也是JS第①回帮忙module, 在很久未来,我们能够直接效率import和export在浏览器中程导弹入和导出各类模块了,
3个js文件表示1个js模块;

当代浏览器对模块(module)帮衬程度不一, 最近都以运用babelJS,
只怕Traceur把ES6代码转化为包容ES5版本的js代码;

1.14. Symbol

Symbol 是一种新的数据类型,它的值是绝无仅有的,不可变的。ES6 中建议 symbol
的指标是为着转变二个唯一的标识符,可是你拜访不到这几个标识符:

var sym = Symbol( "some optional description" );
console.log(typeof sym); // symbol

瞩目,那里 Symbol 前面不可能利用 new 操作符。

要是它被当做贰个对象的性质,那么那一个本性会是成千成万的:

var o = {
    val: 10,
    [ Symbol("random") ]: "I'm a symbol",
};

console.log(Object.getOwnPropertyNames(o)); // val

设若要博取对象 symbol 属性,须求使用 Object.getOwnPropertySymbols(o)。

叁 、Vue-cli脚手架搭建、开发与发布项目

单页Web应用(single page web
application,SPA),便是唯有一张Web页面包车型大巴选取,是加载单个HTML
页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

提供1个官方命令行工具,可用以急速搭建大型单页应用(SPA)。该工具为现代化的前端开发工作流提供了开箱即用的创设配置。只需几分钟即可创设并运维一个带热重载、保存时静态检查以及可用于生产环境的构建配置的品种:

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev

小心:CLI 工具假定用户对 Node.js
和血脉相通创设筑工程具有肯定水平的问询。假设你是新手,我们强烈提出先在毫不创设筑工程具的意况下通读指南,在熟练Vue 自身之后再使用 CLI。

4.陆 、发表项目

进去项指标当前目录,在dos下实施npm run build

ECMAScript 12

 当发布成功时会生成三个dist的目录,那就是最终运维的品种,代码通过了转移,压缩,混淆。

2.3.① 、配置环境

安装babel命令行工具:

npm install --global babel-cli

ECMAScript 13

设置成功后得以选用babel -V查看版本,可以使用babel -help 查看扶助

ECMAScript 14

始建项目,在当前项目中信赖babel-core

借使当前项目标目录为:E:\Desktop-temp\xww\FastResponse\Mobile\Hybird\vue2_01\vue07_03_babel

选拔npm init能够开始化当前项目为node项目

npm install babel-core --save

借助于插件babel-preset-es二零一五

ECMAScript,假诺想选用es6语法,必须安装3个插件

npm install babel-preset-es2015

接下来在文件夹上面创立三个叫.babelrc的公文,并写入如下代码:

{
"presets": ["es2015"]
}

windows不支持直接下令为.babelrc,能够在DOS下选取@echo结合>完毕:

ECMAScript 15

.babelrc文件以rc结尾的公文一般代表运维时自动加载的文件,配置等等的,类似bashrc,zshrc。同样babelrc在此地也是有雷同的功能的,而且在babel6中,这么些文件必不可少。
在babel6中,预设了6种,分别是:es2015、stage-0、stage-1、stage-2、stage-3、react

2.4.三 、导出格局三

这种形式是直接在export的地点定义导出的函数,也许变量:

//lib.js文件
export let foo = ()=> {console.log("fnFoo") ;return "foo"},bar = "stringBar";

//main.js文件
import {foo, bar} from "./lib";
console.log(foo());
console.log(bar);

 

4.五 、测试结果

ECMAScript 16

2.3、Babel

Babel是3个大面积选择的转码器,能够将ES6代码转为ES5代码,从而在存活条件实行。

ECMAScript 17

4.壹 、创造项目

在磁盘中新建1个空文件夹作为项目标根目录,如c:\todolist

ECMAScript 18

动用webpack的模板初步化二个档次:vue init webpack todolist

ECMAScript 19

2.3.三 、使用babel-node运维ES6模块化代码

babel-cli工具自带贰个babel-node命令,提供一个支撑ES6的REPL环境。它扶助Node的REPL(交互式解释器环境)环境的全数功效,而且能够一直运维ES6代码。

ECMAScript 20

在当前目录下开创lib.js文件:

/**
 *定义模块
 */
//导出
export let msg="求和:";
export function sum(n){
    let total=0;
    for(var i=1;i<=n;i++){
        total+=i;
    }
    return total;
}

开创main.js文件调用定义好的模块:

/**
 * 使用模块
 */
//导入
import { sum, msg } from './lib.js';
let result = sum(100);
console.log(msg + "" + result);

在命令行执行:babel-node main.js 结果如下:

ECMAScript 21

到那边共讲解了3种能够运维ES6模块化的条件,任选一种能够用来学习。

1.1. let、const 和块级功效域

let 允许创立块级功效域,ES6 推荐在函数中应用 let 定义变量,而非 var:

var a = 2;
{
  let a = 3;
  console.log(a); // 3
}
console.log(a); // 2

一律在块级功用域有效的另3个变量注明情势是
const,它能够声惠氏(WYETH)个常量。ES6 中,const
证明的常量类似于指针,它指向某些引用,也正是说那么些「常量」并非依样画葫芦的,如:

{
  const ARR = [5,6];
  ARR.push(7);
  console.log(ARR); // [5,6,7]
  ARR = 10; // TypeError
}

有多少个点必要注意:

  • let 关键词注明的变量不抱有变量升高(hoisting)天性
  • let 和 const 评释只在最靠近的贰个块中(花括号内)有效
  • 当使用常量 const 注解时,请使用大写变量,如:CAPITAL_CASING
  • const 在宣称时务必被赋值

私下认可情形下javascript中并从未块级(block)成效域:

            var i = 100;
            if(true) {
                var i=200;
                console.log(i);
            }
            console.log(i);

结果:

ECMAScript 22

使用let定义:

            let i = 100;
            if(true) {
                //var i=200;  //Identifier 'i' has already been declared  变量定义
                let i=200;
                console.log(i);
            }
            console.log(i);

结果:

ECMAScript 23

 暗中认可情况javascript中定义的变量都以弱类型的,能够动态变化:

            let i = 100;
            if(true) {
                i=true;
                console.log(i);
            }
            console.log(i);

结果:

ECMAScript 24

倘诺选用const定义,则必须赋值且不允许修改。

1.16. Generators

Generator 函数是 ES6
的新特点,它同意三个函数重返的可遍历对象生成多少个值。

在使用中您会看出 * 语法和二个新的根本词 yield:

function *infiniteNumbers() {
  var n = 1;
  while (true){
    yield n++;
  }
}

var numbers = infiniteNumbers(); // returns an iterable object

numbers.next(); // { value: 1, done: false }
numbers.next(); // { value: 2, done: false }
numbers.next(); // { value: 3, done: false }

老是执行 yield 时,再次来到的值变为迭代器的下三个值。

2.4.① 、导出方式一

接纳 export{接口} 导出接口, 大括号中的接口名字为地方定义的变量,
import和export是相应的;

//lib.js 文件
let bar = "stringBar";
let foo = "stringFoo";
let fn0 = function() {
    console.log("fn0");
};
let fn1 = function() {
    console.log("fn1");
};
export{ bar , foo, fn0, fn1}

//main.js文件
import {bar,foo, fn0, fn1} from "./lib";
console.log(bar+"_"+foo);
fn0();
fn1();

示例:

先计划babel的运行环境,创立util.js文件:

let PI=3.14;
function getArea(r){
    return PI*r*r;
}

//集中导出对象
export {PI,getArea}

导入模块main.js:

import {PI,getArea} from './util'

console.log("R=5时面积为:"+getArea(5));

结果:

ECMAScript 25

ECMAScript 26

2.4、模块(Modules)

ES6从语言层面对模块举办了支撑。编写格局借鉴了流行的JavaScript模块加载器(AMD,
CommonJS)。由宿主环境的私下认可加载器定义模块运营时的行事,接纳隐式异步格局——在模块能够被拿走和加载前不会有代码执行。

概念模块:

// lib/math.js

export function sum(x, y) {
return x + y;
}
export var pi = 3.141593;

导入模块:

//全部导入  
import people from './example'  

//有一种特殊情况,即允许你将整个模块当作单一对象进行导入  
//该模块的所有导出都会作为对象的属性存在  
import * as example from "./example.js"  
console.log(example.name)  
console.log(example.age)  
console.log(example.getName())  

//导入部分  
import {name, age} from './example'  

//导出默认, 有且只有一个默认  
export default App  

// 部分导出  
export class App extend Component {};  

*表示全部,as取小名

// app.js

import * as math from "lib/math";
console.log("2π = " + math.sum(math.pi, math.pi));

// otherApp.js

导入部分剧情

import {sum, pi} from "lib/math";
console.log("2π = " + sum(pi, pi));

再有的意义包涵:export default and export *:

// lib/mathplusplus.js

export * from "lib/math";
export var e = 2.71828182846;
export default function(x) {
return Math.exp(x);
}

// app.js

import exp, {pi, e} from "lib/mathplusplus";
console.log("e^π = " + exp(pi));

导入的时候有没有大括号的界别:

  • 1.当用export default people导出时,就用 import people
    导入(不带大括号)
  • 2.贰个文件里,有且不得不有多个export default。但可以有多少个export。
  • 3.当用export name 时,就用import { name }导入(记得带上海大学括号)
  • 4.当贰个文书里,既有贰个export default people, 又有八个export name
    或然 export age时,导入就用 import people, { name, age }
  • 5.当贰个文本里出现n多少个 export
    导出广大模块,导入时除了一个三个导入,也得以用import * as example

模块的格式:

Babel能够将ES2014的模块转换为一下二种格式:Common.js,AMD,System,以及UMD。你照旧足以创制你本人的法门。

1.3. 函数参数私下认可值

ES6 中允许你对函数参数设置私下认可值:

let getFinalPrice = (price, tax=0.7) => price + price * tax;
getFinalPrice(500); // 850

示例:

            function add(n1=100,n2=200){
                return n1+n2;
            }

            console.log(add());
            console.log(add(1));
            console.log(add(1,1));

结果:

ECMAScript 27

1.15. 迭代器(Iterators)

迭代器允许每一遍访问数据集合的三个元素,当指针指向数据集合最终八个因素是,迭代器便会脱离。它提供了
next() 函数来遍历多个体系,这几个措施重回二个富含 done 和 value
属性的对象。

ES6 中能够透过 Symbol.iterator
给指标设置暗许的遍历器,无论如何时候对象须求被遍历,执行它的 @@iterator
方法便得以回来三个用以获取值的迭代器。

数组暗中同意便是三个迭代器:

var arr = [11,12,13];
var itr = arr[Symbol.iterator]();

itr.next(); // { value: 11, done: false }
itr.next(); // { value: 12, done: false }
itr.next(); // { value: 13, done: false }

itr.next(); // { value: undefined, done: true }
你可以通过 [Symbol.iterator]() 自定义一个对象的迭代器。

1.7. 目的和数组解构

解构能够避免在指标赋值时发生中间变量:

function foo() {
  return [1,2,3];
}
let arr = foo(); // [1,2,3]

let [a, b, c] = foo();
console.log(a, b, c); // 1 2 3

function bar() {
  return {
    x: 4,
    y: 5,
    z: 6
  };
}
let {x: x, y: y, z: z} = bar();
console.log(x, y, z); // 4 5 6

示例:

            function getArray(){
                return [1,3,5];
            }
            let [n1,n2,n3,n4]=getArray();   //调用函数,将数组值分别给n1,n2,n3
            console.log(n1,n2,n3,n4);

            function getObj(){
                return {name:"tom",age:18};
            }
            let {name:nickname,age:myage}=getObj();  //将对象的name与age给定义的变量赋值
            console.log(nickname,myage);

结果:

ECMAScript 28

1.6. 二进制和八进制字面量

ES6 帮助二进制和八进制的字面量,通过在数字前边添加 0o 可能 0O
即可将其更换为二进制值:

let oValue = 0o10;
console.log(oValue); // 8

let bValue = 0b10; // 二进制使用 `0b` 或者 `0B`
console.log(bValue); // 2

2.4.伍 、导出形式五

export也能暗中认可导出函数, 在import的时候, 名字随便写,
因为每一个模块的暗许接口就二个

//lib.js
let fn = () => "string";
export {fn as default};

//main.js
import defaultFn from "./lib";
console.log(defaultFn());

 

2.① 、ES6模块化特点

一 、每1个模块只加载贰遍, 每二个JS只进行1回,
假如下次再去加载同目录下同文件,直接从内部存款和储蓄器中读取。
贰个模块正是一个单例,只怕说便是三个目的;

二 、每四个模块内注脚的变量都以部分变量, 不会污染全局成效域;

叁 、模块内部的变量或许函数可以通过export导出;

④ 、二个模块能够导入其余模块

五、作业

5.壹 、熟谙ES6的语法,写多少个箭头函数,使用Babel转换来ES5的台本。

5.二 、创制3个模块定义四个用于总括最大值的主意,引用该模块并调用总计最大值的章程输出结果。分别使用三种分裂的条件实行。

5.三 、创制1个vue-cli下的项目,达成TodoList成效,如首节所示。

5.④ 、在Vue-cli环境下定义一个分页组件,调用并宣布项目。

ECMAScript 29

务求:在第三页时,禁止使用上一页,以及首页按钮;在终极一页时,禁止使用下一页,以及尾页按钮;超出范围的页码以…来代替

4.四 、在App.Vue根组件中调用Todo组件

<template>
    <div id="app">
        <img src="./assets/logo.png">
        <TodoItem :title="'任务项'" @delete='remove'></TodoItem>
        <Todo/>
    </div>
</template>

<script>
    import HelloWorld from './components/HelloWorld'
    import TodoItem from './components/TodoItem'
    import Todo from './components/Todo'

    export default {
        name: 'app',
        components: {
            HelloWorld,
            TodoItem,
            Todo
        },
        methods: {
            remove: function() {
                alert("删除事件");
            }
        }
    }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

4.③ 、成立组件

做事基本原理在录制中已讲解,请查看摄像,在页面底部。

六、视频

https://www.bilibili.com/video/av17503637/

1.5. 对象词法增加

ES6
允许申明在指标字面量时选拔简写语法,来开首化属性别变化量和函数的定义方法,并且同目的在于目的属性中开始展览估测计算操作:

function getCar(make, model, value) {
  return {
    // 简写变量
    make,  // 等同于 make: make
    model, // 等同于 model: model
    value, // 等同于 value: value

    // 属性可以使用表达式计算值
    ['make' + make]: true,

    // 忽略 `function` 关键词简写对象函数
    depreciate() {
      this.value -= 2500;
    }
  };
}

let car = getCar('Barret', 'Lee', 40000);

// output: {
//     make: 'Barret',
//     model:'Lee',
//     value: 40000,
//     makeBarret: true,
//     depreciate: function()
// }

示例:

<script type="text/javascript">
            function createProduct(name,price){
                return {
                    "name":name,
                    "price":price,
                    "iphone8Desc":name+"_"+price,
                    "show":function(){
                        console.log("名称:"+this.name+" 价格:"+this.price);
                    }
                }
            }

            var phone1=createProduct("iphone8",5898.5);
            phone1.show();
            console.log(JSON.stringify(phone1));
            console.log(phone1);


            //ES6中定义对象的语法糖
            function createPdt(name,price){
                return {
                    name,
                    price,
                    [name+"Desc"]:name+"_"+price,
                    show(){
                        console.log("名称:"+this.name+" 价格:"+this.price);
                    }
                }
            }
            var phone2=createPdt("iphone8",5898.5);
            phone2.show();
            console.log(JSON.stringify(phone2));
            console.log(phone2);
        </script>

结果:

ECMAScript 30

2.① 、在Chrome浏览器选择Module

Chrome 61就提供了对ES2014 import语句的接济,实现模块加载

翻看版本的办法是:在chrome浏览器中输入chrome://version/

ECMAScript 31

谷歌(谷歌)浏览器(Canary 60) –
须要在chrome:flags里开启”实验性互连网平台效用(Experimental Web Platform)”

ECMAScript 32

示例:lib.js

/**
 *定义模块
 */
//导出
export let msg="求和:";
export function sum(n){
    let total=0;
    for(var i=1;i<=n;i++){
        total+=i;
    }
    return total;
}

html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Module模块</title>
    </head>
    <body>
        <script type="module">
            //导入
            import {sum,msg} from './lib.js';
            let result=sum(100);
            console.log(msg+""+result);
        </script>
    </body>
</html>

结果:

ECMAScript 33

3.二 、创设项目

1)、在硬盘上找一个文件夹放工程用的。那里有三种办法钦赐到有关目录:

①cd 目录路径

②万一以安装git的,在有关目录右键选用Git Bash Here

2)、安装vue脚手架输入:

vue init webpack projectName

在意那里的“projectName” 是项目标称谓可以说是无论的起名,不过“不能用普通话”,须要任何大写。

提示选用项:

ECMAScript 34ECMAScript 35

$ vue init webpack exprice --------------------- 这个是那个安装vue脚手架的命令
This will install Vue 2.x version of the template. ---------------------这里说明将要创建一个vue 2.x版本的项目
For Vue 1.x use: vue init webpack#1.0 exprice
? Project name (exprice) ---------------------项目名称
? Project name exprice
? Project description (A Vue.js project) ---------------------项目描述
? Project description A Vue.js project
? Author Datura --------------------- 项目创建者
? Author Datura
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安装Vue路由,也就是以后是spa(但页面应用需要的模块)
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否启用eslint检测规则,这里个人建议选no
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "exprice".
To get started: --------------------- 这里说明如何启动这个服务
cd exprice
npm install
npm run dev

View Code

ECMAScript 36

3)、cd 命令进入创设的工程目录,首先cd projectName;

ECMAScript 37

目录:

|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- dev-client.js                // 热重载相关
|   |-- dev-server.js                // 构建本地服务器
|   |-- utils.js                     // 构建工具相关
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|   |-- test.env.js                  // 测试环境变量
|-- src                              // 源码目录
|   |-- components                     // vue公共组件
|   |-- store                          // vuex的状态管理
|   |-- App.vue                        // 页面入口文件
|   |-- main.js                        // 程序入口文件,加载各种公共组件
|-- static                           // 静态文件,比如一些图片,json数据等
|   |-- data                           // 群聊分析得到的数据用于数据可视化
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|-- README.md                        // 项目说明
|-- favicon.ico 
|-- index.html                       // 入口页面
|-- package.json                     // 项目基本信息

3.1.3、安装webpack

安装webpack,打开命令行工具输入:

npm install webpack -g

ECMAScript 38

安装实现将来输入

webpack -v

如下图,若是出现相应的本子号,则证实安装成功。

ECMAScript 39

4.3.① 、创造子组件TodoItem

将品种导入到开发工具中,如HBuilder,如下所示:

ECMAScript 40

在:todolist\src\components创建TodoItem.vue组件

代码:

<template>
    <li class="item">
        {{title}} <button @click="del">x</button>
    </li>
</template>

<script>
    export default {
        props: ['title'],
        methods: {
            del: function() {
                this.$emit("delete"); //通知父组件执行事件delete
            }
        }
    }
</script>

<style>
    .item {
        color: blue;
    }

    .item button {
        color: red;
    }
</style> 

3.1.1、安装node.js

从node.js官网下载并设置node,安装进程很简短,一路“下一步”就足以了。安装到位之后,打开命令行工具(win+r,然后输入cmd),输入
node -v,如下图,假诺出现相应的本子号,则印证安装成功。

ECMAScript 41

倘诺设置不成功,能够直接把安装包修改成压缩包,解压后陈设环境变量也得以,就成了威尼斯红版。

 ECMAScript 42

此间必要表明下,因为在官网下载安装node.js后,就已经自带npm(包管理工科具)了,另须要留意的是npm的本子最棒是3.x.x之上,防止对一连爆发震慑。

瞩目版本无法太低,借使你已经安装了低版本的node能够接纳npm直接更新。

1.17. Promises

ES6 对 Promise 有了原生的支撑,1个 Promise
是贰个等待被异步执行的对象,当它执行到位后,其状态会变成 resolved 大概rejected。

var p = new Promise(function(resolve, reject) {  
  if (/* condition */) {
    // fulfilled successfully
    resolve(/* value */);  
  } else {
    // error, rejected
    reject(/* reason */);  
  }
});

每三个 Promise 都有贰个 .then 方法,那个法子接受五个参数,第2个是拍卖
resolved 状态的回调,二个是拍卖 rejected 状态的回调:

p.then((val) => console.log("Promise Resolved", val),
       (err) => console.log("Promise Rejected", err));

2.⑤ 、模块加载器(Module Loaders)

那并不是ES二零一六的一片段:那部分ECMAScript
二零一四标准是由达成定义(implementation-defined)的。最后的正规化将在WHATWG的Loader
规范中鲜明,近年来那项工作正在开展中,下边包车型大巴剧情出自于事先的ES二零一五文稿。

模块加载器扶助以下成效:

  • 动态加载(Dynamic loading)
  • 情景一致性(State isolation)
  • 大局空间一致性(Global namespace isolation)
  • 编写翻译钩子(Compilation hooks)
  • 嵌套虚拟化(Nested virtualization)

你能够对暗中认可的加载器举办安插,营造出新的加载器,能够被加载于独立或受限的履行环境。

// 动态加载 – ‘System’ 是默认的加载器
System.import("lib/math").then(function(m) {
alert("2π = " + m.sum(m.pi, m.pi));
});

// 创建执行沙箱 – new Loaders
var loader = new Loader({
global: fixup(window) // replace ‘console.log’
});
loader.eval("console.log(\"hello world!\");");

// 直接操作模块的缓存
System.get("jquery");
System.set("jquery", Module({$: $})); // WARNING: not yet finalized

亟需非凡的polyfill
出于Babel暗许使用common.js的模块,你需求五个polyfill来选取加载器API。

行使模块加载器
为了选取此意义,你需求告诉Babel使用system模块格式化学工业具。

1.10. for…of VS for…in

for…of 用于遍历2个迭代器,如数组:

let nicknames = ['di', 'boo', 'punkeye'];
nicknames.size = 3;
for (let nickname of nicknames) {
  console.log(nickname);
}
Result: di, boo, punkeye
for...in 用来遍历对象中的属性:

let nicknames = ['di', 'boo', 'punkeye'];
nicknames.size = 3;
for (let nickname in nicknames) {
  console.log(nickname);
}
Result: 0, 1, 2, size

1.8.一 、Object.setPrototypeOf 方法的施用

ECMAScript 43

将三个点名的对象的原型设置为另三个指标或然null(既对象的[[Prototype]]其间属性).

示例:

        <script type="text/javascript">
            var Car=function(){
                this.name="车";
            }

            var benz=new Car();
            console.log(benz.name);

            Object.setPrototypeOf(benz,{name:"小轿车",price:"23456"});
            console.log(benz.name);  //未重写
            console.log(benz.price);
        </script>

结果:

ECMAScript 44

 

4.② 、运维暗中认可项目

当见到如下结果时成立项目就做到了,能够运作

ECMAScript 45

 当全体的依赖加载成功后就能够利用指令:npm run dev 运维私下认可项目了

结果:

 ECMAScript 46

在浏览器中运作:localhost:8080

ECMAScript 47

品类的解析能够看录制,那里间接就创办todolist模块:

2.4.4、导出格局四

那种导出的方法不需求通晓变量的名字, 也正是是匿名的,
间接把开发的接口给export;
一旦2个js模块文件就唯有1个效果, 那么就能够使用export default导出;

//lib.js
export default "string";

//main.js
import defaultString from "./lib";
console.log(defaultString);

 

1.13. 类

ES6 中有 class 语法。值得注意是,那里的 class
不是新的目的继承模型,它只是原型链的语法糖表现情势。

函数中应用 static 关键词定义构造函数的的点子和属性:

class Task {
  constructor() {
    console.log("task instantiated!");
  }

  showId() {
    console.log(23);
  }

  static loadAll() {
    console.log("Loading all tasks..");
  }
}

console.log(typeof Task); // function
let task = new Task(); // "task instantiated!"
task.showId(); // 23
Task.loadAll(); // "Loading all tasks.."

示例:

            class Animal{
                constructor(){  //构造方法,可无
                    console.log("正在构造一只动物");
                }

                bark(){
                    console.log("动物在叫...");
                }

                static eat(){
                    console.log("动物在吃东西...");
                }
            }

            var pig=new Animal();
            pig.bark();
            Animal.eat();

结果:

ECMAScript 48

类中的继承和超集:

class Car {
  constructor() {
    console.log("Creating a new car");
  }
}

class Porsche extends Car {
  constructor() {
    super();
    console.log("Creating Porsche");
  }
}

let c = new Porsche();
// Creating a new car
// Creating Porsche

extends 允许三个子类继承父类,供给专注的是,子类的 constructor
函数中需求实施 super() 函数。

本来,你也足以在子类方法中调用父类的办法,如 super.parentMethodName()。

在 那里 阅读更多关于类的牵线。

有几点值得注意的是:

类的扬言不会升级(hoisting),要是你要采取某些Class,那您无法不在行使在此以前定义它,不然会抛出贰个 ReferenceError 的荒谬
在类中定义函数不须要利用 function 关键词

示例:

        <script type="text/javascript">
            class Animal{
                constructor(){  //构造方法,可无
                    console.log("正在构造一只动物");
                }

                bark(){
                    console.log("动物在叫...");
                }

                static eat(){
                    console.log("动物在吃东西...");
                }
            }

            class Dog extends Animal{
                constructor(){ 
                    super();   //调用父类的构造方法
                    console.log("正在构造一只狗");
                }
                bark(){   //重写
                    console.log("汪汪汪...");
                }
            }

            var dog=new Dog();
            dog.bark();
            Dog.eat();

结果:

ECMAScript 49

4.柒 、运维通告的类型

将dist目录放到运维环境下,那里就直接拖动到HBuilder的花色目录中,如下图所示:

ECMAScript 50

将index.html文件中的相对路径修改为相对路径,注意static在此以前的斜线:

<!DOCTYPE html>
<html>

    <head>
        <meta charset=utf-8>
        <meta name=viewport content="width=device-width,initial-scale=1">
        <title>todolist</title>
        <link href=static/css/app.b4bf92d7b44dab6d09d7150561ccda45.css rel=stylesheet>
    </head>

    <body>
        <div id=app></div>
        <script type=text/javascript src=static/js/manifest.c7e501867173ed73c464.js></script>
        <script type=text/javascript src=static/js/vendor.8226f675e046df334018.js></script>
        <script type=text/javascript src=static/js/app.96fcd6038a3373ac14ee.js></script>
    </body>

</html>

在浏览器中查看的意义如下:

ECMAScript 51

3.1.④ 、安装vue-cli脚手架创设筑工程具

打开命令行工具输入:

cnpm install vue-cli -g

安装完毕以往输入 vue
-V(注意那里是大写的“V”),如下图,如若出现相应的版本号,则印证安装成功。

ECMAScript 52

1.8.2、Object.defineProperty

Object.defineProperty(被增添的靶子名,属性名,{属性的值})
能够用来增加对象的习性

只是能够钦定只读属性

示例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Object.defineProperty()</title>
    </head>

    <body>
        <script>
            var tom = {
                name: "tom"
            };
            tom.age = 90;
            tom["age"] = 88;
            console.log("tom.age=" + tom.age);

            var rose = {
                name: "rose"
            };
            Object.defineProperty(rose, "age", {
                value: 98,
                writable:false  //只读
            });
            rose.age=18;  //修改无效
            console.log("rose.age=" + rose.age);
        </script>
    </body>

</html>

结果:

ECMAScript 53

 

2.4.陆 、导出格局六

使用通配符* ,重新导出别的模块的接口

//lib.js
export * from "./other";
//如果只想导出部分接口, 只要把接口名字列出来
//export {foo,fnFoo} from "./other";

//other.js
export let foo = "stringFoo", fnFoo = function() {console.log("fnFoo")};

//main.js
import {foo, fnFoo} from "./lib";
console.log(foo);
console.log(fnFoo());

在import的时候可以运用通配符*导入外部的模块:

import * as obj from "./lib";
console.log(obj);

 

 

 

一、ECMAScript6概要

ECMAScript是一种由Ecma国际(前身为澳大利伯维尔电脑创造商组织,英文名称是European
Computer 马努facturers
Association)通过ECMA-262标准化的剧本程序设计语言。那种语言在万维网上选用广泛,它往往被叫作JavaScript或JScript,但骨子里后两者是ECMA-262专业的落到实处和壮大。

二〇一五年十二月1二十五日,ECMAScript 6揭露标准版本,即ECMAScript 二〇一五。

ECMAScript 54

ES6是继ES5之后的2遍重庆大学革新,语言专业由ES5.1一代的245页扩大至600页。ES6扩充了不少必需的表征,例如:模块和类,以及部分实用本性,例如Maps、Sets、Promises、生成器(Generators)等。即使ES6做了大量的更新,可是它如故完全向后10分在此之前的本子,标准化委员会决定幸免由不合作版本语言导致的“web体验破碎”。结果是,全数老代码都得以健康运维,整个过渡也呈现越来越平滑,但随之而来的题材是,开发者们埋怨了连年的老难点依旧存在。

简言之说ES正是JavaScript语言的达成正式,ES6是一较新的本子,使JavaScript尤其正式与强大。

4.3.贰 、成立父组件Todo

<template>
    <div>
        <p>
            <label>任务:</label>
            <input v-model="newtask" @keypress.enter="addNew"/>
        </p>
        <ul>
            <li is="TodoItem" v-for="(task,index) in tasks" :title="task" @delete="remove(index)"></li>
        </ul>
    </div>
</template>

<script>
    import TodoItem from './TodoItem'
    export default {
        data: function() {
            return {
                tasks: ["买一本书", "给爸妈打电话", "整理自己的硬盘"],
                newtask:''
            }
        },
        components: {
            TodoItem
        },
        methods: {
            remove: function(index) {
                if(confirm("您真的要删除吗?")) {
                    this.tasks.splice(index, 1);
                }
            },
            addNew:function(){
                this.tasks.unshift(this.newtask);
            }
        }
    }
</script>

<style>

</style>

1.9. 模板语法和分隔符

ES6 中有一种格外不难的方法组装一堆字符串和变量。

${ … } 用来渲染一个变量
` 作为分隔符

let user = 'Barret';
console.log(`Hi ${user}!`); // Hi Barret!

3.4、Vue-cli HelloWorld

刺探了默许的模版内容,大家得以起先定义自个儿的vue程序了,那里写二个简练的HelloWorld,在src目录下创立一个Hi.vue文件,内容如下:

<template>
    <div id="app1">
        <input v-model="msg" v-on:click="sayhi"/>
        <p>
            <h2>{{msg}}</h2>
        </p>
    </div>
</template>

<script>
    export default {
        name: 'Hi',
        data() {
            return {
                msg: 'My First vue-cli app!'
            }
        },
        methods:{
            sayhi:function(){
                alert(this.msg);
            }
        }
    }
</script>

<style>
    #app1 {
        font-family: "microsoft yahei";
        color: dodgerblue;
        font-size: 20px;
    }
</style>

修改main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './Hi'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

运营结果:

ECMAScript 55