---
tags: Vue 實戰班
---

# 第二週 ES6 必學語法

獎勵活動：
- 幫幫忙組：
- [加入幫幫忙組](https://hackmd.io/@hexschool/HJDbvkFqU/%2F_zwYYNnsSXO0PW7BCpJwQQ)
- [許願區](https://docs.google.com/spreadsheets/d/1DOk5jCqnz-y_z6M_aFaoNn3n-ayheFhQ6h2LLDzYaXg/edit#gid=1084713188)
- 艱難的第二週作業挑戰，沒交的準備被騷擾
- 課程 API 說明：https://courses.hexschool.com/courses/924133/lectures/21092725
- 主線作業：https://hackmd.io/iMJpvRn3SwSTUjx9DlcXSQ


- 課程預習：https://hackmd.io/@hexschool/S1DJeKTdL/%2Fd-oyhhRoRPSvL1uoM1BGJw
- 團隊任務：https://hackmd.io/SOd1i-R-SjORbFzfqPIr0Q

## 本週重點

- 物件、this
- import、export
- 非同步 Promise

## 物件、This

物件 this 與模組

var component = {
  data: {
    name: '元件...'
  },
  render() {
    var string = `渲染 ${ this.data.name } 資料到畫面上...`;
    document.querySelector('#app').innerHTML = string
  }
}
component.render();

## import、export

- 主流瀏覽器可直接運行，標籤需要加上 `type="module"`
- 傳統瀏覽器需要先進行編譯（課程會介紹到）
- 先掌握匯出方法，怎麼匯出決定如何匯入
- default
- named
- Side Effect

結合 this 的觀念

export default {
  data: '我是小明',
  render(dom) {
    document.querySelector(dom)
      .innerHTML = `<div>${ this.data }</div>`
  }
}

### Promise 與 Ajax

- 非同步運作概念
- 使用 Promise 解決非同步問題
- 使用 Axios 串接遠端資料

Promise 函式（參考函式，實戰中不太需要自行建構，如有興趣可[參考](https://wcc723.github.io/development/2020/02/16/all-new-promise/)）

var promiseSetTimeout = function(status) {
  return new Promise(function(resolve, reject) {
    setTimeout(() => {
      if (status) {
        resolve('promiseSetTimeout 成功')
      } else {
        reject('promiseSetTimeout 失敗')
      }
    }, 10);
  })
}


## 作業說明

本週作業說明：
- 主線任務
- 提交任務注意事項
- 下週預習：https://hackmd.io/@hexschool/S1DJeKTdL/%2FCHGTC0zPT4efLjbmoR9hqw
- 團隊任務