Vue 3 シリーズ | 點燈坊

General

• Vue 3 初體驗
• Vue 3.2 Overview
• Vue 3.3 初體驗
• Vue 2 與 Vue 3 主要差異
• 使用 NVM 管理 Node.js 版本
• 使用 Vite 建立 Vue 3 專案 (精簡版)
• 使用 Vite 建立 Vue 3 專案 (完整版)
• 使用 VS Code 開發 Vue 3
• 使用 Prettier 美化 Vue
• 使用 ESLint 檢查 Vue
• Vue 3 專案介紹
• Vue DevTools (Chrome Extension)
• Vue 常用 CLI (開發、編譯、測試)
• 整合 Vue 3 與 Pico CSS

Vite

• Vite 簡介

Composition API

• Vue 之 Script Setup

Reactivity API

ref()

• 使用 ref() 實現 JavaScript 與 HTML 連動
• Using ref to Create Reactive Reference
• Using reactive() to Create the Reactive Object
• Preparing Body Object for fetch()
• Making Reactive Object with reactive() and ref()
• Using readonly to Implement Immutable Object
• 對 Object 建立 Reactivity
• Reactivity 與 Object Destructure

computed()

• 使用 Computed 根據 State 連動
• 使用 Computed 根據 Computed 連動

watch()

• 使用 watch() 追蹤 State 處理 Side Effect
• 使用 watch() 追蹤 State 呼叫 API
• 使用 watch() 追蹤多個 State 呼叫 API

watchEffect()

• 使用 watchEffect() 讓代碼更精簡

Summary

• computed()、watch()、 watchEffect()

toRef()

• 使用 toRef() 將 Reactive Object 轉成 Reactive Reference

toRefs()

• 使用 toRefs() 對 Reactive Object 解構

Lifecycle Hooks

• Vue 的 Lifecyle Hooks 簡介
• 使用 onMounted() 讀取 JSON 檔

HTML Template

v-model

• 使用 v-model 綁定 Textbox
• 使用 v-model 綁定單一 Checkbox
• 使用 v-model 綁定多個 Checkbox
• 使用 v-model 綁定 Radio
• 使用 v-model 綁定單選 Select
• 使用 v-model 綁定多選 Select

v-for

• 使用 v-for 列舉 Select
• 使用 v-for 列舉 Array
• 使用 v-for 搭配 Object
• 使用 v-for 動態加入 Component

v-if

• 使用 v-if 實現 Toggle 一個 HTML Element
• 使用 v-if 搭配 Array 筆數

v-else

• 使用 v-else 實現 Toggle 兩個 HTML Element

Misc

• 使用 Once Event Modifier 只觸發 Event 一次
• 使用 Template Reference 取得 DOM Element
• 使用 window 的 Resize Event

Axios

• JSON Server 簡介
• Axios 簡介
• Axios 呼叫 POST REST API
• Axios 呼叫 GET REST API
• Axios 呼叫 PUT REST API
• Axios 呼叫 DELETE REST API

Component

Prop

• 使用 defineProps() 定義 Prop
• 使用 Prop 對 Component 提供初始值
• Prop 也能 Reactive
• 使用 toRefs() 對 Prop 解構

Event

• 使用 defineEmits() 定義 Event
• 使用 Event 從 Component 內傳出 Data

v-model

• 使用 defineModel() 定義 v-model
• 使用 v-model 將原生 HTML Element 包成 Component
• 同時對 Component 使用多個 v-model

Slot

• 使用 Slot 對 Component 傳入 HTML
• 使用 Named Slot 對 Component 傳入多筆 HTML

CSS

• Style Binding for CSS
• Using Class Binding with TailwindCSS
• 綁定 CSS Variable
• 以 * 使用 Scoped CSS Variable
• Using CSS Transition for v-if

Module

• 使用 Module 抽出 JavaScript 重複部分
• 使用 Module 取代 Vuex

Vue Router

• SPA vs. MPA
• Hash Mode vs. HTML 5 Mode
• 由 Vite 建立 Vue Router 專案
• 手動加入 Vue Router
• 使用 Vue Router 切換網址
• 使用 Dynamic Router Matching 以 Route 為參數

Promise

• 使用 Promise 處理 GET 回傳 Primitive
• 使用 Promise 處理 GET 回傳 Object Array
• 使用 Promise 處理 POST
• Using Polling for Continuous API Call
• 使用 Promise.all() 處理 Promise Array
• 使用 Promise 處理 Error Response
• 使用 Promise 處理相依性 API

Future

• 使用 Future 處理 GET 回傳 Primitive
• 使用 Future 處理 GET 回傳 Array Object
• 使用 Future 處理 Post
• 使用 Future 以 Polling 持續呼叫 API
• 使用 Future 處理 Error Response
• 使用 Future 處理相依性 API
• 使用 ap 將 Value 平行寫入 State
• 使用 ap 將 Object 平行寫入 State

Maybe

• 使用 Maybe 取代 undefined
• 當 Maybe 遇見 Promise
• 當 Maybe 遇見 Future

Either

• 使用 Either 處理 Exception
• 使用 Either 實現 Validation
• 使用 Either 同時檢查多個條件
• 當 Either 遇見 Promise
• 當 Either 遇見 Future

Form

• Data Binding with Select
• Data Binding with Radio
• Data Binding with Listbox

Canvas

• 使用 Canvas 繪製圖片
• 使用 Canvas 繪製 RWD 圖片

Web Worker

• Web Worker 初體驗

Library

• Vue + jQuery 初體驗
• Vue + Xterm.js 初體驗
• 使用 FitAddon 讓 Xterm.js 也能 RWD

Cookbook

• 使用 Composition API 實作 Todo List
• 使用 FP Style 實作 Todo List
• 使用 Axios 實作 Todo List
• 使用 Component 實作 Todo List
• 使用 Vue Router 實作 Todo List
• 實現 Reactive Select
• How to Create CSV File and Download it Automatically ?
• 如何讀取 package.json 的 Property？
• 如何以 Point-free 處理 Binary Function ?
• 如何計算檔案的 MD5 ?
• 如何計算圖片的 Base64 ?
• 如何使 API 大於 1 秒鐘才顯示 Spinner ?
• 如何不選擇子目錄的檔案 ?
• 如何從 Object 取出 Property 寫入 State ?
• 如何判斷圖片 URL 是否存在 ?
• 如何在圖片失效時載入其他圖片 ?
• How to Open Small Window at Top Right Corner?
• How to use window.open with Vue Route?
• How to read Environment Variable in Vue?
• Building Accordion using Vue and TailwindCSS
• Uploading File by Vue
• Reading Excel on Vue