Vue小白篇 - ES6的语法

为什么要学 es6 的语法呢？

因为 vue 语法有很多都是 es6（ecmascript 6），这里推荐 [阮一峰 ecmascript 6 入门]:

# // var 声明的是全局变量   
    <script type="text/javascript">
        // 输出a，发现没有，会自动在前面 var a;  然后再进行操作
        console.log(a)    //有变量提升，undefined
        {
            var a = 3;   
        }
        console.log(a)    //3



        # let 声明的是局部的，不会存在变量提升
        console.log(b)
        {
            // b 是局部作用域的  只能在这个大括号里才能使用
            let b = 10;   
        }
        console.log(b)
    </script>

    let声明变量的特点： 
        1、局部作用域  
            2、不会存在变量提升  
            3、变量不能重复声明


    let 与 var 声明变量的区别：
        var 声明的是全局变量，而 let 是局部的 

const 声明变量

    <script>
        console.log(b)
        {
            const b = 10;  
            b = 20;   // 报错
        }
        console.log(b)
    </script>

const 声明变量的特点：
    1、局部作用域  
        2、不会存在变量提升  
        3、变量不能重复声明
        4、只能声明常量，不可变的量   （比 let 声明变量多一个特点）

模板字符串

tab 键上面的反引号 `${变量名}` 来插值


<script>
    let name = '未来';
    let str = `我是${name}`;

    console.log(str)   // 我是未来
</script>

es6 的箭头函数

funtion () {} === () => {}  this的指向发生改变

# es5 声明函数：
        function add(x){
            return x;
        }
        add(5)

        let add = function(x){
            return x;
        }
        console.log(add(50))


# es6 声明函数（箭头函数）：
        let add = (x) => {
            return x;
        }
        console.log(60)

# 简洁版（不易阅读）：
        let add2 = x => x;
        console.log(add2(100))



#es5 的案例：
    <script type="text/javascript">
        let person = {
            name: '日天',
            age: 18,
            fav: function(){
                console.log(this)  // 指向 person 
                console.log(this.name)   // 日天
            }
        }
        person.fav()
    </script>



# es6 的案例：
        let person = {
            name: '日天',
            age: 30,
            fav: () => {
      //this指向  发生了改变。this指向 定义person的父级对象（上下文）
                console.log(this)    // 指向window
                console.log(this.name)  // 输出 空 
            }       
        }
        person.fav()



# 对象的单体模式
    <script type="text/javascript">
        let person = {
            name: '日天',
            age: 18,
            fav(){   // 相当于 fav:function(){}函数声明
                console.log(this)  // // 指向 person
                console.log(this.name)   // 输出 日天
            }
        }
        person.fav()
    </script>

es6 的类

function person(name, age){
    this.name = name;
    this.age = age;
}
var p1 = person('tom','16');



    <script>
        //声明一个person 类
        class person{
            // 当前类的父类（继承性）
            // constructor 方法相当于python中的__init__初始化方法
             constructor(name='tom', age=45){  
                 this.name = name;
                 this.age = age;
             }
             showname(){
                console.log(this.name)
             }
             showage(){
                console.log(this.age)
             }
        }

        let v = new person();
        v.showname();   //输出tom
    </script>