Vue 2 シリーズ | 點燈坊

General

• Vue 初體驗

Vue CLI

• 使用 Vue CLI 建立 Vue
• Vue 之 Project Structure
• 手動更新 Vue CLI
• Vue 使用 SCSS
• 在 URI 前面加上 Prefix
• 使用 serve 測試 Build 過的 Vue
• 使 Production Build 不產生 Source Map
• 在本機以 HTTPS 測試 Vue
• 在 Vue 實現 Compilation Variable
• Vue CLI 之 Mode 與 .env

create-vue

• 使用 create-vue 建立 Vue 2

Template

• Vue 之 Stop Event Modifier
• Vue 之 Capture Event Modifier
• Vue 之 Self Event Modifier
• Vue 之 Prevent Event Modifier
• Vue 之 Once Event Modifier
• Vue 之 v-for 搭配 Object
• 使用 v-model.number 將 String 轉成 Number

JSX

• Vue + JSX 初體驗

Component

• Component 基礎概念
• 使用 Component 實現連動下拉選單

Computed

• Vue 之 Computed
• Vue 之 Computed Setter
• 將 Computed 重複部分也抽成 Computed
• Vue 之 Computed Setter
• Vue 之 Computed Setter 只能寫入 Data

Prop

• Vue 之 Prop
• 使用 Default Prop 設定型別
• 使 Prop 也能 Reactive
• 使用 v-model 達成 Prop 的 Two-way Binding
• 使用 .sync 達成 Prop 之 Two-way Binding

Event

• Vue 之 Event
• Vue 註冊 DOM Event

Ref

• 使用 v-for 動態加入 Component
• 使用 $refs 搭配 DOM API 產生 HTML
• 使用 nextTick() 在 v-for 內動態新增 Content

CSS

• Style Binding of CSS
• Tailwind CSS 與 Class Binding
• 使用 Tailwind CSS 處理 Global CSS
• 當 Component 遇見 Functional CSS
• 使用 Vue 改變 Global CSS Variable
• 使用 Vue 改變 Local CSS Variable
• 使用 Vue 改變 Component CSS Variable
• 使用 Transition 讓 v-if 逐漸變化
• 由 Computed 切換 CSS Class

Router

• Vue Router 基礎概念
• Vue Router 之 Dynamic Route Matching
• Vue Router 之 Named Routes
• Vue Router 之 Nested Routes
• Vue Router 之 Named Views
• Vue Router 之 Redirect
• Vue Router 之 Alias
• Vue Router 之 Props
• Vue Router 之 History Mode
• 如何對其他 Page 傳遞多值 ?
• Vue Router 使用 Functional API
• 使用 $route 讀取 Query Parameter

Axios

• 如何解決 Vue 開發環境違反 Same-Origin Policy ?
• 實務上 then() 與 await 在 Vue 使用方式
• 如何處理相依性 API ?
• 如何在 Axios 存取使用 Basic Auth 的 API ?
• 如何將 Binary 轉成 Base64 String ?
• 如何管理 JWT Token ?
• 呼叫 API 顯示 Nested Promise
• 如何對 API 回傳資料加上 Cache ?
• 如何使 Axios 取消 SSL 檢查 ?

Vuex

• Vuex 初體驗
• 如何對 Getter 加以 Point-free ?
• Vuex 之使用 Higher Order Function 建立 Mutation
• Vuex 使用 Functional API

WebSocket

• WebSocket 初體驗
• WebSocket + Vuex 初體驗

FP

• Vue 的 Functional 架構
• 如何使用 FP 風格開發 Vue ?

Library

jQuery

• Vue + jQuery 初體驗

Bootstrap

• Vue + Bootstrap 初體驗

LightBox

• 使用 Vue Cool LightBox 放大圖片

SweetAlert2

• SweetAlert2 之 Error Handling

Vue-konva

• 使用 Vue-konva 以 HTML 5 Canvas 繪圖
• 使用 Vue-konva 繪製圖片
• 使用 Vue-konva 同時繪製圖片與矩形
• 使用 Vue-konva 動態繪圖
• 使用 Vue-konva 繪製文字

Paper Dashboard

• 使用 Webpack 管理 Vue Paper Dashboard

Vuelidate

• 使用 Vuelidate 驗證 Form

Vue List Picker

• 使用 Vue List Picker 同時顯示左右 List

Vue-socket.io

• 使用 Vue-socket.io 連接 WebSocket
• 使用 Vue-socket.io 實現 Broadcast

Vue-video-play

• 使用 Vue-video-play 顯示 HLS
• 使用 Vue-video-player 對 HLS 擷取 Image

Vue-web-cam

• 使用 Vue-web-cam 控制 Camera
• 當 Vue-web-cam 當配 v-if 顯示

Cypress

• 使用 Cypress 測試 Vue
• 使用 Docker-compose 執行 Cypress

Canvas

• Canvas 初體驗
• 使用 Canvas 繪製圖片
• 使用 Canvas 繪製文字
• 使用 Canvas 繪製有陰影文字
• 使用 Canvas 同時繪製圖片與矩形
• 使用 Canvas 同時繪製圖片、矩形與文字
• 使用 Canvas 繪製縮小圖片

Web Worker

• Web Worker 初體驗

SVG

• Data Binding with SVG

Cookbook

• 如何將資料轉 CSV 並自動下載 ?
• 如何為 img 提供預設圖片？
• 在 Template 內使用 Enum