Web前端框架技术 / 高等职业院校互联网+新形态创新系列教材·计算机系列
定价：￥59.80
作者： 白文荣，路颖，张跟兄
出版时间：2025-03
最新印次日期：2025-3
出版社：清华大学出版社
试读
- 清华大学出版社
- 9787302681205
- 1-1
- 556810
- 66269565-9
- 16开
- 2025-03
- 电子与信息大类
- 计算机类
- 计算机网络
- 高职
作者简介
内容简介
《Web前端框架技术》是一本全面深入的实战教程，系统地讲解了Web前端开发框架技术。《Web前端框架技术》采用任务驱动的教学方法，引导读者分析和实践实际案例，逐步掌握所需知识和技能，最终完成整个任务。 《Web前端框架技术》内容分为三个部分，分别对应三个主要的Web前端框架：Bootstrap、Vue和React。在Bootstrap部分，详细介绍Bootstrap的设计原则、CSS技术、布局组件以及常用插件，并通过一个综合性的影视娱乐项目案例，帮助读者快速掌握Bootstrap在前端项目开发中的应用。Vue部分则按照由浅入深的顺序，讲解Vue的下载安装、模板语法、常用指令、计算属性、侦听器、组件开发、Vue CLI、Vue路由以及状态管理等核心知识点，并通过一个开放大学项目的综合案例，让读者完整体验使用Bootstrap+Vue进行前端项目开发的全过程。React部分则涵盖了React的开发概念、JSX语法、组件结构、生命周期以及表单应用等关键内容，并通过构建一个虚拟社区网站项目，让读者感受使用React框架开发前端项目的高效性。 《Web前端框架技术》将理论与实践相结合，内容丰富、案例详实，既适合作为Web前端开发初学者和移动网站设计与开发人员的自学工具书，也适合作为高职院校和培训机构计算机相关专业的教学参考用书。
目录
目 录
第1篇 Bootstrap
第1章 Bootstrap设计基本原理 3
任务1.1 视口 4
1.1.1 Bootstrap概述 4
1.1.2 响应式设计概念 5
1.1.3 视口 6
任务1.2 媒体查询 8
1.2.1 Bootstrap编辑器 9
1.2.2 媒体查询概述 10
任务1.3 栅格系统 11
1.3.1 栅格系统概述 12
1.3.2 容器 12
任务1.4 弹性盒布局 14
1.4.1 流式布局 14
1.4.2 弹性盒布局 15
本章小结 17
自测题 17
第2章 Bootstrap CSS技术 19
任务2.1 Bootstrap?排版 20
2.1.1 Bootstrap样式 21
2.1.2 标题 22
任务2.2 Bootstrap表格 24
2.2.1 表格概述 25
2.2.2 表格种类 26
任务2.3 Bootstrap?表单 28
2.3.1 表单 28
2.3.2 表单的类型 29
任务2.4 Bootstrap?按钮 30
2.4.1 按钮 30
2.4.2 按钮组 31
任务2.5 Bootstrap?图片 33
2.5.1 图片 34
2.5.2 图片类型 34
本章小结 35
自测题 35
第3章 Bootstrap布局组件 37
任务3.1 Bootstrap下拉菜单 38
3.1.1 下拉菜单 38
3.1.2 按钮下拉菜单 39
任务3.2 Bootstrap输入框组 40
3.2.1 输入框组 41
3.2.2 标签 41
任务3.3 Bootstrap导航栏 43
3.3.1 导航栏 43
3.3.2 导航栏属性 44
任务3.4 Bootstrap分页 46
3.4.1 分页 47
3.4.2 翻页 47
任务3.5 Bootstrap列表组 49
3.5.1 徽章 49
3.5.2 列表组 51
本章小结 52
自测题 52
第4章 Bootstrap插件 55
任务4.1 Bootstrap?模态框 56
4.1.1 创建模态框 56
4.1.2 模态框的事件 58
任务4.2 Bootstrap?弹出框 60
4.2.1 弹出框 60
4.2.2 警告框 61
任务4.3 Bootstrap?轮播 62
4.3.1 多媒体对象 63
4.3.2 轮播图 63
任务4.4 Bootstrap?折叠 64
4.4.1 折叠菜单 65
4.4.2 折叠选项 65
本章小结 67
自测题 67
第5章 影视娱乐项目实战 69
任务描述 70
任务分析 70
任务实现 70
本章小结 90
自测题 90
第2篇 Vue
第6章 Vue概述 95
任务6.1 初识Vue 96
6.1.1 Vue 96
6.1.2 Vue的特性 97
6.1.3 Vue的版本 98
任务6.2 第一个Vue程序 98
6.2.1 Vue的下载与引入 99
6.2.2 第一个Vue程序 100
6.2.3 Vue调试工具Vue Devtools 101
本章小结 104
自测题 104
第7章 Vue模板语法 106
任务7.1 Vue实例与生命周期 107
7.1.1 创建Vue实例 107
7.1.2 组件选项 108
7.1.3 生命周期钩子 110
任务7.2 插值和指令 113
7.2.1 插值 114
7.2.2 指令 117
本章小结 119
自测题 120
第8章 Vue指令 121
任务8.1 Vue样式绑定指令 122
8.1.1 绑定HTML class样式 122
8.1.2 绑定内联样式 128
任务8.2 Vue事件绑定指令 131
8.2.1 监听事件 132
8.2.2 事件处理方法 132
8.2.3 事件对象 134
8.2.4 事件修饰符 135
8.2.5 按键修饰符 139
8.2.6 系统修饰键 140
任务8.3 Vue双向绑定指令 142
8.3.1 表单双向绑定基础用法 143
8.3.2 值绑定 148
8.3.3 修饰符 149
任务8.4 Vue条件渲染指令 152
8.4.1 v-if/v-else/v-else-if指令 152
8.4.2 v-show指令 155
8.4.3 v-if指令和v-show指令的
区别 155
任务8.5 Vue列表渲染指令 157
8.5.1 使用v-for指令遍历数组 157
8.5.2 使用v-for指令遍历对象 159
8.5.3 使用v-for指令遍历整数 160
8.5.4 数组更新检测 160
8.5.5 key属性 161
8.5.6 在 中使用 v-for
指令 163
8.5.7 v-for指令与v-if指令一同
使用 164
本章小结 165
自测题 166
第9章 计算属性与侦听器 168
任务9.1 计算属性 169
9.1.1 计算属性的定义 169
9.1.2 计算属性的缓存 171
9.1.3 计算属性的getter方法
和setter方法 173
任务9.2 侦听器 176
9.2.1 侦听属性 176
9.2.2 侦听器的其他形式 178
9.2.3 实例方法$watch 181
本章小结 183
自测题 183
第10章 组件基础 186
任务10.1 组件的定义 187
任务10.2 组件的注册 189
10.2.1 全局注册 189
10.2.2 局部注册 191
任务10.3 通过prop向子组件传递
数据 193
10.3.1 传递静态或动态的prop 194
10.3.2 单向数据流 196
10.3.3 prop的验证 197
10.3.4 非prop属性 198
任务10.4 监听子组件事件 200
10.4.1 使用事件抛出一个值 201
10.4.2 在组件上使用v-model
指令 202
任务10.5 插槽 205
10.5.1 插槽内容 205
10.5.2 渲染作用域 206
10.5.3 默认内容 206
10.5.4 具名插槽 207
10.5.5 作用域插槽 208
任务10.6 动态组件 210
本章小结 214
自测题 214
第11章 Vue CLI 217
任务11.1 Vue CLI脚手架搭建 218
11.1.1 Vue CLI简介 218
11.1.2 Node.js环境搭建 219
11.1.3 安装脚手架 221
11.1.4 创建项目 222
11.1.5 项目结构 223
本章小结 226
自测题 226
第12章 Vue路由和状态管理 228
任务12.1 Vue Router 229
12.1.1 路由的基本使用 230
12.1.2 嵌套路由 234
12.1.3 命名路由 236
任务12.2 状态管理——Vuex 240
12.2.1 初识Vuex 240
12.2.2 Vuex的基本使用 242
本章小结 250
自测题 250
第13章 开放大学项目实战 253
任务描述 254
任务分析 256
任务实现 256
本章小结 269
自测题 269
第3篇 React
第14章 初识React 275
任务14.1 React概述及基本使用 276
14.1.1 React概述 276
14.1.2 React的特点 277
14.1.3 React的安装 278
14.1.4 React的使用 281
14.1.5 React脚手架的使用 282
任务14.2 JSX简介 286
14.2.1 JSX概述 286
14.2.2 JSX的语法 287
14.2.3 JSX中使用JavaScript
表达式 289
14.2.4 JSX的条件渲染 292
14.2.5 JSX的列表渲染 294
14.2.6 JSX的样式处理 295
本章小结 298
自测题 298
第15章 React组件 300
任务15.1 React组件概述 301
15.1.1 组件的定义 301
15.1.2 组件的特点 303
15.1.3 React组件的两种创建
方式 303
15.1.4 React事件处理 304
15.1.5 组件中的props 307
15.1.6 组件中的state 308
任务15.2 React组件的生命周期 312
15.2.1 组件生命周期 312
15.2.2 事件分类 313
15.2.3 组件生命周期的三个阶段 315
任务15.3 在React中使用表单 319
15.3.1 受控组件 320
15.3.2 定义表单元素 320
15.3.3 非受控组件 324
本章小结 327
自测题 327
第16章 虚拟社区网站项目实战 331
任务描述 332
任务分析 332
任务实现 333
本章小结 340
自测题 341
参考文献 343
第1篇 Bootstrap
第1章 Bootstrap设计基本原理 3
任务1.1 视口 4
1.1.1 Bootstrap概述 4
1.1.2 响应式设计概念 5
1.1.3 视口 6
任务1.2 媒体查询 8
1.2.1 Bootstrap编辑器 9
1.2.2 媒体查询概述 10
任务1.3 栅格系统 11
1.3.1 栅格系统概述 12
1.3.2 容器 12
任务1.4 弹性盒布局 14
1.4.1 流式布局 14
1.4.2 弹性盒布局 15
本章小结 17
自测题 17
第2章 Bootstrap CSS技术 19
任务2.1 Bootstrap?排版 20
2.1.1 Bootstrap样式 21
2.1.2 标题 22
任务2.2 Bootstrap表格 24
2.2.1 表格概述 25
2.2.2 表格种类 26
任务2.3 Bootstrap?表单 28
2.3.1 表单 28
2.3.2 表单的类型 29
任务2.4 Bootstrap?按钮 30
2.4.1 按钮 30
2.4.2 按钮组 31
任务2.5 Bootstrap?图片 33
2.5.1 图片 34
2.5.2 图片类型 34
本章小结 35
自测题 35
第3章 Bootstrap布局组件 37
任务3.1 Bootstrap下拉菜单 38
3.1.1 下拉菜单 38
3.1.2 按钮下拉菜单 39
任务3.2 Bootstrap输入框组 40
3.2.1 输入框组 41
3.2.2 标签 41
任务3.3 Bootstrap导航栏 43
3.3.1 导航栏 43
3.3.2 导航栏属性 44
任务3.4 Bootstrap分页 46
3.4.1 分页 47
3.4.2 翻页 47
任务3.5 Bootstrap列表组 49
3.5.1 徽章 49
3.5.2 列表组 51
本章小结 52
自测题 52
第4章 Bootstrap插件 55
任务4.1 Bootstrap?模态框 56
4.1.1 创建模态框 56
4.1.2 模态框的事件 58
任务4.2 Bootstrap?弹出框 60
4.2.1 弹出框 60
4.2.2 警告框 61
任务4.3 Bootstrap?轮播 62
4.3.1 多媒体对象 63
4.3.2 轮播图 63
任务4.4 Bootstrap?折叠 64
4.4.1 折叠菜单 65
4.4.2 折叠选项 65
本章小结 67
自测题 67
第5章 影视娱乐项目实战 69
任务描述 70
任务分析 70
任务实现 70
本章小结 90
自测题 90
第2篇 Vue
第6章 Vue概述 95
任务6.1 初识Vue 96
6.1.1 Vue 96
6.1.2 Vue的特性 97
6.1.3 Vue的版本 98
任务6.2 第一个Vue程序 98
6.2.1 Vue的下载与引入 99
6.2.2 第一个Vue程序 100
6.2.3 Vue调试工具Vue Devtools 101
本章小结 104
自测题 104
第7章 Vue模板语法 106
任务7.1 Vue实例与生命周期 107
7.1.1 创建Vue实例 107
7.1.2 组件选项 108
7.1.3 生命周期钩子 110
任务7.2 插值和指令 113
7.2.1 插值 114
7.2.2 指令 117
本章小结 119
自测题 120
第8章 Vue指令 121
任务8.1 Vue样式绑定指令 122
8.1.1 绑定HTML class样式 122
8.1.2 绑定内联样式 128
任务8.2 Vue事件绑定指令 131
8.2.1 监听事件 132
8.2.2 事件处理方法 132
8.2.3 事件对象 134
8.2.4 事件修饰符 135
8.2.5 按键修饰符 139
8.2.6 系统修饰键 140
任务8.3 Vue双向绑定指令 142
8.3.1 表单双向绑定基础用法 143
8.3.2 值绑定 148
8.3.3 修饰符 149
任务8.4 Vue条件渲染指令 152
8.4.1 v-if/v-else/v-else-if指令 152
8.4.2 v-show指令 155
8.4.3 v-if指令和v-show指令的
区别 155
任务8.5 Vue列表渲染指令 157
8.5.1 使用v-for指令遍历数组 157
8.5.2 使用v-for指令遍历对象 159
8.5.3 使用v-for指令遍历整数 160
8.5.4 数组更新检测 160
8.5.5 key属性 161
8.5.6 在 中使用 v-for
指令 163
8.5.7 v-for指令与v-if指令一同
使用 164
本章小结 165
自测题 166
第9章 计算属性与侦听器 168
任务9.1 计算属性 169
9.1.1 计算属性的定义 169
9.1.2 计算属性的缓存 171
9.1.3 计算属性的getter方法
和setter方法 173
任务9.2 侦听器 176
9.2.1 侦听属性 176
9.2.2 侦听器的其他形式 178
9.2.3 实例方法$watch 181
本章小结 183
自测题 183
第10章 组件基础 186
任务10.1 组件的定义 187
任务10.2 组件的注册 189
10.2.1 全局注册 189
10.2.2 局部注册 191
任务10.3 通过prop向子组件传递
数据 193
10.3.1 传递静态或动态的prop 194
10.3.2 单向数据流 196
10.3.3 prop的验证 197
10.3.4 非prop属性 198
任务10.4 监听子组件事件 200
10.4.1 使用事件抛出一个值 201
10.4.2 在组件上使用v-model
指令 202
任务10.5 插槽 205
10.5.1 插槽内容 205
10.5.2 渲染作用域 206
10.5.3 默认内容 206
10.5.4 具名插槽 207
10.5.5 作用域插槽 208
任务10.6 动态组件 210
本章小结 214
自测题 214
第11章 Vue CLI 217
任务11.1 Vue CLI脚手架搭建 218
11.1.1 Vue CLI简介 218
11.1.2 Node.js环境搭建 219
11.1.3 安装脚手架 221
11.1.4 创建项目 222
11.1.5 项目结构 223
本章小结 226
自测题 226
第12章 Vue路由和状态管理 228
任务12.1 Vue Router 229
12.1.1 路由的基本使用 230
12.1.2 嵌套路由 234
12.1.3 命名路由 236
任务12.2 状态管理——Vuex 240
12.2.1 初识Vuex 240
12.2.2 Vuex的基本使用 242
本章小结 250
自测题 250
第13章 开放大学项目实战 253
任务描述 254
任务分析 256
任务实现 256
本章小结 269
自测题 269
第3篇 React
第14章 初识React 275
任务14.1 React概述及基本使用 276
14.1.1 React概述 276
14.1.2 React的特点 277
14.1.3 React的安装 278
14.1.4 React的使用 281
14.1.5 React脚手架的使用 282
任务14.2 JSX简介 286
14.2.1 JSX概述 286
14.2.2 JSX的语法 287
14.2.3 JSX中使用JavaScript
表达式 289
14.2.4 JSX的条件渲染 292
14.2.5 JSX的列表渲染 294
14.2.6 JSX的样式处理 295
本章小结 298
自测题 298
第15章 React组件 300
任务15.1 React组件概述 301
15.1.1 组件的定义 301
15.1.2 组件的特点 303
15.1.3 React组件的两种创建
方式 303
15.1.4 React事件处理 304
15.1.5 组件中的props 307
15.1.6 组件中的state 308
任务15.2 React组件的生命周期 312
15.2.1 组件生命周期 312
15.2.2 事件分类 313
15.2.3 组件生命周期的三个阶段 315
任务15.3 在React中使用表单 319
15.3.1 受控组件 320
15.3.2 定义表单元素 320
15.3.3 非受控组件 324
本章小结 327
自测题 327
第16章 虚拟社区网站项目实战 331
任务描述 332
任务分析 332
任务实现 333
本章小结 340
自测题 341
参考文献 343
