本书是一本系统性讲解 Vue.js 开发技术的教材。全书以通俗易懂的语言、丰富实用的案例,帮助初学者快速掌握Vue.js,能够运用Vue.js开发Web前端项目。
本书共8章。第1章讲解Vue.js的基本概念以及项目的创建等;第2~5章讲解Vue.js开发基础、组件、路由等知识;第6章讲解常用UI组件库,包括Element Plus、Vant和Ant Design Vue;第7章讲解网络请求和状态管理,包括Axios、Vuex和Pinia;第8章讲解“微商城”项目实战。
本书附有配套资源,包括教学大纲、教学设计、源代码、习题等,而且为了帮助读者更好地学习本书中的内容,还提供在线答疑,希望得到更多读者的关注。
本书适合作为高等院校本、专科计算机相关专业的教材,也可作为广大计算机编程爱好者的参考书。
1.技术升级至Vue3,紧跟时代要求;
2.黑马程序员1+X系列教材改版;
3.本书配套丰富的教学资源,包括教学PPT、教学大纲、教学设计、源代码、习题及答案等。
黑马程序员成立于2006年,由中国Java培训先行者张孝祥老师发起,联合全球最大的中文IT社区CSDN、中关村软件园共同创办的一家专业教育机构。办学至今,我们一直坚守着“为千万人少走弯路而著书,为中华软件之崛起而讲课”的办学理念,坚持培养优秀软件应用工程师的宏伟目标,在累计培养的十万余名学员中,其中90%的学员均已在北、上、广等一线城市高薪就业。
第 1章 初识Vue.js1
1.1 前端技术的发展 1
1.2 Vue简介 3
1.2.1 什么是Vue 3
1.2.2 Vue的特性 4
1.2.3 Vue的版本 4
1.3 Vue开发环境 5
1.3.1 Visual Studio Code编辑器 5
1.3.2 Node.js环境 9
1.3.3 常见的包管理工具 10
1.4 使用Vite创建Vue 3项目 12
1.4.1 什么是Vite 12
1.4.2 创建Vue 3项目 12
1.4.3 Vue 3项目的目录结构 15
1.4.4 Vue 3项目的运行过程 16
本章小结 18
课后习题 18
第 2章 Vue.js开发基础 20
2.1 单文件组件 20
2.2 数据绑定 22
2.2.1 初识数据绑定 22
2.2.2 响应式数据绑定 25
2.3 指令 29
2.3.1 内容渲染指令 29
2.3.2 属性绑定指令 31
2.3.3 事件绑定指令 32
2.3.4 双向数据绑定指令 33
2.3.5 条件渲染指令 35
2.3.6 列表渲染指令 38
2.4 事件对象 41
2.5 事件修饰符 44
2.6 计算属性 47
2.7 侦听器 49
2.8 样式绑定 50
2.8.1 绑定class属性 50
2.8.2 绑定style属性 55
2.9 阶段案例——学习计划表 58
本章小结 60
课后习题 60
第3章 组件基础(上) 62
3.1 选项式API和组合式API 62
3.2 生命周期函数 66
3.3 组件的注册和引用 68
3.3.1 注册组件 68
3.3.2 引用组件 69
3.4 解决组件之间的样式冲突 71
3.5 父组件向子组件传递数据 74
3.5.1 声明props 74
3.5.2 静态绑定props 75
3.5.3 动态绑定props 76
3.5.4 验证props 78
3.6 子组件向父组件传递数据 79
3.6.1 在子组件中声明自定义事件 79
3.6.2 在子组件中触发自定义事件 80
3.6.3 在父组件中监听自定义事件 80
3.7 跨级组件之间的数据传递 82
3.8 阶段案例——待办事项 86
本章小结 87
课后习题 88
第4章 组件基础(下) 90
4.1 动态组件 90
4.1.1 定义动态组件 91
4.1.2 利用KeepAlive组件实现组件
缓存 92
4.1.3 组件缓存相关的生命周期函数 94
4.1.4 KeepAlive组件的常用属性 96
4.2 插槽 98
4.2.1 什么是插槽 98
4.2.2 具名插槽 100
4.2.3 作用域插槽 102
4.3 自定义指令 105
4.3.1 什么是自定义指令 105
4.3.2 私有自定义指令的声明与使用 106
4.3.3 全局自定义指令的声明与使用 107
4.3.4 为自定义指令绑定参数 108
4.3.5 自定义指令的函数形式 109
4.4 引用静态资源 109
4.5 阶段案例——商品管理 111
本章小结 112
课后习题 112
第5章 路由 115
5.1 初识路由 115
5.2 初识Vue Router 117
5.2.1 Vue Router的安装 117
5.2.2 Vue Router的基本使用 118
5.3 路由重定向 122
5.4 嵌套路由 122
5.5 动态路由 125
5.5.1 动态路由概述 125
5.5.2 获取动态路径参数值 127
5.6 命名路由 129
5.7 编程式导航 131
5.8 导航守卫 133
5.9 阶段案例——后台管理系统 135
本章小结 137
课后习题 137
第6章 常用UI组件库 139
6.1 Element Plus组件库 139
6.1.1 安装Element Plus 139
6.1.2 Element Plus中的常用组件 140
6.2 Vant组件库 148
6.2.1 安装Vant 148
6.2.2 Vant中的常用组件 149
6.3 Ant Design Vue组件库 160
6.3.1 安装Ant Design Vue 160
6.3.2 Ant Design Vue中的常用组件 161
本章小结 169
课后习题 169
第7章 网络请求和状态管理 171
7.1 Axios 171
7.1.1 Axios概述 172
7.1.2 安装Axios 172
7.1.3 使用Axios 173
7.1.4 Axios图书列表案例 174
7.2 Vuex 177
7.2.1 Vuex概述 178
7.2.2 安装Vuex 179
7.2.3 使用Vuex 179
7.2.4 Vuex计数器案例 180
7.3 Pinia 183
7.3.1 Pinia概述 183
7.3.2 安装Pinia 183
7.3.3 使用Pinia 184
7.3.4 Pinia计数器案例 185
7.3.5 Pinia模块化 186
7.3.6 Pinia持久化存储 189
本章小结 194
课后习题 194
第8章 项目实战——“微商城”前后台
开发 196
8.1 项目分析 196
8.1.1 项目前台分析 196
8.1.2 项目后台分析 201
8.2 项目开发说明 205
本章小结 205