vue怎么使用es vue中使用es6

ECM6 基本用法

声明变量（let、const）

1、var (emc5)

　　声明变量用 var

　　var 定义的是全局的变量，会提升变量

　　示例1：

var a;  # 等于在前面先定义了a

   console.log(a);  //undefine
   {

       var a = 1;
       var a = 10   // var可以重复定义变量,会覆盖之前的

   }
   console.log(a);  // 10

 　　示例2：

var a = [];
    for (let i = 0; i < 10; i++) {
        a[i] = function () {
            console.log(i);
        };
    }
    a[2](); // 10

2、let

console.log(a); //报错
       {
        // a 是1.局部作用域，2.不会存在变量提升 3.变量不能重复声明
           let a = 3;
           //let a = 5;    //不可以重复定义变量
           console.log(a);  //3
       }
       console.log(a); //报错

　　特点：

1.局部作用域
2.不会存在变量提升
3.变量不能重复声明

3、const

// const 局部作用域 不会存在变量提升 不能重复声明，只声明常量 不可变的量
   console.log(a);
    {
        const a = 5;
        a = 10;    //不可以进行更改
//        const a = 10;  不可以重复声明
    }
   console.log(a);

特点：
　　1.局部作用域
　　2.不会存在变量提升
　　3.不能重复声明，只声明常量 不可变的量

模板字符串

//tab键上面的反引号 ${变量名}来插值
let name = '未来';
let str = `我是${name}`；  //形式

箭头函数

 function(){}   ===   () => {}

关于this指向的问题，我下课想了一下，与vm实例没有任何关系。而是与箭头函数和普通函数的区别。
给大家总结两点：
1、es5的普通函数，this指向是指向了调用者，比如vue实例的方法（在methods中声明了一个方法）是由vue实例vm调用的，所以this指向vm。
2、箭头函数的this指向它的调用者所在的上下文，也就是vm实例所在的上下文（定义vm的父类），即window.

//函数定义的几种方法

<script>
    
    //方式一：
    function add(x){
        return x
    }
    add(5);   //5
    
//方式二：
   let add = function (x) {
       return x;
   }
   add(10);    //10

   
   //方式三：  箭头函数，常用
   let add = (x)=>{
       return x
   }
   add(20)    //20
   
//方式四：
   let add = x => x;
   console.log(add(30));   //30

</script>

es6中的对象

要明确this的指向，箭头函数指的是定义该对象的上下文，function函数指的是该函数的调用者对象

<script>

　　//////////////    方式一   /////////////
    let person = {
        methods: {
            fav: function () {

            }
        },
        name: "日天",
        age: 30,
        fav: function () {
            console.log(this); //this指向 当前的对象person
            console.log(this.name);  //this指向 name ，日天
        }
    };


　　//////////////  方式二   /////////////////
    let person2 = {
        name: "日天2",
        age: 30,
        fav: () => {
            console.log(this); //this指向 发生了改变。this指向 定义person2的父级对象(上下文)window
            console.log(this.name);   //window没有name值，打印不出内容
        }
    };
    person2.fav();


　　///////////////  方式三 (常用)  /////////////////
    //    对象的单体模式
    let person3 = {
        name: '日天',
        fav() {
            console.log(this); //当前this   {name: "日天", fav: ƒ}
        }
        //上面函数等价于下面这种写法
        // fav:function () {
        //}
    };
    person3.fav();
</script>

es6中的类

<script>

    // 1、之前定义函数的方法，在原型类（父类中）定义
    function Vue(name,age) {
        this.name = name;
        this.age = age;
    }
    // 基于原型给对象声明方法,也就是Vue的父类
    Vue.prototype.showName = function () {
        console.log(this.name);
    };

    var p1 = new Person('alex','29');


    
    // 2、es6中提供了类的概念如下，可以直接调用
    class Person{
        //定义属性，constructor也是构造函数
        constructor(name='alex',age=18){
            this.name = name;
            this.age = age;
　　　　　　　 super();     //super()可以调用父类中的方法
        }                //结尾处不要加逗号或分号，和python类方法一样不加逗号

        //定义方法
        showname(){
            console.log(this.name);
        }
        showage(){
            console.log(this.age)
        }
    }
    let V = new Person();
    V.showname();  //alex
    
</script>