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

 1 /* 类的格式 */
 2     class Person{
 3         constructor(name,age){
 4             this.name = name;
 5             this.age = age;
 6         }
 7 
 8         showinfo(){
 9             console.log(this.name,this.age);
10         }
11     }
12 
13     let ss = new Person("ben",1111);
14     ss.showinfo();
15 
16     // 类的继承
17     class Dad{
18         constructor(name,age,account=1000){
19             this.name=name;
20             this.age=age;
21             this.account=account;
22         }
23         showinfo(){
24             console.log(this.name,"今年",this.age,"岁了","有",this.account,"亩地!");
25         }
26     }
27 
28     class Son extends Dad{
29         constructor(name,age){
30             super();/* 必须!!!*/
31             this.name=name;
32             this.age=age;
33         }
34     }
35 
36     let xiaohaizi = new Son('张三',12);
37     xiaohaizi.showinfo()
类,类的继承

 

ES6 对象的单体模式

<script>

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

    obj.foo();

</script>
对象的单体模式

 

posted @ 2018-11-07 14:31  Niuli'blog  阅读(1256)  评论(0)  编辑  收藏  举报