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>