学习Vue框架之前，要有JavaScript的知识储备

前端三剑客知识储备（有关前端的专题）

☑ HTML基础知识

☑ CSS基础知识

☑ JavaScript5基础知识(最为重要)

👉推荐ES6入门链接：http://es6.ruanyifeng.com/

ES6新语法

其实ES6声明变量有6种方法，先介绍以下两个新的。

let 变量名

ES6中新增的命令，类似于var，用来声明变量。

⚠ let声明的变量只在let的代码块内起作用.

⚠ let 命令不存在变量提升.

⚠ let 不允许在同一个作用域下重复声明某变量.

{
    var a = 1;
    let b = 2;
}

a     //  1
b    //   ReferenceError:  b  is  not  define.

const 变量名

const命令声明并且立即赋值一个只读常量，此常量的值不可改变。

⚠ 只声明不赋值，立即报错.

⚠ 作用域和let一样，所在的作用域内才有效。

const valua;
// SyntaxError: Missing initializer in const declaration`

const MAX = 100;
MAX  //  100

MAX = 90;
// TypeError:  Assignment  to  constant  variable.

模板字符串

☑ 反引号`, ${变量名}，字符串拼接。

let a = `HassGyloveyou`;

let b = `${a}`;

console.log(b);

HassGyloveyou

箭头函数

☑ 新语法：=>

// First

var d = function(x) {

        return x;

    }

// Second  直接去掉关键字function

let c = (x) => {

        return x;

    }

// Third  更简洁，直接去掉括号

let e = x => x + 1;

console.log(d(1));

console.log(c(2));

console.log(e(4));

ES6引入类的使用

☑ 类关键字class，声明类.

☑ constructor关键字，初始化(构造器).

☑ 类似于我们Python的类种的__init__().

☑ this类似于Python类里面的self。

//  ES6新语法

//  继承prototype类

class Person {

    // 构造器

    constructor(name = 'hassgy', age = 18) {

            this.name = name;

            this.age = age;

        }

        // 新语法，直接函数化（函数单体模式）

    showName() {

        console.log(this.name)

    }

    showAge() {

        console.log(this.age)

    }

}

let person = new Person()

console.log(person.showName());

hassgy

下节介绍Vue的介绍以及基本使用。