第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 在<template>元素中使用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辅助分析优化51购商城项目　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