uni-app加持下的Vue开发：效率与功能的双赢_uniapp和vue

---

在当今的前端开发领域，Vue.js以其简洁的API、灵活的组件系统和响应式数据绑定等特点，成为了众多开发者的首选框架。而uni-app，一个基于Vue.js的跨平台应用开发框架，更是将Vue的优势扩展到了移动应用、小程序等多个领域。Vue与uni-app的混合开发，为开发者提供了一种全新的开发体验。

一、Vue.js简介

Vue.js是一个用于构建用户界面的渐进式框架。它的核心库只关注视图层，不仅易于上手，还便于与第三方库或已有项目整合。Vue.js采用自底向上增量开发的设计，提供了响应式数据绑定和组合的视图组件。通过简单的API实现响应的数据绑定和组合的视图组件，可以快速构建出功能丰富、界面美观的应用。

二、uni-app简介

uni-app是一个使用Vue.js开发所有前端应用的框架，它可以编译到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。uni-app通过一套代码，实现多平台发布，大大提高了开发效率。同时，uni-app还提供了丰富的API和插件，让开发者可以轻松实现各种功能。

三、Vue与uni-app混合开发的优势

1. 跨平台能力：uni-app支持多平台发布，使得Vue应用可以轻松地扩展到移动应用、小程序等领域。
2. 高效开发：Vue与uni-app的混合开发，可以充分利用Vue的组件化和响应式数据绑定等特性，实现快速开发。同时，uni-app的编译系统也大大简化了跨平台开发的流程。
3. 功能丰富：uni-app提供了丰富的API和插件，让开发者可以轻松实现各种功能，如地图定位、支付、推送等。这些功能在Vue应用中同样可以无缝集成。
4. 易于维护：由于Vue和uni-app都采用了组件化的开发方式，因此代码结构清晰，易于维护和扩展。

四、Vue与uni-app混合开发的实践

在实际开发中，Vue与uni-app的混合开发可以通过以下步骤进行：

1. 使用Vue CLI或HBuilderX等工具创建Vue项目，并安装uni-app相关依赖。
2. 在Vue项目中编写组件和页面，利用Vue的响应式数据绑定和组件化等特性实现功能。
3. 使用uni-app的API和插件实现跨平台功能，如地图定位、支付等。
4. 利用uni-app的编译系统，将Vue项目编译为iOS、Android、H5、小程序等不同平台的应用。
5. 进行测试和调试，确保应用在不同平台上的稳定性和性能。

Vue与uni-app的混合开发是一种强大且灵活的开发方式。它结合了Vue的组件化和响应式数据绑定等特性以及uni-app的跨平台能力，为开发者提供了一种全新的开发体验。在实际开发中，我们可以利用Vue和uni-app的优势，快速构建出功能丰富、界面美观的跨平台应用。

---

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

• 获取方式：https://item.jd.com/13568136.html

编辑推荐

《Vue.js核心技术解析与uni-app跨平台实战开发》讲解Vue的各种指令、过渡动画、组件以及路由等核心内容，配书课程会伴随着实例进行深入浅出的讲解，提供干货分享和精品课件，以提高读者在企业项目中的工作效率。《Vue.js核心技术解析与uni-app跨平台实战开发》总体上偏向实战，通过带你手写一个自己的Vue框架，练习接口调用、渲染数据，进而开发跨平台项目。

内容简介

《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

14.4 App 打包265

14.4.1 H5 发布265

14.4.2 App 发布266

前言/序言

学习一门新的技术之前，我们一般会考虑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编程基础。