Maya Shavin是微软的高级软件工程师，擅长使用Vue、TypeScript和React进行网页和前端开发。她热衷于良好的UX/UI实践、网络可访问性和网页开发。

使用Vue.js创建可重用的轻量级组件系统。

将响应性引入现有的静态应用程序。

使用前端项目代码管理的构建工具Vite.js建立项目。

使用Pinia为前端应用程序构建交互式状态管理系统。

将外部数据从服务器连接到Vue应用程序。

使用Vue Router通过静态和动态路由控制应用程序流。

使用Vitest和Playwright全面测试应用程序。

前言
第1章  欢迎来到Vue.js的世界
 1.1  什么是Vue.js
 1.2  Vue在现代网页开发中的优势
 1.3  安装Node.js
   1.3.1  NPM
   1.3.2  Yarn
 1.4  Vue开发者工具
 1.5  将Vite.js作为程序构建管理工具
 1.6  创建一个新的Vue应用程序
 1.7  文件存放结构
 1.8  总结
第2章  Vue如何工作：基础知识
 2.1  虚拟DOM原理
   2.1.1  布局更新问题
   2.1.2  什么是虚拟DOM
   2.1.3  虚拟DOM在Vue中的工作原理
 2.2  Vue应用程序实例和选项API
 2.3  探索选项API
 2.4  Template语法
 2.5  使用Data属性创建本地状态
 2.6  Vue响应式原理
 2.7  v-model的双向绑定
 2.8  使用v-model.lazy修饰符
 2.9  使用v-bind绑定响应式数据和传递props数据
 2.10  绑定到类和样式属性
 2.11  使用v-for迭代数据集
   2.11.1  遍历对象属性
   2.11.2  使用key属性使元素间的绑定具有唯一性
 2.12  使用v-on为元素添加事件监听器
   2.12.1  使用v-on事件修饰符处理事件
   2.12.2  使用键码修饰符检测键盘事件
 2.13  使用v-if、v-else和v-else-if的条件渲染元素
 2.14  使用v-show有条件地显示元素
 2.15  使用v-html动态显示HTML代码
 2.16  使用v-text显示文本内容
 2.17  使用v-once和v-memo优化渲染
 2.18  在全局注册组件
 2.19  总结
第3章  组合组件
 3.1  Vue单文件组件结构
 3.2  使用defineComponent()实现TypeScript支持
 3.3  组件生命周期钩子函数
   3.3.1  Setup
   3.3.2  beforeCreate
   3.3.3  Created
   3.3.4  beforeMount
   3.3.5  mounted
   3.3.6  beforeUpdate
   3.3.7  Updated
   3.3.8  BeforeUnmount
   3.3.9  Unmounted
 3.4  方法
 3.5  计算属性
 3.6  监听器
   3.6.1  观察嵌套属性的变化
   3.6.2  使用this.$watch()方法
 3.7  插槽的魅力
 3.8  通过Template标签和v-slot属性使用具名插槽
 3.9  了解ref
 3.10  使用Mixins共享组件配置
 3.11  作用域样式组件
   3.11.1  在Scoped样式中为子组件应用CSS
   3.11.2  对插槽内容应用作用域样式
   3.11.3  在Style标签中使用v-bind()伪类访问组件数据值
 3.12  用CSS模块设计组件样式
 3.13  总结
第4章  组件之间的交互
 4.1  Vue中的嵌套组件和数据流
   4.1.1  使用Props将数据传递给子组件
   4.1.2  声明带有验证和默认值的Prop类型
   4.1.3  使用自定义类型检查声明Props
   4.1.4  使用defineProps()和withDefaults()声明Props
 4.2  使用自定义事件在组件间通信
 4.3  使用defineEmits()定义自定义事件
 4.4  使用provide/inject模式在组件间通信
   4.4.1  使用provide传递数据
   4.4.2  使用inject接收数据
 4.5  Teleport API
   4.5.1  使用Teleport和(dialog)元素实现模态框
   4.5.2  使用Teleport的渲染问题
 4.6  总结
第5章  组合式API
 5.1  使用组合式API设置组件
 5.2  使用ref()和reactive()处理数据
   5.2.1  使用ref()
   5.2.2  使用reactive()
 5.3  使用生命周期钩子函数
 5.4  了解组合式API中的监听器
 5.5  使用Computed()
 5.6  创建可重复使用的组合式函数
 5.7  总结
第6章  整合外部数据
 6.1  什么是Axios
 6.2  安装Axios
 6.3  使用生命周期钩子函数和Axios加载数据
 6.4  运行时异步数据请求：挑战
 6.5  创建可重复使用的Fetch组件
 6.6  将应用程序与外部数据库连接
 6.7  总结
第7章  高级渲染、动态组件和插件组合
 7.1  Render函数和JSX
   7.1.1  使用Render函数
   7.1.2  使用h函数创建VNode
   7.1.3  在render函数中编写JavaScript XML
 7.2  功能组件
 7.3  定义功能组件的Props和Emits
 7.4  使用Vue插件全局添加自定义功能
 7.5  使用(component)标签进行动态渲染
 7.6  使用(keep-alive)缓存组件实例状态
 7.7  总结
第8章  路由
 8.1  什么是路由
 8.2  使用Vue路由
   8.2.1  安装Vue路由
   8.2.2  定义路由
   8.2.3  创建一个路由实例
   8.2.4  将路由实例插入Vue应用程序
   8.2.5  使用RouterView组件渲染当前页面
   8.2.6  使用RouterLink组件构建导航栏
 8.3  路由之间的数据传递
 8.4  使用Props解耦路由参数
 8.5  了解导航守卫
   8.5.1  全局导航守卫
   8.5.2  路由级导航守卫
   8.5.3  组件级路由守卫
 8.6  创建嵌套路由
 8.7  创建动态路由
 8.8  使用路由实例后退和前进
 8.9  处理未知路径
 8.10  总结
第9章  使用Pinia进行状态管理
 9.1  了解Vue中的状态管理
 9.2  了解Pinia
 9.3  为披萨屋创建披萨仓库
 9.4  为披萨屋创建购物车仓库
 9.5  在组件中使用购物车仓库
 9.6  从披萨图库添加项目到购物车
 9.7  操作时显示购物车项目
 9.8  从购物车仓