一次学俩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 虚拟化