前端开发技术案例教程（Vue.js）

教材名称：	前端开发技术案例教程（Vue.js）
ISBN号：	978-7-89535-094-6	作者：	姜敏
字数：	474千字	规格：	16k
印制时间：	2023-02-01	出版日期：	2023-02-01
定价：	50 元	样章下载：	前端开发技术案例教程（Vue.js）—样章.pdf
购买地址：

1.教材的基本信息

《前端开发技术案例教程（Vue.js）》系统讲解了前端开发框架Vue.js的基础知识和使用Vue.js框架进行应用程序开发的案例教程。

Vue.js是一款优秀的前端开发框架，是最适合前端开发者学习的MVVM框架之一。它之所以这么受企业前端开发人员的欢迎，是因为它具有轻量级、组件化和友好的API等突出优点。本教材深入浅出、图文并茂，从技术入门到工程化项目开发，每个章节都以案例教学为引导，以培养能力为目的，抛开了冗余难懂的理论化内容，强调实际操作、快速上手。本教材适合有一定前端开发基础知识、初次接触Vue.js的初学者，也适合转型Vue.js的前端开发人员。本教材主要特点如下：

（1）教学案例丰富实用

本教材以案例教学为引导，每一章都设计了章节案例和实践环节案例，两个案例效果实用、循序渐进地帮助读者更好地掌握章节的知识和技能点，体现了“教、学、做一体化”的思想，方便读者快速上手，培养读者实际操作的动手能力。

（2）内容组织层层递进

本教材分为知识篇（上篇）、进阶篇（中篇）和实战篇（下篇）三部分。按照由浅入深的顺序，首先介绍教材中项目实战所需要的Vue.js基础知识，然后讲解VueCLI在项目开发中的应用，最后通过两个实战项目灵活运用和整合前面所学习的知识和技术，在巩固和运用Vue.js的基础上从零开始完成两个完整的项目。

（3）混合式教学资源立体丰富

本教材的每个章节的案例都紧紧围绕着实际项目进行，配备全方位数字化教学资源，包括课程标准、教学课件、微视频课程、电子教案、案例代码、项目指导和“1+x”职业技能等级证书Web前端开发（高级）证书模拟测试题等，方便读者线上和线下混合式学习。

2.教材的基本结构与内容组织

本教材三个篇章共包括13章的内容。其中第1章到第6章为知识篇，第7章到第11章为进阶篇，第12章和13章为实战篇。每章都涵盖了单元概述、重点和难点、单元知识正文、章节案例、实践环节、本章小结和本章习题7个部分。每一章的章节案例都分为案例描述、案例设计、案例代码和案例运行效果四部分内容，确保读者能够通过案例提升章节知识点和重难点的学习效果。

本教材共设计两个三级项目，一个项目是主题为“梦想从学习开始，事业从实践起步”的文化学习网站（PC端），网站一共分为八个栏目，分别是“中华文字”“中华诗词”“中华医药”“中华古籍”“中华人物”“中国党史”“中国美术”及“个人中心”。另一个项目是主题为“前端技术学习”的移动端项目。希望通过两个项目的设计与实现，使读者在掌握前端开发技术的同时，弘扬传统文化和社会主义核心价值观，激发读者的民族自信与爱国主义热情；在运用Vue.js框架技术的同时对读者进行思想引领、价值引领、道德引领及法制引领，全面提高读者的综合素质。

本教材PC端项目采用总-分-总的设计模式。先通过项目原型图预览项目，然后将整个项目进行拆分，根据项目所需知识技能点将项目分解到每一章的实践环节。实践环节设计了实践任务描述、实践任务实施步骤和实践任务运行效果3部分，由读者课下自主完成，进一步巩固课上所学知识技能，进而进一步提升读者的动手实践能力和项目开发能力。本教材移动端项目作为实战篇的综合项目，由项目介绍、项目开发前期准备和项目功能设计与开发三部分，提供部分接口数据和核心代码供读者参考。

本教材由大连东软信息学院姜敏、胡献宇、左妍、袁磊、肖凤纬和成都东软信息学院贾志东老师共同编写，全教材由姜敏教授负责统稿。编者不仅教学经验丰富，而且均具备多年讲授前端开发技术课程经验，具备使用HTML、CSS和JavaScript等技术进行实际项目开发经验，对Web页面开发技术均具有较丰富的实践经验和较深入的研究经历。

本教材虽经过编写团队教师多次集体讨论、修改、补充和完善，但疏漏和不足之处仍在所难免，敬请读者批评指正。

第一篇（上篇）知识篇

第1章Vue.js入门2

1.1初识Vue.js2

1.1.1什么是Vue.js2

1.1.2为什么要使用Vue.js3

1.1.3MVVM模式4

1.2使用Vue.js理解MVVM模式5

1.3章节案例7

1.4实践环节8

1.4.1实践任务描述8

1.4.2实践任务实施步骤9

1.4.3实践任务运行效果9

1.5本章小结9

1.6本章习题9

第2章第一个Vue.js应用10

2.1Vue.js的使用10

2.1.1Vue.js下载10

2.1.2使用CDN引入Vue.js11

2.1.3通过npm安装12

2.1.4开始使用Vue.js12

2.2实例及选项13

2.2.1模板（template）14

2.2.2数据（data）14

2.2.3方法（methods）15

2.2.4计算属性（computed）16

2.2.5观察/监听（watch）17

2.3数据绑定18

2.3.1插值18

2.3.2表达式绑定18

2.3.3双向数据绑定19

2.4生命周期20

2.5章节案例23

2.6实践环节24

2.6.1实践任务描述24

2.6.2实践任务实施步骤24

2.6.3实践任务运行效果25

2.7本章小结25

2.8本章习题25

第3章Vue.js指令27

3.1内容渲染指令27

3.1.1vtext和vhtml指令27

3.1.2vonce指令28

3.2条件渲染指令29

3.2.1vif和vshow的用法29

3.2.2vif和vshow的使用场景30

3.3事件绑定指令31

3.3.1von指令的用法31

3.3.2事件对象event33

3.3.3von指令修饰符35

3.4属性绑定指令36

3.4.1vbind指令基本用法36

3.4.2vbind绑定样式37

3.5列表渲染指令40

3.5.1vfor指令的基本用法40

3.5.2使用key维护列表的状态44

3.5.3数组更新51

3.6双向数据绑定指令57

3.6.1vmodel指令基本用法57

3.6.2用vfor动态渲染选项59

3.6.3绑定值60

3.6.4vmodel修饰符61

3.7章节案例61

3.8实践环节67

3.8.1实践任务描述67

3.8.2实践任务实施步骤67

3.8.3实践任务运行效果67

3.9本章小结68

3.10本章习题68

第4章计算属性和watch监听72

4.1计算属性computed72

4.1.1计算属性介绍及用法72

4.1.2计算属性传参75

4.1.3计算属性的getter和setter75

4.1.4计算属性与方法的区别77

4.2监听器watch78

4.2.1watch监听器的基本使用78

4.2.2watch监听器的高级使用81

4.2.3计算属性和监听器的区别84

4.3章节案例85

4.4实践环节87

4.4.1实践任务描述87

4.4.2实践任务实施步骤87

4.4.3实践任务运行效果87

4.5本章小结88

4.6本章习题88

第5章Vue.js组件90

5.1单页面应用程序和组件化开发90

5.1.1单页面应用程序90

5.1.2SPA的优缺点90

5.1.3快速创建Vue的SPA项目91

5.2组件化开发思想91

5.3组件的基本使用92

5.3.1全局组件92

5.3.2局部组件93

5.3.3组件内使用data93

5.3.4使用template元素创建组件94

5.3.5组件嵌套95

5.3.6使用props传递数据96

5.4组件通信104

5.4.1父组件向子组件传递数据104

5.4.2子组件向父组件传递数据107

5.4.3创建自定义组件110

5.5内容分发112

5.5.1单个slot112

5.5.2具名slot114

5.5.3作用域插槽119

5.6动态组件120

5.7章节案例125

5.8实践环节127

5.8.1实践任务描述127

5.8.2实践任务实施步骤127

5.8.3实践任务运行效果128

5.9本章小结129

5.10本章习题129

第6章Vue.js过渡和动画132

6.1过渡效果132

6.2CSS动画效果137

6.3JavaScript过渡138

6.4自定义过渡类名140

6.5章节案例142

6.6实践环节145

6.6.1实践任务描述145

6.6.2实践任务实施步骤145

6.6.3实践任务运行效果145

6.7本章小结146

6.8本章习题146

第二篇（中篇）进阶篇

第7章创建Vue的SPA项目149

7.1VueCLI简介149

7.2VueCLI安装149

7.3VueCLI创建项目151

7.3.1使用指令创建项目151

7.3.2使用图形界面创建项目153

7.4VueCLI项目结构153

7.5单文件组件157

7.5.1父组件向子组件传递数据157

7.5.2子组件向父组件传递数据158

7.6Webpack基础160

7.6.1Webpack的核心概念160

7.6.2Webpack工作原理及优缺点161

7.6.3VueCLI脚手架中Webpack配置基础162

7.6.4Webpack常用的loaders和插件164

7.7使用vite构建项目165

7.7.1Vite简介165

7.7.2Vite安装166

7.7.3初始化项目166

7.8章节案例167

7.9实践环节171

7.9.1实践任务描述171

7.9.2实践任务实施步骤171

7.9.3实践任务运行效果171

7.10本章小结172

7.11本章习题172

第8章Vue Router（前端路由)174

8.1简介174

8.2安装175

8.3在脚手架项目中使用路由175

8.4跳转方式178

8.5命名视图178

8.6编程式导航181

8.7动态路由183

8.8子路由186

8.9路由拦截188

8.10章节案例190

8.11实践环节202

8.11.1实践任务描述202

8.11.2实践任务实施步骤203

8.11.3实践任务运行效果203

8.12本章小结204

8.13本章习题204

第9章组合API205

9.1Vue3组合API205

9.2setup函数205

9.3使用setup语法糖208

9.3.1reactive208

9.3.2ref208

9.3.3Computed209

9.3.4watchEffect和watch210

9.4依赖注入211

9.4.1多层嵌套组件间通信211

9.4.2Provide（提供）212

9.4.3Inject（注入）213

9.4.4在后代组件中修改数据213

9.5章节案例216

9.6实践环节219

9.6.1实践任务描述219

9.6.2实践任务实施步骤220

9.6.3实践任务运行效果220

9.7本章小结221

9.8本章习题221

第10章服务器端数据访问axios222

10.1简介222

10.2安装222

10.3基本用法223

10.4请求本地JSON数据226

10.5GET请求227

10.6Mock.js228

10.7POST请求229

10.8axios API230

10.9axios实例231

10.10jsonserver232

10.10.1jsonserver概述232

10.10.2jsonserver下载与安装232

10.10.3jsonserver基本用法232

10.11章节案例235

10.12实践环节237

10.12.1实践任务描述237

10.12.2实践任务实施步骤237

10.12.3实践任务运行效果238

10.13本章小结238

10.14本章习题238

第11章Vuex240

11.1Vuex概述240

11.2Vuex的安装和使用241

11.2.1本地JavaScript文件或者CDN的方式241

11.2.2CLI手工方式242

11.2.3CLI和Vite自动方式243

11.3Vuex的核心概念243

11.3.1概述243

11.3.2state244

11.3.3getter245

11.3.4mutation245

11.3.5组合式API中使用Vuex247

11.3.6action249

11.4批量定义252

11.5modules254

11.6章节案例255

11.7实践环节264

11.7.1实践任务描述264

11.7.2实践任务实施步骤265

11.7.3实践任务运行效果265

11.8本章小结266

11.9本章习题266

第三篇（下篇）实战篇

第12章文化学习网站项目总结268

12.1项目描述268

12.2网站各栏目页及内容页参考效果268

12.2.1网站首页268

12.2.2中华文字栏目269

12.2.3中国党史栏目270

12.2.4中国党史内容页271

12.2.5中国党史知识竞答272

12.2.6中华古籍栏目273

12.2.7网站用户注册页面273

12.2.8个人中心页面274

12.3技术选型276

12.4前端路由276

第13章前端技术学习移动Web项目开发278

13.1项目介绍278

13.1.1项目信息278

13.1.2项目功能278

13.1.3任务分配279

13.2项目开发前期准备279

13.2.1通过Vuecli构建工具初始化项目目录279

13.2.2安装依赖包和插件280

13.2.3创建router对象及配置路由281

13.3项目功能设计与开发282

13.3.1首页282

13.3.2下拉刷新上拉加载更多284

13.3.3首页搜索287

13.3.4课程列表页288

13.3.5查看课程详情页290

13.3.6查看留言列表291

13.3.7查看留言详情并发布留言293

13.3.8注册登录界面294

13.3.9个人中心294

2016年6月，中国成为国际本科工程学位互认协议《华盛顿协议》的正式会员，这是中国工程教育国际化进程的重要里程碑。“回归工程”、培养学生的“大工程观”是当今国际工程教育的主流理念。《华盛顿协议》对毕业生提出的12条素质要求中，不仅要求工程知识、工程能力，还强调通用能力和品德伦理；在实践上，以学生为中心，以产出为导向，注重对目标达成的支撑及持续改进，与CDIO工程教育实质等效。

CDIO工程教育是近年来国际工程教育改革的最新成果，以“预期学习结果”集合来驱动课程内容、教学方法、教育文化的设计，重视营造工程教育文化，其注重工程能力培养和基于工程项目全生命周期的一体化设计思想，对于国内工程类和相关专业的建设具有重要的实施价值。

作为承载了教学改革思想的载体，融入CDIO工程教育理念的高品质教材，东软CDIO工程教育教材在注重理实结合的同时，也注重对学生八大能力的培养，即：技术知识与推理能力，开放式思维与创新，个人职业能力，沟通表达与团队合作，态度与习惯，责任，价值观，实践构思、设计、实现和运行对社会的贡献。

CDIO工程教育教材是 CDIO教育教学改革在教学实施过程中的集中体现，它不仅承载着课程和项目的教学内容，而且贯穿和体现了CDIO工程教育的理念、思想与方法，是在系统化理论的指导下，将知识、能力、素质培养进行一体化设计，有机融合在教材体系中。教材的编写以能力培养为主线，以案例教学为引导，以项目为载体，充分体现“做中学”和“学中做”的思想，具有以下优势：

（1）以能力培养为主线，培养学生专业知识学习能力和工程实践能力。

（2）以案例为驱动，在做案例的过程中学习新知识，充分体现了“做中学”。

（3）以项目为载体，基于工程化教育方法，按照分析、设计、实施、运行展开项目及知识点的讲解。

（4）围绕专业知识结构和能力体系设计教材，实现同一专业下不同教材紧密的关联性。

（5）内容编排循序渐进，符合人的认知规律。

（6）适应柔性化教学变革，构建一体化、立体化教学资源。

CDIO工程教育教材可供以应用型人才为培养目标的高等院校以及职业培训机构作为教材使用。

目前，CDIO工程教育教材的建设还处于探索阶段，是一项创造性的工作，尚需要通过改革的实践不断加以深化和持续改进，任重而道远。