本书系统、全面地介绍Vue.js网站前端开发所涉及的各类知识。全书共16章，内容包括Vue.js简介、基础特性、条件判断与列表渲染、计算属性与监听属性、样式绑定、事件处理、表单控件绑定、自定义指令、组件、过渡、使用Vue Router实现路由管理、使用axios实现Ajax请求、Vue CLI、状态管理、综合开发实例51购商城、课程设计智汇企业官方网站首页。书中每章内容都与实例紧密结合，有助于读者理解知识、应用知识，达到学以致用的目的。
近年来，AIGC技术高速发展，成为各行各业高质量发展和生产效率提升的重要推动力。本书将AIGC技术融入理论学习、实例编写、复杂系统开发等环节，帮助读者实现高效编程。
本书可作为应用型本科计算机科学与技术专业和软件工程专业、高职软件技术专业及相关专业的教材，也可作为Vue.js爱好者及初、中级Vue.js程序设计开发人员的参考书。
（1）明日科技资深讲师面对面授课。
（2）结合AIGC实现高效编程，理论与实践结合，内容全面，配套资源丰富且制作精良。
（3）案例式写法，适合应用型本科院校和职业院校。
王龙，男，中共党员，晋中信息学院副教授，全国高等院校计算机基础教育研究会理事，山西计算机学会理事，山西省信创学会理事。近年发表学术论文10余篇，其中SCI收录2篇，EI收录1篇，核心期刊6篇。任职期间建设信创教育培训认证中心、山西省高等学校实验室，主持多项山西省高等学校教学改革创新项目、山西省科技创新项目，主持山西省一流课程软件项目实践，2023年荣获山西省教学成果奖一等奖。
第 1章 Vue.js简介 1
1.1 Vue.js概述 1
1.1.1 什么是Vue.js 1
1.1.2 Vue.js的特性 2
1.2 Vue.js的安装 2
1.2.1 使用CDN 2
1.2.2 使用NPM 2
1.2.3 使用Vue CLI 3
1.3 开发工具WebStorm简介 3
1.4 创建第 一个Vue实例 6
1.5 在WebStorm中引入AIGC工具 10
1.5.1 AIGC编程助手Baidu Comate 10
1.5.2 AIGC编程助手TONGYI Lingma 10
1.5.3 DeepSeek R1推理大模型 11
小结 11
上机指导 11
习题 12
第 2章 基础特性 13
2.1 应用程序实例及选项 13
2.1.1 数据 13
2.1.2 方法 14
2.1.3 生命周期钩子函数 15
2.2 插值 16
2.2.1 文本插值 16
2.2.2 插入HTML 18
2.2.3 绑定属性 18
2.2.4 使用表达式 20
2.3 指令 21
2.3.1 参数 21
2.3.2 动态参数 22
2.3.3 修饰符 22
2.4 AIGC辅助快速学习 22
2.4.1 AIGC辅助添加注释 22
2.4.2 AIGC辅助解释代码 22
2.4.3 AIGC辅助查询术语 23
小结 24
上机指导 24
习题 25
第3章 条件判断与列表渲染 26
3.1 条件判断 26
3.1.1 v-if指令 26
3.1.2 v-else指令 27
3.1.3 v-else-if指令 27
3.1.4 v-show指令 28
3.1.5 v-if和v-show的比较 29
3.2 列表渲染 30
3.2.1 应用v-for指令遍历数组 30
3.2.2 在元素中使用v-for 32
3.2.3 数组更新检测 32
3.2.4 应用v-for指令遍历对象 35
3.2.5 向对象中添加响应式属性 37
3.2.6 应用v-for指令遍历整数 37
3.3 AIGC辅助编程v-if和v-for指令的应用 38
3.3.1 切换登录类型 38
3.3.2 创建待办事项列表 39
小结 40
上机指导 40
习题 42
第4章 计算属性与监听属性 43
4.1 计算属性 43
4.1.1 什么是计算属性 43
4.1.2 getter和setter 45
4.1.3 计算属性的缓存 47
4.2 监听属性 48
4.2.1 什么是监听属性 48
4.2.2 deep选项 49
4.3 AIGC辅助编程简单计数器和长度单位换算的实现 50
4.3.1 实现简单计数器 50
4.3.2 实现长度单位换算 51
小结 52
上机指导 52
习题 54
第5章 样式绑定 55
5.1 class属性绑定 55
5.1.1 对象语法 55
5.1.2 数组语法 59
5.2 内联样式绑定 61
5.2.1 对象语法 62
5.2.2 数组语法 64
5.3 AIGC辅助编程为表格和文字使用样式绑定 65
5.3.1 实现表格隔行换色 65
5.3.2 制作静态3D效果的文字 66
小结 67
上机指导 67
习题 68
第6章 事件处理 69
6.1 事件监听 69
6.1.1 使用v-on指令 69
6.1.2 事件处理方法 70
6.1.3 使用内联JavaScript语句 72
6.2 事件处理中的修饰符 73
6.2.1 事件修饰符 73
6.2.2 按键修饰符 75
6.3 AIGC辅助编程单击事件的应用 76
6.3.1 统计单击按钮的次数 76
6.3.2 实现选择题 77
小结 78
上机指导 78
习题 80
第7章 表单控件绑定 81
7.1 绑定文本框 81
7.1.1 单行文本框 81
7.1.2 多行文本框 83
7.2 绑定复选框 84
7.2.1 单个复选框 84
7.2.2 多个复选框 84
7.3 绑定单选按钮 86
7.4 绑定下拉菜单 87
7.4.1 单选 87
7.4.2 多选 88
7.5 值绑定 90
7.5.1 单选按钮 90
7.5.2 复选框 90
7.5.3 下拉菜单 92
7.6 使用修饰符 92
7.6.1 .lazy 93
7.6.2 .number 93
7.6.3 .trim 94
7.7 AIGC辅助编程绑定输入框的值和下拉菜单 94
7.7.1 绑定输入框的值 94
7.7.2 绑定下拉菜单 95
小结 96
上机指导 96
习题 99
第8章 自定义指令 100
8.1 注册自定义指令 100
8.1.1 注册全局自定义指令 100
8.1.2 注册局部自定义指令 101
8.2 钩子函数 102
8.3 自定义指令的绑定值 105
8.3.1 绑定数值常量 105
8.3.2 绑定字符串常量 106
8.3.3 绑定对象字面量 106
8.4 AIGC辅助编程设置图片的不透明度和元素的边框 107
8.4.1 设置图片的不透明度 107
8.4.2 设置元素的边框 108
小结 109
上机指导 109
习题 110
第9章 组件 111
9.1 注册组件 111
9.1.1 注册全局组件 111
9.1.2 注册局部组件 113
9.2 数据传递 114
9.2.1 什么是Prop 114
9.2.2 传递动态Prop 115
9.2.3 Prop验证 116
9.3 自定义事件 119
9.3.1 自定义事件的监听和触发 119
9.3.2 将原生事件绑定到组件 122
9.4 内容分发 123
9.4.1 基础用法 123
9.4.2 编译作用域 124
9.4.3 默认内容 125
9.4.4 命名插槽 125
9.4.5 作用域插槽 128
9.5 动态组件 130
9.5.1 基础用法 130
9.5.2 keep-alive 132
9.6 AIGC辅助编程自定义事件与动态组件的应用 133
9.6.1 为元素设置背景颜色 133
9.6.2 切换文本内容 134
小结 135
上机指导 136
习题 137
第 10章 过渡 138
10.1 单元素过渡 138
10.1.1 CSS过渡 138
10.1.2 过渡的类介绍 139
10.1.3 自定义过渡类 141
10.1.4 CSS动画 142
10.1.5 JavaScript钩子函数 143
10.2 多元素过渡 146
10.2.1 基础用法 146
10.2.2 key属性 147
10.2.3 过渡模式 148
10.3 多组件过渡 149
10.4 列表过渡 151
10.5 AIGC辅助编程文字与列表项的过渡效果 152
10.5.1 实现文字显示和隐藏的过渡效果 153
10.5.2 实现列表项的过渡效果 153
小结 156
上机指导 156
习题 158
第 11章 使用Vue Router实现路由管理 159
11.1 路由基础 159
11.1.1 引入Vue Router 159
11.1.2 基本用法 159
11.1.3 动态路由匹配 162
11.1.4 命名路由 163
11.2 编程式导航 163
11.3 嵌套路由 166
11.4 命名视图 170
11.5 高级用法 173
11.5.1 beforeEach()钩子函数 173
11.5.2 scrollBehavior()方法 176
11.6 AIGC辅助编程使用两种方式实现内容切换 177
11.6.1 实现简单的选项卡切换 177
11.6.2 使用编程式导航实现内容切换 178
小结 180
上机指导 180
习题 183
第 12章 使用axios实现Ajax请求 184
12.1 什么是axios 184
12.2 引入axios 184
12.3 发送请求 185
12.3.1 发送get请求 185
12.3.2 发送post请求 187
12.4 AIGC辅助编程获取响应数据 189
12.4.1 使用axios发送get请求获取响应数据 189
12.4.2 使用axios发送post请求获取响应数据 191
小结 192
上机指导 192
习题 194
第 13章 Vue CLI 195
13.1 Vue CLI简介 195
13.2 Vue CLI的安装 196
13.3 创建项目 196
13.3.1 使用vue create命令 196
13.3.2 使用图形界面 199
13.4 项目结构 200
13.5 单文件组件 202
13.6 AIGC辅助编程单文件组件的应用 204
13.6.1 编写一个简单的计数器组件 204
13.6.2 实现选项卡切换图片效果 206
小结 207
上机指导 207
习题 210
第 14章 状态管理 211
14.1 Vuex简介 211
14.2 Vuex的安装 212
14.3 基础用法 212
14.3.1 Vuex的组成 212
14.3.2 在项目中使用Vuex 212
14.4 实例 222
14.5 AIGC辅助编程管理选项卡切换图片效果与计数器状态 228
14.5.1 管理选项卡切换图片效果 228
14.5.2 管理计数器状态 231
小结 233
上机指导 233
习题 237
第 15章 综合开发实例51购商城 238
15.1 项目的设计思路 238
15.1.1 项目概述 238
15.1.2 页面预览 238
15.1.3 功能结构 240
15.1.4 文件夹组织结构 241
15.2 主页的设计与实现 241
15.2.1 主页的设计 241
15.2.2 顶部区和底部区功能的实现 243
15.2.3 商品分类导航功能的实现 246
15.2.4 轮播图功能的实现 248
15.2.5 商品推荐功能的实现 250
15.3 商品详情页面的设计与实现 252
15.3.1 商品详情页面的设计 252
15.3.2 图片放大镜效果的实现 253
15.3.3 商品概要功能的实现 255
15.3.4 猜你喜欢功能的实现 258
15.3.5 选项卡切换效果的实现 260
15.4 购物车页面的设计与实现 262
15.4.1 购物车页面的设计 262
15.4.2 购物车页面的实现 262
15.5 付款页面的设计与实现 265
15.5.1 付款页面的设计 265
15.5.2 付款页面的实现 266
15.6 登录和注册页面的设计与实现 269
15.6.1 登录和注册页面的设计 269
15.6.2 登录页面的实现 270
15.6.3 注册页面的实现 272
15.7 AIGC辅助分析优化项目 275
15.7.1 AIGC辅助提供项目开发思路 275
15.7.2 AIGC辅助优化代码 276
15.7.3 AIGC辅助完善项目 279
小结 280
第 16章 课程设计智汇企业官方网站首页 281
16.1 课程设计目的 281
16.2 系统设计 281
16.2.1 业务流程 281
16.2.2 功能结构 282
16.2.3 系统预览 282
16.3 实现过程 283
16.3.1 导航栏的设计 283
16.3.2 活动图片的设计 284
16.3.3 新闻列表的设计 286
16.3.4 产品推荐列表的设计 288
16.3.5 浮动窗口的设计 291
小结 292
新书资讯
