内容简介
使用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 使
