一次學倆Vue&Blazor：前言和目錄

Vue和Blazor有許多相似之處，比如都具有單頁面、單文件、組件化、虛擬DOM、MVVM、聲明式等現代前端開發框架的特點。Vue基於JS/TS，而Blazor基於C#，兩者技術棧有天然差異，但它們都實現了同一目標。通過對比兩個框架的構建思想和實現方式，或趨同、或迥異，是件十分有趣的事情。正式展開正文之前，有必要對本系列文章的開發環境做一下限定：

• Vue：V3.2.X + 組合式API + setup語法糖 + Vite + JS + VisualStudioCode

• Blazor：.NET7 + Blazor WASM + Blazor Server + VisualStudio

 

目錄：

第一部分：基礎

• 1.1 創建項目

• 1.2 組件結構

• 1.3 模板語法和Razor語法

• 1.4 響應式數據

• 1.5 屬性和父傳子

• 1.6 事件和子傳父

• 1.7 雙向綁定

• 1.8 祖孫傳值

• 1.9 傳輸UI片斷

• 1.10 計算屬性和數據監聽

• 1.11 Vue的表單輸入驗證

• 1.12 Blazor的表單輸入驗證

 

第二部分：進階

• 2.1 生命周期-基本理解和使用

• 2.2 生命周期-深入理解生命周期

• 2.3 狀態管理-狀態管理概述

• 2.4 狀態管理-狀態共享，Vue的Pinia

• 2.5 狀態管理-狀態共享，Blazor的依賴注入和事件機制

• 2.6 狀態管理-狀態共享，Blazor的第三方庫Fluxor

• 2.7 狀態管理-狀態共享，Blazor的第三方庫BlazorMVVM

• 2.8 狀態管理-持久化保存之概述

• 2.9 狀態管理-持久化保存之Cookie/Session/jwt

• 2.10 狀態管理-持久化保存之LocalStorage和IndexedDB

• 2.11 路由導航-基本使用

• 2.12 路由導航-布局(母版/嵌套)

• 2.13 路由導航-代碼導航

• 2.14 路由導航-路由傳參

• 2.15 路由導航-路由守衛

• 2.16 請求WebAPI-通訊協議和HTTP協議

• 2.17 請求WebAPI-HttpClientFactory和Axios

• 2.18 前端權限-Vue的權限實現原理

• 2.19 前端權限-Vue的權限案例（vue-next-admin）

• 2.20 前端權限-Blazor的權限實現原理

• 2.21 前端權限-Blazor的權限案例（？？？）

 

第三部分：小知識點

• 3.1 綁定解析HTML元素-v-html和MarkupString

• 3.2 動態組件-component和DynamicComponent

• 3.3 組件標識-key

• 3.4 組件引用-ref

• 3.5 Blazor中C#和JS互操作（超長文）

• 3.6 屬性展開和屬性透傳

• 3.7 文件上傳下載

• 3.8 虛擬化