---
title: Vue 3 daily task
tags: 六角學院, Vue 3 新手夏令營
date: 2021/7/12
---

###### tags: `六角學院` `Vue 3 新手夏令營`

###### *date: 2021/7/12*

# 📜 第一週每日任務

[TOC]

## 7/12 (一) 暖身操，ES6 宣告變數

let HexSchool = '六角學院';
const HexSchoolAge = 5;
const course = {
  JavaScript: 2500
}
let HexSchoolGroup = {
  teacher: 'Casper',
  assistant: 'Ray'
}

// 後續程式碼，請藉此判斷使用 Let or Const
HexSchool = '六角學院，帶你學到會的線上課程';
course.JavaScript = 2000;
HexSchoolGroup = {};

### ES6 宣告變數技術重點

- let 和 const 是**區域**變數
- let 可以重新指定值
- const 是宣告一個常數
- const 物件，內層的屬性依然可以調整，因為物件是傳**參考**

> [ES6 開始的新生活 `let` `const`](https://wcc723.github.io/javascript/2017/12/20/javascript-es6-let-const/)
> [name=卡斯伯]

---

## 7/13 (二) 暖身操，從 for 到 forEach

const array = ['100', '1500', '2000', '99']
const newArray = []
// 使用 forEach 
array.forEach( item => newArray.push(item * 2));
console.log(newArray)

### for 與 forEach 技術重點

- for 迴圈可以被**中斷**
- forEach 無法用**類陣列**，除非搭配 ES6 的`...`展開運算符

> [for 迴圈 與 forEach 有什麼不同](https://wcc723.github.io/development/2020/10/05/js-for-loop-vs-for-each/)
> [name=卡斯伯]

---

## 7/14 (三) 暖身操，forEach 情境題

const array = [100, 1500, 2000, 99, 499, 555, 1200]
const newArray = []
// 超過 500 的傳入 newArray
array.forEach( item => if (item > 500) newArray.push(item));

### 情境題技術重點

1. 利用`forEach`遍歷陣列
2. 使用`if`判斷條件
3. 使用`push`傳入新陣列

---

## 7/15 (四) 暖身操，建立 Vue 環境

1. CDN 版本

    <!-- HTML -->
    <div id="app">
      {{ text }}
    </div>

    <script src="https://unpkg.com/vue@next"></script>

    // Javascript
    const app = Vue.createApp({
      data(){
        return{
          text:'CDN 版本'
        }
      }
    })
     app.mount('#app');

2. ESM 版本

    <!-- HTML -->
    <div id="app">
      {{ text }}
    </div>

    // Javascript
    import {createApp} from "https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.11/vue.esm-browser.js"
    const app = createApp({
      data(){
        return{
          text:'ESM 版本'
        }
      }
    })
    app.mount('#app');

### CDN 與 ESM 差異

- CDN 屬於功能整包載入，體積較大，但方便
- ESM 屬於功能切割開來，體積輕巧，需要用的功能在引入:+1:

---

## 7/16 (五) 暖身操，渲染 Vue 資料

<!-- HTML -->
<div id="app">
  {{ text }}
</div>

// Javascript
import {createApp} from "https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.11/vue.esm-browser.js"
const app = createApp({
  data(){
    return{
      text:'六角學院 Vue 3 新手夏令營'
    }
  }
})
app.mount('#app');

### 渲染畫面技術重點

1. 利用`data`回傳的資料
2. 藉由`mount`渲染到 HTML 指定`id`

{%hackmd @JohnsonMao/theme-Wood-Fired %}