记录Vue.js第一天

写在前头，本文记录的是我开始学习vue.js路程，我想坚持写下去，一来可以加深印象，二来方便自己回顾，三来则是提醒自己坚持，督促自己。
另外，文中很多内容引用了阮一峰先生的ECMAScript 6 入门,如有冒犯，请及时联系我删除；如果有跟我一样的新手小伙伴碰巧看到本文，也可以前去查阅。

初识ES6

变量声明

1.var
var 声明的变量作用域是全局作用域，你可以在全局对象里面调用局部作用域中的变量，例如：

for(var i = 0;i < 10; i++) {
	console.log(i);
}
console.log(i);	

最终输出： 0 1 2 3 4 5 6 7 8 9 10

var arr = []
for (var i = 0;i < 10;i++) {
    arr[i] = function () {
        console.log(i)
    }
}   
arr[1]()

此时，当输入的i为0~10中的任意一个，arri输出的结果都为10。
var声明的变量在同一作用域内可以重复声明，重复声明时，其作用是对该变量重新赋值，例如：

var str = "abc";
var str = "bcd";
console.log(str);	

最终输出结果：bcd。
var命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined，例如：

console.log(str);
var str = "Hello World~!";

2.let
通过let声明的变量（ES6）不允许跨作用域访问，即在全局作用域中不可以调用局部作用域中的变量，例如：

for(let i = 0;i < 10; i++) {
	console.log(i);
}
console.log(i);

此时，输出结果为 0 1 2 3 4 5 6 7 8 9 以及

Uncaught ReferenceError: i is not defined
	at vue01.html:39

当

	var arr = []
    for (let i = 0;i < 10;i++) {
        arr[i] = function () {
            console.log(i)
        }
    }   
    arr[1]()

此时输出结果为1，当arri调用时，随之输出i的值。
let不允许在相同作用域内，重复声明同一个变量，例如：

	let str = "abc"
    let str = "bcd"
    console.log(let)

此时报错：

Uncaught SyntaxError: Identifier 'str' has already been declared

但是可以重新赋值：

	let str = "abc"
    str = "bcd"
    console.log(let)

结果为： bcd
let所声明的变量一定要在声明后使用，否则报错，例如：

console.log(str);
let str = "Hello World~!";

此时报错：

Uncaught ReferenceError: str is not defined

3.const
const在声明变量的同时必须赋值，如不赋值将报错，例如：

const str；

此时报错：

Uncaught SyntaxError: Missing initializer in const declaration

const声明一个只读的常量。一旦声明，常量的值就不能改变，例如：

const str = "Hello World~!";
str = "Hi World~!";

此时报错：

Uncaught TypeError: Assignment to constant variable.

const的作用域与let命令相同：只在声明所在的块级作用域内有效;
const命令声明的常量也是不提升,只能在声明的位置后面使用;
const声明的常量，也与let一样不可重复声明。

变量的解构赋值

数组的结构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构，例如：

let [a, b, c] = [1, 2, 3];

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值；如果解构不成功，变量的值就等于undefined。

let [a] = [];
let [b, a] = [1];

以上两种情况都属于解构不成功，a的值都会等于undefined。

对象的解构赋值

解构不仅可以用于数组，还可以用于对象。

let { a, b} = { a: "aaa", b: "bbb" };

对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

let { a, b} = { a: "aaa", b: "bbb" };
let { c } = { a: "aaa", b: "bbb" };

结果：a => aaa; b => bbb; c => undefined。

箭头函数

ES6 允许使用“箭头”（=>）定义函数，例如：

var f = v => v;

等同于

var f = function (v) {
	 return v;
};

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分，例如：

var f = () => 5;

等同于

var f = function () { return 5 };

或者

var sum = (num1, num2) => num1 + num2;

等同于

var sum = function(num1, num2) {
	return num1 + num2;
};

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回，例如：

var sum = (num1, num2) => { return num1 + num2; }

由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错，例如：

let getTempItem = id => { id: id, name: "Temp" };

此时报错；

let getTempItem = id => ({ id: id, name: "Temp" });

不报错。