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>