Vue.js核心技术解析与uni-app跨平台实战开发

?学习一门新的技术之前，我们一般会考虑3个问题：学习的这门技术是什么？为什么要学习这门技术？如何去学习？

针对第1个问题，本书将从“HelloWorld”开始，以案例的形式深入浅出地讲解Vue.js和uni-app。

书中Vue.js部分共有12个章节，包括Vue.js基础入门、Vue.js绑定样式及案例、Vue.js生命周期函数、Vue.js动画、Vue.js组件、Vue.js路由、Vue.js高级进阶、element-ui/mint-ui组件库、axios发送HTTP请求、Vuex状态管理、企业项目实战、Vue3.X新特性解析等，力求让零基础读者入门Vue.js。

uni-app部分分为2个章节，包括uni-app核心基础、uni-app企业项目实战。大家可能会疑惑：为什么uni-app只用2个章节去讲解？其主要原因为uni-app是依赖于Vue.js的，如果掌握了Vue.js，相当于掌握了80%的uni-app，本书通过一个企业案例帮助读者把Vue.js和uni-app相结合，进行学习。

第2个问题：为什么要学习Vue.js和uni-app？

Vue.js作为国内流行的前端框架，具有易用、灵活、高效等特点，可以在工作中提高开发效率；还有一个原因是现在的前端工程师不只需要掌握HTML布局和JavaScript插件开发，他们做得更多的是和后端工程师配合，实现数据的渲染。Vue.js框架恰好可以实现前端需求；后一个原因是当前国内Vue.js的市场状况，Vue.js是我国程序员开发的前端框架，掌握Vue.js已经成为国内企业招聘前端工程师的一项重要指标。

uni-app是一个基于Vue.js开发的前端应用框架，只需要编写一套代码，就可以发布到Android、iOS以及各种小程序平台（微信、支付宝、百度等），当前官方文档推出了10个平台。也就是说，uni-app的出现帮助我们降低了学习成本，实现了程序的跨平台应用。

第3个问题：如何学习Vue.js和uni-app？

在学习之前需要读者先掌握HTML和CSS，并且需要有一定的JavaScript编程基础。本书附赠微课，可扫描书中二维码，观看视频讲解，以帮助大家更加透彻地理解和掌握知识点，实现独立开发企业项目的课程目标。

袁龙

2022.1

《Vue.js核心技术解析与uni-app跨平台实战开发》系统地介绍了Vue.js和uni-app的核心基础理论及企业项目开发，以实例的形式对Vue.js和uni-app进行深入浅出的讲解。《Vue.js核心技术解析与uni-app跨平台实战开发》共分14章，内容包括Vue.js基础入门、Vue.js绑定样式及案例、Vue.js生命周期函数、Vue.js动画、Vue.js组件、Vue.js路由、Vue.js高级进阶、element-ui/mint-ui组件库、axios发送HTTP请求、Vuex状态管理、企业项目实战、Vue3.X新特性解析、uni-app核心基础、uni-app企业项目实战等，书中大部分章节提供了实战项目案例源码。《Vue.js核心技术解析与uni-app跨平台实战开发》中每一个关键知识点均配套了同步视频讲解，以带领读者把书中的代码敲一遍，这不仅能使读者更加透彻地掌握知识点，实现独立开发企业级项目的目标，还能使读者及时地了解**技术动态。《Vue.js核心技术解析与uni-app跨平台实战开发》的读者对象为网页设计与制作人员、网站建设开发人员、相关专业的学生及网站制作爱好者。

《Vue.js核心技术解析与uni-app跨平台实战开发》系统地介绍了Vue.js和uni-app的核心基础理论及企业项目开发，以实例的形式对Vue.js和uni-app进行深入浅出的讲解。《Vue.js核心技术解析与uni-app跨平台实战开发》共分14章，内容包括Vue.js基础入门、Vue.js绑定样式及案例、Vue.js生命周期函数、Vue.js动画、Vue.js组件、Vue.js路由、Vue.js高级进阶、element-ui/mint-ui组件库、axios发送HTTP请求、Vuex状态管理、企业项目实战、Vue3.X新特性解析、uni-app核心基础、uni-app企业项目实战等，书中大部分章节提供了实战项目案例源码。《Vue.js核心技术解析与uni-app跨平台实战开发》中每一个关键知识点均配套了同步视频讲解，以带领读者把书中的代码敲一遍，这不仅能使读者更加透彻地掌握知识点，实现独立开发企业级项目的目标，还能使读者及时地了解**技术动态。《Vue.js核心技术解析与uni-app跨平台实战开发》的读者对象为网页设计与制作人员、网站建设开发人员、相关专业的学生及网站制作爱好者。

袁龙：主要从事Web开发、教学培训等业务，创建“锦匠特效”和“锦匠课堂”两大Web前端工具类网站，为数万前端开发者提供高效率的工作方式，轻松实现网页动画特效，目前是51CTO、CSDN等在线教育平台讲师。袁老师在51CTO课程平台的学员人数为31万 ，其中“Vue.js快速入门与应用”课程的学习人数高达5.7万

第 1 章 Vue.js 基础入门1 

1.1 什么是 Vue.js 1 

1.1.1 当前流行的前端框架1 

1.1.2 为什么要学习 Vue.js2 

1.1.3 Vue.js 核心理念2 

1.1.4 框架和库的区别2 

1.2 MVVM 前端视图层开发理念2 

1.3 创建 Vue 实例对象，详解 MVVM3 

1.4 详解插值表达式5 

1.5 Vue 基础指令7 

1.5.1 v-cloak 指令7 

1.5.2 v-text 指令9 

1.5.3 v-html 指令9 

1.5.4 v-bind 指令11 

1.5.5 v-on 指令13 

1.6 事件修饰符15 

1.6.1 鼠标按键修饰15 

1.6.2 系统修饰符15 

1.6.3 事件修饰符16 

1.7 双向数据绑定17 

1.7.1 v-model 修饰符18 

1.7.2 使用 v-model 实现计算器案例19 

1.8 v-for 指令21 

1.8.1 遍历普通数组22 

1.8.2 遍历对象数组23 

1.8.3 遍历对象24 

1.8.4 遍历数字25 

1.9 学生管理案例25 

1.9.1 渲染学生列表26 

1.9.2 新增学生28 

1.9.3 删除学生28 

1.9.4 搜索学生29

第 2 章 Vue.js 绑定样式及案例32 

2.1 class 类名绑定32 

2.1.1 对象控制绑定样式32 

2.1.2 数组控制绑定样式33 

2.2 style 行内样式绑定34 

2.2.1 对象控制绑定行内样式34 

2.2.2 数组控制绑定行内样式35 

2.3 Vue 绑定样式案例（标题排他）35 

2.4 控制元素显示隐藏37 

2.4.1 v-if 和 v-show 指令37 

2.4.2 v-if 实现选项卡案例39 

2.5 简单版购物车实例40 

2.5.1 购物车实例简介40 

2.5.2 静态页面布局41 

2.5.3 渲染购物车列表42 

2.5.4 修改商品选中状态43 

2.5.5 记录选中商品的总数量和总价格44 

2.5.6 全选状态46 

2.5.7 商品数量增加或减少48 

第 3 章 Vue.js 生命周期函数50 

3.1 创建期间生命周期函数50 

3.2 运行期间生命周期函数55 

3.3 销毁期间生命周期函数57 

3.4 扩展58 

第 4 章 Vue.js 动画59 

4.1 Vue 单组动画59 

4.2 Vue 定义多组动画61 

4.3 使用 animate 动画库63 

4.4 transition-group 列表动画64 

第 5 章 Vue.js 组件67 

5.1 创建全局组件67 

5.1.1 组件创建方式一67 

5.1.2 组件创建方式二68 

5.1.3 组件创建方式三68

5.2 创建私有组件69 

5.2.1 组件中的 data 和 methods71 

5.2.2 组件选项卡切换案例72 

5.3 动画组件74 

5.4 组件传值75 

5.4.1 父组件向子组件传值75 

5.4.2 父组件向子组件传递方法77 

5.4.3 子组件向父组件传值79 

5.5 Vue 获取 DOM 元素的方法（ref）82 

5.5.1 ref 获取普通 DOM 元素82 

5.5.2 ref 获取组件元素84 

第 6 章 Vue.js 路由86 

6.1 什么是路由86 

6.1.1 安装路由86 

6.1.2 使用路由87 

6.2 路由控制组件切换88 

6.3 路由重定向以及动画路由90 

6.4 路由传参91 

6.4.1 传参方式一91 

6.4.2 传参方式二92 

6.5 嵌套路由93 

6.6 路由布局95 

第 7 章 Vue.js 高级进阶97 

7.1 安装 vue-cli97 

7.1.1 vue-cli 创建项目98 

7.1.2 运行脚手架项目99 

7.2 vue-cli 目录结构100 

7.3 vue-cli 运行机制101 

7.4 vue-cli 选项卡案例103 

7.5 过滤器105 

7.5.1 私有过滤器105 

7.5.2 全局过滤器107 

7.6 Vue 计算属性109 

7.7 watch 侦听属性111 

7.8 slot 插槽113

7.9 链式路由跳转115 

7.10 路由守卫117 

7.10.1 全局路由守卫117 

7.10.2 组件内路由守卫119 

7.10.3 离开组件时守卫120 

第 8 章 element-ui/mint-ui 组件库122 

8.1 element-ui 使用步骤122 

8.2 mint-ui 的使用124 

第 9 章 axios 发送 HTTP 请求127 

9.1 安装 axios 127 

9.1.1 组件中使用 axios128 

9.1.2 配置全局域名129 

9.1.3 代码分离129 

9.2 axios 传递参数130 

9.3 axios 原理之 promise 131 

9.3.1 什么是 promise132 

9.3.2 为什么要用 promise132 

9.3.3 promise 基本使用132 

9.3.4 promise 的 API 133 

9.3.5 async 与 await137 

第 10 章 Vuex 状态管理142 

10.1 Vuex 基础应用142 

10.2 getters 的使用144 

10.3 mutations 的使用145 

10.4 actions 的使用148 

10.5 Vuex 代码分离151 

10.6 辅助函数152 

10.6.1 mapState 辅助函数152 

10.6.2 mapGetters 辅助函数153 

10.6.3 mapMutations 辅助函数154 

10.6.4 mapActions 辅助函数155 

10.7 Vuex 实例之登录退出156 

10.7.1 vue-cli 创建项目站点156 

10.7.2 Vuex 修改登录状态158

第 11 章 企业项目实战166 

11.1 vue-cli 创建项目166 

11.2 首页开发168 

11.2.1 布局首页静态页面170 

11.2.2 使用 axios 获取轮播图176 

11.2.3 首页广告版块数据渲染178 

11.2.4 首页商家推荐版块数据渲染180 

11.2.5 首页其他版块数据渲染181 

11.3 网页底部信息和产品列表页面开发182 

11.3.1 产品列表静态页面布局184 

11.3.2 渲染全部产品页面数据186 

11.3.3 产品价格排序功能189 

11.3.4 产品价格范围筛选功能190 

11.4 element-ui 实现产品分页192 

11.5 产品详情页面开发194 

第 12 章 Vue3.X 新特性解析198 

12.1 Vue3.0 新特性199 

12.2 什么是 Composition API 201 

12.2.1 setup 函数的特点202 

12.2.2 定义响应式数据203 

12.3 reactive 函数204 

12.4 封装功能模块，增加代码复用206 

12.5 Vue3 生命周期207 

12.6 computed 的使用208 

12.7 watch 监听的使用211 

12.8 依赖注入212 

12.9 Refs 模板216 

12.10 readonly()函数的使用218 

12.11 watchEffect()函数的使用219 

12.12 响应式系统工具集的使用220 

12.12.1 unref()220 

12.12.2 toRef()221 

12.12.3 isRef()221 

12.12.4 isProxy()221 

12.12.5 isReactive()222 

12.12.6 isReadonly()222

第 13 章 uni-app 核心基础223 

13.1 uni-app 概述223 

13.1.1 创建 uni-app 项目224 

13.1.2 uni-app 目录结构226 

13.1.3 uni-app 运行机制226 

13.2 常用组件229 

13.2.1 view 组件229 

13.2.2 text 组件230 

13.2.3 image 组件231 

13.3 常用特效231 

13.3.1 tabBar 导航使用232 

13.3.2 swiper 轮播图使用232 

13.4 uni-app 属性绑定和事件绑定233 

13.4.1 属性绑定234 

13.4.2 事件绑定235 

13.5 v-for 渲染数据235 

13.6 uni-app 生命周期236 

13.6.1 应用生命周期237 

13.6.2 页面生命周期237 

13.6.3 下拉刷新生命周期函数237 

13.6.4 上拉加载生命周期函数239 

13.7 uni-app 发送 HTTP 请求240 

13.8 跨端兼容241 

13.8.1 控制页面元素242 

13.8.2 控制 CSS 样式242 

13.8.3 控制 JS243 

13.9 页面跳转243 

13.9.1 网址跳转243 

13.9.2 事件跳转244 

13.9.3 传递参数245 

第 14 章 uni-app 企业项目实战247 

14.1 鲁嗑瓜子首页开发247 

14.1.1 布局首页静态页247 

14.1.2 调用数据接口渲染轮播图252 

14.1.3 首页广告版块数据渲染253 

14.1.4 首页商家推荐版块数据渲染254

14.1.5 首页其他版块数据渲染255 

14.2 产品列表页开发257 

14.2.1 布局产品列表静态页面257 

14.2.2 渲染产品列表数据258 

14.2.3 价格排序功能260 

14.2.4 价格范围筛选功能261 

14.3 产品详情页开发263&nbs