Vue: ES6常用语法

ES6 模板字符串:  ~ ${变量名}~

<div id="app"></div>

<script>

    /* 找到对应id */
    let item = document.getElementById('app');
    /* 声明变量 */
    let username1 = 'ann';
    let username2 = 'ben';
    /* 替换内容 */
    item.innerHTML = `
    <h1> hello ${username1}</h1>
    <h2> hello ${username2}</h2>
`

</script>

 

ES6 数据结构与赋值: let   [a,b] = [b,a]

<div id="app"></div>

<script>

    /* 找到对应id */
    let item = document.getElementById('app');
    /* 声明变量 */
    let username1 = 'ann';
    let username2 = 'ben';
　  /* 结构与赋值 */
    [username1,username2]=[username2,username1]
    /* 替换内容 */
    item.innerHTML = `
    <h1> hello ${username1}</h1>
    <h2> hello ${username2}</h2>
`

</script>

 

ES6 函数的扩展/箭头函数--

单个参数 : let foo = v => v+1;

多个参数需要{return xxxxx}:

let bar = (x,y)=>{
    return x+y;
};

/* 默认值参数 */
    function func(x, y = 10) {
        let num = y;
        return num
    }

    ret1 = func(1, 2);
    console.log(ret1);
    ret2 = func(1);
    console.log(ret2);
    /* 如果传入参数为0的话,显示的还是默认值*/
    ret3 = func(1, 0);
    console.log(ret3);

    /* 箭头函数 let 声明变量 = 参数=>返回值 */

    // 1个参数
    let foo = v => v+1;
    ret4 = foo("箭头函数");
    console.log(ret4);

    // 0个或者多个参数
    let bar = (x,y)=>{
        return x+y;
    };
    ret5 = bar("牛","力");
    console.log(ret5);


    function foo() {
        console.log(this);
    }
    foo();

    let bar = () => console.log(this);

    let obj = {
        foo:foo,
        bar:bar,
    };

    obj.bar();
    obj.foo();

 

ES6 类,类的继承, constructor

/* 类的格式 */
    class Person{
        constructor(name,age){
            this.name = name;
            this.age = age;
        }

        showinfo(){
            console.log(this.name,this.age);
        }
    }

    let ss = new Person("ben",1111);
    ss.showinfo();

    // 类的继承
    class Dad{
        constructor(name,age,account=1000){
            this.name=name;
            this.age=age;
            this.account=account;
        }
        showinfo(){
            console.log(this.name,"今年",this.age,"岁了","有",this.account,"亩地!");
        }
    }

    class Son extends Dad{
        constructor(name,age){
            super();/* 必须!!!*/
            this.name=name;
            this.age=age;
        }
    }

    let xiaohaizi = new Son('张三',12);
    xiaohaizi.showinfo()

 

ES6 对象的单体模式

<script>

    let obj = {
        name: "张三",
        foo(){
            console.log(this.name);
        }
    };

    obj.foo();

</script>