本單元簡介 VueJS 前端框架。

• 主流前端框架
• Vue.js 簡介
• 快速入門

學習目標

1. 初步認識三大主流前端框架：React, Vue, Angular。
2. 了解各框架的核心思想與主要特點。
3. 比較 React, Vue, Angular 之間的異同之處。
4. 為後續深入學習特定框架打下基礎。

核心概念：三大框架簡介

現代前端開發為了應對日益複雜的應用需求，催生了許多優秀的 JavaScript 框架。其中，React, Vue, 和 Angular 是目前最受歡迎的三個框架。它們都能幫助開發者更有效率地建構互動式、可維護的使用者介面，但各有其設計哲學和特點。

學習目標

1. 了解 Vue.js 的基本概念與核心功能
2. 學會使用 Vue 進行宣告式渲染
3. 理解 Vue 的響應式原理
4. 掌握單文件組件(SFC)的基本使用
5. 比較 Options API 與 Composition API 的差異

教學錄影

核心概念

1. Vue 是什麼？

學習目標

1. 學會創建 Vue 應用程序
2. 了解使用 CDN 引入 Vue 的方法
3. 掌握全局構建和 ES 模塊構建的區別
4. 能夠進行簡單的 Vue 開發

教學錄影-1 教學錄影-2

本單元主要介紹 Figma 的基本操作。

• Figma 簡介
• Wireframe & Prototype 簡介
• Auto Layout
• Prototype

🎨 學習內容：

• 認識 Auto Layout 的基本概念與使用情境
• 加入 Auto Layout 到選取的物件或元件
• 編輯 Auto Layout 的屬性（方向、間距、對齊、填滿容器等）
• 巢狀 Auto Layout 的應用
• 使用 Suggest Auto Layout 自動轉換設計
• Auto Layout 在元件（Components）中的應用限制與技巧

🧠 核心概念講解：

Auto Layout 是什麼？

🎨 學習內容：

• 認識 Figma 的介面與基本操作
• 繪製基本形狀與元件（Frame, Rectangle, Text, etc.）
• 使用 Auto Layout 打造彈性 UI
• 設計簡單的 App 介面（如登入頁）
• 設計原則與排版基礎概念
• 匯出設計稿與原型分享

🧠 核心概念解釋

1. Figma 是什麼？

Figma 是一個雲端的 UI/UX 設計工具，可以多人即時協作，廣泛用於 App、網站等界面設計。

📚 學習內容：

• 認識 Prototype 原型設計的基本用途與流程
• 製作多個畫面（Frame）與元件（Component）
• 建立互動連結與動畫效果
• 使用 Smart Animate 增加動畫過渡
• 模擬點擊與拖曳行為
• 分享與預覽原型

🧠 核心概念講解：

🧩 Prototype 是什麼？

Prototype 是用來模擬使用者操作介面的流程，例如點選按鈕後跳頁、展開資訊、切換狀態等。可以用來：

• 使用者流程測試
• 設計提案展示
• 團隊溝通與開發驗證

🧩 學習內容：

• 什麼是 Wireframe 與 Prototype
• Wireframe 建立流程與注意事項
• 使用 Grids & Constraints 建立結構
• Prototype 工具操作與互動設定
• 實作簡易使用流程（使用者從首頁點擊進入產品細節頁）
• 分享與測試原型的方法

🧠 核心概念解釋

1. 什麼是 Wireframe？

Wireframe 是設計的草圖，專注在「資訊架構與版面配置」，不強調色彩與細節美化。通常是設計流程的第一步。

本單元簡介 JavaScript 的基本語法與操作 DOM 的方法。

• JavaScript 簡介
• 陣列、物件、JSON
• DOM 操作與事件處理
• 計時器與動態效果
• 非同步操作與 API 串接