Vue.js 3.x高效前端开发（视频教学版）

本书通过对Vue.js示例和综合案例的学习与演练，使读者快速掌握Vue.js 3.x框架的用法，提高Web前端的实战开发能力。本书配套教学资源非常丰富，适合Vue.js初学者，也适合高等院校计算机及相关专业的师生教学使用。

本书通过对Vue.js示例和综合案例的介绍与演练，使读者快速掌握Vue.js 3.x框架的用法，提高Web前端的实战开发能力。本书配套示例源码、PPT课件、教学教案、同步教学视频、习题及答案、其他资源与答疑服务。 本书共分17章，内容包括Vue.js 3.x基本概念、创建Vue.js实例、Vue.js的插值语法、精通指令、计算属性、v-bind及class与style绑定、表单与v-model双向绑定、精通监听器、事件处理、过渡和动画效果、组件和组合API、虚拟DOM和render()函数、精通Vue CLI和Vite、使用Vue Router开发单页面应用、使用axios与服务器通信、使用Vuex管理组件状态以及网上商城项目案例。 本书内容丰富、注重实践，对Vue.js框架的初学者而言，是一本简明易懂的入门书和工具书；对从事Web前端开发的读者来说，也是一本难得的参考手册。本书也适合作为高等院校和培训机构计算机相关专业的教材。

李小威，软件开发经理，在软件开发领域有多年的开发经验，尤其擅长Java、PHP、关系数据库、Web前端等技术，具有很强的实战经验。著有多本畅销书《Vue.js 3.0从入门到精通（视频教学版）》《SQL Server 2017从零开始学（视频教学版）》《SQL基础教程（视频教学版）》《PostgreSQL 11从入门到精通(视频教学版)》《MySQL 5.7从零开始学（视频教学版）》等。

第1章 认识Vue.js 3.x 1 1.1 Web前端技术的发展历程 1 1.1.1 从静态向动态转变 1 1.1.2 从后端走向前端 2 1.1.3 从前端走向全端 2 1.2 Vue.js概述 2 1.2.1 Vue.js是什么 2 1.2.2 Vue.js发展历程 4 1.3 MV*模式 4 1.3.1 MVC模式 4 1.3.2 MVVM模式 5 第2章 创建Vue.js实例 6 2.1 安装vue-devtools 6 2.2 在项目中引入Vue.js 8 2.2.1 使用CDN 9 2.2.2 使用NPM 9 2.2.3 使用命令行工具CLI 9 2.2.4 使用Vite 10 2.3 安装和使用编辑器HBuilder 10 2.4 项目实训—我的第一个Vue.js程序 12 第3章 Vue.js模板语法 16 3.1 创建应用程序实例 16 3.2 插值 17 3.3 方法选项 19 3.3.1 使用方法 19 3.3.2 传递参数 21 3.3.3 方法之间的调用 22 3.4 Vue实例的生命周期 23 3.4.1 认识生命周期钩子函数 23 3.4.2 created和mouted 25 3.5 指令 27 第4章 精通指令 29 4.1 常见内置指令 29 4.1.1 v-show指令 29 4.1.2 v-bind指令 30 4.1.3 v-model 31 4.1.4 v-on 33 4.1.5 v-text 34 4.1.6 v-html 35 4.1.7 v-once 36 4.1.8 v-pre 37 4.1.9 v-cloak 38 4.2 条件渲染指令 39 4.2.1 v-if 39 4.2.2 v-else-if和v-else 40 4.2.3 v-for 41 4.3 指令缩写 53 4.4 自定义指令 53 4.4.1 注册自定义指令 53 4.4.2 钩子函数 54 4.4.3 动态指令参数 56 4.5 项目实训—通过指令实现随机背景色效果 57 第5章 计算属性 59 5.1 计算属性的定义 59 5.2 计算属性的getter和setter方法 60 5.3 计算属性的缓存 62 5.4 计算属性代替v-for和v-if 65 5.5 项目实训—使用计算属性设计计算器 66 第6章 v-bind及class与style绑定 68 6.1 绑定HTML样式class 68 6.1.1 数组语法 68 6.1.2 对象语法 70 6.1.3 用在组件上 74 6.2 绑定内联样式style 74 6.2.1 对象语法 74 6.2.2 数组语法 77 6.3 项目实训—设计隔行变色的水果信息表 78 第7章 表单与v-model双向绑定 81 7.1 实现双向数据绑定 81 7.2 单行文本输入框 81 7.3 多行文本输入框 82 7.4 复选框 83 7.5 单选按钮 85 7.6 选择框 86 7.7 值绑定 89 7.7.1 复选框 89 7.7.2 单选框 89 7.7.3 选择框的选项 90 7.8 修饰符 91 7.8.1 lazy 91 7.8.2 number 92 7.8.3 trim 93 7.9 项目实训—设计用户注册页面 94 第8章 精通监听器 96 8.1 使用监听器 96 8.2 监听方法和对象 97 8.2.1 监听方法 97 8.2.2 监听对象 98 8.3 实例方法$watch 101 8.4 项目实训—使用监听器设计购物车效果 102 第9章 事件处理 107 9.1 监听事件 107 9.2 事件处理方法 108 9.3 事件修饰符 111 9.3.1 stop 112 9.3.2 capture 114 9.3.3 self 115 9.3.4 once 117 9.3.5 prevent 118 9.3.6 passive 119 9.4 按键修饰符 119 9.5 系统修饰键 121 9.6 项目实训—处理用户注册信息 122 第10章 过渡和动画效果 125 10.1 单元素/组件的过渡和动画 125 10.1.1 CSS过渡 125 10.1.2 过渡的类名 127 10.1.3 CSS动画 129 10.1.4 自定义过渡的类名 130 10.1.5 动画的JavaScript钩子函数 131 10.2 初始渲染的过渡 135 10.3 多个元素的过渡 136 10.4 列表过渡 137 10.4.1 列表的进入/离开过渡 138 10.4.2 列表的排序过渡 139 10.4.3 列表的交错过渡 140 10.5 项目实训—设计折叠菜单的过渡动画 142 第11章 组件和组合API 145 11.1 组件是什么 145 11.2 组件的注册 146 11.2.1 全局注册 146 11.2.2 局部注册 147 11.3 使用prop向子组件传递数据 147 11.3.1 prop基本用法 148 11.3.2 单向数据流 151 11.3.3 prop验证 151 11.3.4 非prop的属性 153 11.4 子组件向父组件传递数据 154 11.4.1 监听子组件事件 155 11.4.2 将原生事件绑定到组件 156 11.4.3 .sync修饰符 158 11.5 插槽 160 11.5.1 插槽基本用法 160 11.5.2 编译作用域 160 11.5.3 默认内容 161 11.5.4 命名插槽 162 11.5.5 作用域插槽 165 11.5.6 解构插槽prop 166 11.6 什么是组合API 168 11.7 setup()函数 168 11.8 响应式API 169 11.8.1 reactive()方法和watchEffect()方法 169 11.8.2 ref()方法 170 11.8.3 readonly()方法 171 11.8.4 computed()方法 172 11.8.5 watch()方法 172 11.9 项目实训—使用组件创建树状项目分类 173 第12章 虚拟DOM和render()函数 176 12.1 虚拟DOM 176 12.2 render()函数 177 12.3 创建组件的VNode 180 12.4 使用JavaScript代替模板功能 181 12.4.1 v-if和v-for 181 12.4.2 v-on 182 12.4.3 事件和按键修饰符 182 12.4.4 插槽 183 12.5 函数式组件 185 12.6 JSX 185 12.7 项目实训—设计商品采购信息列表 186 第13章 精通Vue CLI和Vite 189 13.1 脚手架的组件 189 13.2 脚手架环境搭建 190 13.3 安装脚手架 191 13.4 创建项目 192 13.4.1 使用命令 192 13.4.2 使用图形化界面 195 13.5 分析项目结构 196 13.6 配置scss、less和stuly 198 13.7 配置文件gackage.json 201 13.8 Vue.js 3.x新增的开发构建工具Vite 202 第14章 使用Vue Router开发单页面应用 205 14.1 使用Vue Router 205 14.1.1 在HTML页面使用路由 205 14.1.2 在项目中使用路由 210 14.2 命名路由 211 14.3 命名视图 213 14.4 路由传参 217 14.5 编程式导航 222 14.6 组件与Vue Router之间解耦 226 14.6.1 布尔模式 226 14.6.2 对象模式 229 14.6.3 函数模式 232 第15章 使用axios与服务器通信 235 15.1 什么是axios 235 15.2 安装axios 236 15.3 基本用法 236 15.3.1 get请求和post请求 236 15.3.2 请求JSON数据 238 15.3.3 跨域请求数据 239 15.3.4 并发请求 241 15.4 axios API 243 15.5 请求配置 244 15.6 创建实例 246 15.7 配置默认选项 246 15.8 247 15.9 项目实训—显示近7日的天气情况 248 第16章 使用Vuex管理组件状态 250 16.1 什么是Vuex 250 16.2 安装Vuex 251 16.3 在项目中使用Vuex 252 16.3.1 搭建一个项目 252 16.3.2 state对象 254 16.3.3 getter对象 255 16.3.4 mutation对象 257 16.3.5 action对象 259 第17章 开发网上商城项目 262 17.1 系统功能模块 262 17.2 系统结构分析 263 17.3 系统运行效果 263 17.4 系统功能模块设计与实现 264 17.4.1 首页头部组件 264 17.4.2 首页信息模块 265 17.4.3 用户注册与登录模块 268 17.4.4 商品模块 270 17.4.5 购买模块 276 17.4.6 支付模块 277 后记 279