es6新增在vue中常用语法

1.es6三种变量声明方式

（var ，let, const）

var a = 0；//不多解释

for(a=0;a<4;a++){
    console.log(a);
}
console.log(a);//可以打印出a的值

——————————————————————————————————————————
for(var i=0;i<4;i++){
    console.log(i);//0,1,2,3
}
console.log(i);//打印报错

const m = 4;
m =5; //报错

总结：由于es6之前只有var,然而var 在哪里定义都是全局变量，都会呗预解析提前，所以es6,引入let,const.从上面的案例可以看出来，let,定于的是局部作用域，const定义的是常量，不能修改。

2.前端的福利，数组与对象的解构赋值

let a = [1,2,3];

//如果我们想拿到 数组里面的值；
//es5
a[0];
a[1];
a[2];
//es6；

let a = [1,2,3];
let [a1,a2,a3] = a;
a1  // a1 == a[0]
a2  // a1 == a[1]
a3 // a1 == a[2]


let json = {foo:2}

let {foo} = json;
console.log(foo); //2

总结：通过数组和对象的结构，我们可以直接获取对象和数组里面的值了，可以通过先解构出来，直接当变量使用，非常方便。

3.字符串模板

//es5
let jspang='技术胖';
let blog = '非常高兴你能看到这篇文章，我是你的老朋友'+jspang+'。这节课我们学习字符串模版。';
//es6

let jspang='技术胖';
let blog = `<b>非常高兴你能看到这篇文章</b>，我是你的老朋友${jspang}。<br/>这节课我们学习字符串模版。`;

总结：使用字符串模板可以大大减少我们字符串拼接，大大提高阅读行；

4.箭头函数

//es5
function add(a,b=1){
    'use strict'
    if(a == 0){
        throw new Error('This is error');
    }
     return a+b;
}
console.log(add(1));
//es6
var add =(a,b=1) => {
    console.log('jspang')
    return a+b;
};
console.log(add(1));

总结：es6的箭头函数，简化了es5的函数，使用起来比较简单，但是并不是所有的情况都可以使用箭头函数的，这个需要注意

5.模块化操作

es6新引入了export，import 两个关键字，主要是为了解决作用域的问题

//a.js
var a = 'jspang'
export a;

============================
//b.js
import {a} from './temp.js';
console.log(a);

总结：由于es6,引入js,经常会导致全局污染的问题，于是es6新增export,import,我们需要在那个文件使用import form即可。

终结：这里是es6在vu中使用比较多的地方，在这里总结出来，ES6还有其他内容，可以参考技术胖es6案例。ES6的所有的新内容可以查看阮一峰es6。