目    录

第 1 章  流行的前端开发框架Vue.js 1

1.1  前端开发技术的发展 1

1.2  熟悉MV*模式 2

1.2.1  MVC模式 2

1.2.2  MVVM模式 2

1.3  Vue.js概述 3

1.3.1  Vue.js“组件化”思想 3

1.3.2  Vue.js的发展历程 4

1.3.3  Vue.js 3.4的特性 5

1.4  安装Vue.js 3.x 6

1.4.1  使用CDN方式 6

1.4.2  NPM 6

1.4.3  命令行工具 7

1.4.4  使用Vite方式 7

1.5  案例实战——使用Vue.js框架 8

1.6  Vue.js 3.x的新变化 9

第 2 章  Vue.js模板应用 12

2.1  模板插值 12

2.1.1  文本插值 12

2.1.2  原始HTML 13

2.1.3  使用JavaScript表达式 14

2.2  常用的内置模板指令 15

2.2.1  v-on 16

2.2.2  v-text 17

2.2.3  v-once 18

2.2.4  v-pre 18

2.2.5  v-cloak 19

2.3  条件渲染 20

2.3.1  v-if/v-else-if/v-else 20

2.3.2  使用v-show指令进行条件渲染 22

2.4  使用v-for指令进行循环渲染 23

2.5  案例实战1——通过插值语法实现姓名组合 35

2.6  案例实战2——通过指令实现下拉菜单效果 36

第 3 章  组件的方法和计算属性 39

3.1  方法选项 39

3.1.1  使用方法 39

3.1.2  传递参数 41

3.1.3  方法之间的调用 42

3.2  使用计算属性 43

3.3  计算属性的get和set方法 44

3.4  计算属性的缓存 46

3.5  使用计算属性代替v-for和v-if 49

3.6  绑定HTML样式（class） 51

3.6.1  数组语法 51

3.6.2  对象语法 53

3.6.3  在组件上使用class属性 56

3.7  绑定内联样式（style） 57

3.7.1  对象语法 57

3.7.2  数组语法 59

3.8  案例实战1——设计隔行变色的商品表 60

3.9  案例实战2——使用计算属性设计购物车效果 63

第 4 章  表单的双向绑定 66

4.1  实现双向数据绑定 66

4.2  单行文本输入框 66

4.3  多行文本输入框 67

4.4  复选框 68

4.5  单选按钮 70

4.6  选择框 71

4.7  值绑定 74

4.7.1  复选框 74

4.7.2  单选框 75

4.7.3  选择框的选项 75

4.8  修饰符 76

4.8.1  lazy 76

4.8.2  number 77

4.8.3  trim 78

4.9  案例实战——设计用户注册页面 79

第 5 章  处理用户交互 81

5.1  监听事件 81

5.2  事件处理方法 82

5.3  事件修饰符 86

5.3.1  stop 86

5.3.2  capture 88

5.3.3  self 90

5.3.4  once 92

5.3.5  prevent 93

5.3.6  passive 94

5.4  按键修饰符 94

5.5  系统修饰键 96

5.6  使用监听器 97

5.7  监听方法 99

5.8  监听对象 100

5.9  案例实战1——使用监听器设计购物车效果 103

5.10  案例实战2——处理用户注册信息 105

第 6 章  精通组件和组合API 107

6.1  组件是什么 107

6.2  组件的注册 107

6.2.1  全局注册 108

6.2.2  局部注册 109

6.3  使用prop向子组件传递数据 110

6.3.1  prop的基本用法 110

6.3.2  单向数据流 113

6.3.3  prop验证 114

6.3.4  非prop的属性 116

6.4  子组件向父组件传递数据 117

6.4.1  监听子组件事件 118

6.4.2  将原生事件绑定到组件 119

6.4.3  .sync修饰符 121

6.5  插槽 123

6.5.1  插槽的基本用法 123

6.5.2  编译作用域 123

6.5.3  默认内容 124

6.5.4  命名插槽 125

6.5.5  作用域插槽 128

6.5.6  解构插槽prop 130

6.6  Vue.js 3.x的新变化1——组合API 131

6.7  setup()函数 131

6.8  响应式API 133

6.8.1  reactive()方法和watchEffect()方法 133

6.8.2  ref()方法 134

6.8.3  readonly()方法 135

6.8.4  computed()方法 135

6.8.5  watch()方法 136

6.9  Vue.js 3.x的新变化2——访问组件的方式 137

6.10  案例实战——使用组件创建树状项目分类 138

第 7 章  虚拟DOM和render()函数 140

7.1  虚拟DOM 140

7.2  render()函数 141

7.3  创建组件的VNode 144

7.4  使用JavaScript代替模板功能 145

7.4.1  v-if和v-for 145

7.4.2  v-on 146

7.4.3  事件和按键修饰符 146

7.4.4  插槽 147

7.5  函数式组件 149

7.6  JSX 149

7.7  案例实战——设计商品采购信息列表 150

第 8 章  玩转动画效果 153

8.1  单元素/组件的过渡 153

8.1.1  CSS过渡 153

8.1.2  过渡的类名 155

8.1.3  CSS动画 158

8.1.4  自定义过渡的类名 159

8.1.5  动画的JavaScript钩子函数 160

8.2  初始渲染的过渡 164

8.3  多个元素的过渡 165

8.4  列表过渡 166

8.4.1  列表的进入/离开过渡 167

8.4.2  列表的排序过渡 168

8.4.3  列表的交错过渡 169

8.5  案例实战1——商品编号增加器 171

8.6  案例实战2——设计下拉菜单的过渡动画 173

第 9 章  熟练使用构建工具Vue CLI和Vite 175

9.1  脚手架的组件 175

9.2  脚手架环境搭建 176

9.3  安装脚手架 179

9.4  创建项目 180

9.4.1  使用命令 180

9.4.2  使用图形化界面 182

9.5  分析项目结构 186

9.6  配置Sass、Less和Stylus 188

9.7  配置文件package.json 190

9.8  Vue.js 3.x新增开发构建工具——Vite 191

第 10 章  基于Vue 3的UI组件库Element Plus 194

10.1  Element Plus的安装与使用 194

10.2  基本组件 196

10.2.1  按钮组件 196

10.2.2  文字链接组件 198

10.2.3  间距组件 198

10.3  页面布局 201

10.3.1  创建页面基础布局 201

10.3.2  布局容器 203

10.4  表单类组件 205

10.4.1  单选框 205

10.4.2  复选框 206

10.4.3  标准输入框组件 208

10.4.4  带推荐列表的输入框组件 210

10.4.5  数字输入框 212

10.4.6  选择列表 213

10.4.7  多级列表组件 216

10.5  开关与滑块组件 218

10.5.1  开关组件 218

10.5.2  滑块组件 219

10.6  选择器组件 221

10.6.1  时间选择器 221

10.6.2  日期选择器 223

10.6.3  颜色选择器 224

10.7  提示类组件 225

10.7.1  警告组件 225

10.7.2  通知组件 227

10.7.3  消息提示组件 228

10.8  数据承载相关组件 229

10.8.1  表格组件 229

10.8.2  导航菜单组件 232

10.8.3  标签页组件 234

10.8.4  标记组件 236

10.8.5  结果组件 237

10.8.6  抽屉组件 238

10.9  案例实战——设计一个商城活动页面 240

第 11 章  网络通信框架axios 244

11.1  什么是axios 244

11.2  安装axios 244

11.3  基本用法 245

11.3.1  axios的get请求和post请求 245

11.3.2  请求同域下的JSON数据 247

11.3.3  跨域请求数据 249

11.3.4  并发请求 250

11.4  axios API 251

11.5  请求配置 251

11.6  创建实例 254

11.7  配置默认选项 254

11.8  拦截器 255

11.9  Vue.js 3.x的新变化——替代Vue.prototype 255

11.10  案例实战——显示近7日的天气情况 256

第 12 章  使用Vue Router进行路由管理 259

12.1  使用Vue Router 259

12.1.1  在HTML页面使用路由 259

12.1.2  在项目中使用路由 264

12.2  命名路由 266

12.3  命名视图 268

12.4  路由传参 272

12.5  编程式导航 277

12.6  组件与Vue Router间解耦 281

12.6.1  布尔模式 281

12.6.2  对象模式 284

12.6.3  函数模式 287

12.7  案例实战——开发网站会员登录页面 290

第 13 章  状态管理框架Vuex 295

13.1  什么是Vuex 295

13.2  安装Vuex 296

13.3  在项目中使用Vuex 297

13.3.1  搭建一个项目 297

13.3.2  state对象 299

13.3.3  getter对象 300

13.3.4  mutation对象 302

13.3.5  action对象 304

13.4  案例实战——设计一个商城购物车页面 306

第 14 章  基于Vue的网上商城系统开发 313

14.1  系统功能模块 313

14.2  使用Vite搭建项目 313

14.3  设计首页 314

14.3.1  页面头部组件 314

14.3.2  网页首页组件 315

14.3.3  网页页脚组件 320

14.4  设计商品详情页面 320

14.5  设计商品分类页面 322

14.6  设计商品结算页面 325

14.7  设计个人信息页面 328

14.8  设计订单信息页面 331

14.9  路由配置 334

14.10  系统的运行 335

第 15 章  基于Element Plus的图书借阅系统开发 336

15.1  使用Vite搭建项目 336

15.2  设计登录页面 338

15.3  设计注册页面 340

15.4  设计首页 341

15.5  设计会员信息页面 344

15.6  设计图书借阅信息页面 349

15.7  设计还书信息页面 351

15.8  系统的运行 353

15.9  系统的调试 353