Vue的用法和es6的语法

一.es6的语法

1.let

　　基本语法:

　　　　ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

　　特点:

　　　　1.局部作用域

　　　　2.不会存在变量提升

　　　　3.变量不能重复声明

2.const

　　基本用法
　　　　const声明一个只读的常量。一旦声明，常量的值就不能改变。

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

上面代码表明改变常量的值会报错。

　　特点:

　　　　1.局部作用域

　　　　2.不会存在变量提升

　　　　3.不能重复声明,只声明常量不可变得量

let和const

3.模版字符串

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

4.箭头函数

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

而是与箭头函数和普通函数的区别总结两点：

　　1、es5的普通函数，this指向是指向了调用者，比如vue实例的方法（在methods中声明了一个方法）是由vue实例vm调用的，所以this指向vm。
　　2、箭头函数的this指向它的调用者所在的上下文，也就是vm实例所在的上下文（定义vm的父类），即window

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
    /*
    function add(x){
        return x
    }
    add(5);
    */
//    let add = function (x) {
//        return x;
//    }
//    add(10);

//    let add2 = (x)=>{
//        return x
//    }
//    let add2 = x => x;
//    console.log(add2(30));

</script>

</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script>
    let person = {
        methods:{
          fav:function(){

          }

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

    /*
     let person2 = {
        name: "日天2",
        age: 30,
        fav:  () => {
            console.log(this); //this指向 发生了改变。this指向 定义person2的父级对象(上下文)
            console.log(this.name);
        }
    }

    person2.fav()
    */
//    对象的单体模式
        let person3 = {
            name:'日天',
            fav(){
                console.log(this); //当前this
            }
//            fav:function () {
//
//            }
        }
        person3.fav();
</script>
</body>
</html>

箭头函数