es6在.vue里简单演示

<template>
	<div class="es6Page" >
	  <div>这里是展示es6新特性</div>
	  <div>1.const和let:   {{letConst}}</div>
	  <div>2.模板字变量:   {{mobanzi}}</div>
	  <div>3.解构数组:   {{jiegou}}</div>
	  <div>4.解构对象:   {{jgDuixiang}}</div>
	  <div>5.forIn循环:   {{xunhuanData}}</div>
	  <div>6.forEach循环迭代:   {{forEachData}}</div>
	  <div>7....展开运算符:   {{zhankaiData}}</div>
	  <div>8.简单箭头函数:   {{jiantouData}}---- {{jiantouData1}}</div>
	
	</div>
</template>F

<script>
export default {
  name: "pageFour",
  data(){
    return{
        letConst:'使用let声明的变量可以重新赋值,但是不能在同一作用域内重新声明'+<\n>+
                  '使用const声明的变量必须赋值初始化,但是不能在同一作用域类重新声明也无法重新赋值.',
        mobanzi:'',
        jiegou:'',
        jgDuixiang:'',
        xunhuanData :'',
        forEachData:'',
        zhankaiData:'',
        jiantouData:'',
        jiantouData1:'',

    }
  },
  methods:{
    showMoBanZi(){
          let [name,age]=['ceshi',19];
          this.mobanzi= `名字是${name}，年龄是：${age}`;
    },
    jieGou(){
      const [a,b,c] = ['测试','+数组+','解构'];
      this.jiegou = a+b+c;
      const {type, color, karat} = { type: '类型1', color: 'red', karat: 18.78};
      this.jgDuixiang = type+'+'+color+'+'+karat

    },
    xunHuan(){
      const [name,age,sex] =['测试','19','男'];
      let datas = [name,age,sex];
      //这里下标即属性,同时,可以随时终止
      for(let i of datas){
            this.xunhuanData+=i;
            if(i=='19') break;
      }
      //forEach循环迭代，大多适用于数组对象
      let data1 =[{name:'a',age:'18',sex:'female'},{name:'b',age:'19',sex:'male'}]
      data1.forEach(element => {
        this.forEachData+=element.name
      });
    },
    zhanKai(){
      const [name,age,sex,...order] = ['ceshi','19','female',1,2,3,4,5];
        this.zhankaiData = name+'-'+age+'-'+sex+order
    },

    jianTou(){
      let [name,age]=['ceshi',18]
      this.getJianTou(name,age);//方法1

      //方法2，使用箭头函数，如果箭头指向花括号，就需要return
      // let jiantouDataFun=(name,age)=>{ 
      //     return  `my name is ${name},my age is ${age}`
      //   }
      let jiantouDataFun =(name,age)=> `my name is ${name},my age is ${age}`
      this.jiantouData1 = jiantouDataFun(name,age);//方法2
    },
    getJianTou(name,age){
        this.jiantouData = `my name is ${name},my age is ${age}`
    },

    //javascirpt类
    showJsProto(){
      class Name{
        //类的属性
        constructor(name,age){
          this.name =name;
          this.age = age;
        }
        //类的方法
        shop(names,apple){
            console.log(`${names}go shopping,buy a ${apple}`);
        }
        play(palce,mintues){
          console.log(`tom played baskectball  in the ${palce} for ${mintues} mintues`);
        }
       
      };

      var person = new Name('tom',3);
      person.play('classRoom',10);
      console.log(person.name);
    },  
  },
  created(){
    this.showMoBanZi();
    this.jieGou();
    this.xunHuan();
    this.zhanKai();
    this.jianTou();
    this.showJsProto();
  }
}
</script>

<style scoped>
.es6Page{
text-align: left;
  width: 100%;
  height: 100%;
}
</style>