谭志彬,北京大学无线电电子学系硕士毕业,曾在高科技企业从事办公自动化系统的开发应用,是国家计算机和通信专业技术资格考试标准的主要起或审定者,主持开发过考务管理系统、上机考试系统、阅卷系统。
面向职业院校和应用型本科院校开展1+X证书制度试点工作是落实《国家职业教育改革实施方案》的重要内容之一,为了便于X证书标准融入院校学历教育,教育与考试中心组织编写了《Web前端开发(高级)》教材。
本教材以《Web前端开发职业技能等级标准》(高级)为编写依据,分上、下两册,包括前端高效开发框架技术与应用、移动Web设计与开发、性能优化与自动化技术三篇,分别对应《Web前端开发职业技能等级标准》(高级)涉及的三门核心课程:“前端高效开发框架技术与应用”“移动Web设计与开发”“性能优化与自动化技术”。
《Web前端开发(高级 上册)》以模块化的结构组织各篇及其章节,以任务驱动的方式安排教材内容,选取移动Web典型应用作为教学案例。本教材可用于1+X证书制度试点工作中的Web前端开发职业技能等级证书教学和培训,也可以作为期望从事Web前端开发职业的应届毕业生和社会在职人员的自学参考用书。
第一章 Vue基础t2
1.1 Vue 框架概述t3
1.1.1 MVX模式简介t3
1.1.2 Vue框架简介t4
1.1.3 Vue.js的安装与使用t6
1.2 Vue基础语法t8
1.2.1 实例对象t8
1.2.2 生命周期t10
1.2.3 模板语法t14
1.2.4 计算属性t19
1.2.5 methods方法t21
1.3 Vue渲染t21
1.3.1 列表渲染t21
1.3.2 条件渲染t28
1.4 Vue事件与表单t32
1.4.1 事件处理t32
1.4.2 事件对象t36
1.4.3 事件委派t38
1.4.4 表单处理t39
1.5 Vue基础应用t43
1.6 本章小结t46
第2章 Vue组件t47
2.1 Vue 组件概述t48
2.1.1 组件简介t48
2.1.2 组件对象剖析t50
2.1.3 Vue组件的data属性t52
2.1.4 props传递数据t55
2.2 事件通信t59
2.2.1 父子组件事件通信t59
2.2.2 非父子组件事件通信t62
2.2.3 插槽t65
2.3 组件类型t73
2.3.1 自定义组件v-model
双向绑定t73
2.3.2 动态组件t75
2.3.3 递归组件t77
2.4 Vue组件应用t79
2.4.1 分页组件t79
2.4.2 购物车组件t80
2.5 本章小结t83
第3章 Vue工程化工具t84
3.1 搭建Node.js环境t85
3.1.1 Node.js简介t85
3.1.2 Node.js的下载与安装t85
3.1.3 npm的安装与使用t86
3.1.4 yarn的安装与使用t91
3.2 Vue CLI概述t92
3.2.1 Vue CLI简介t92
3.2.2 Vue CLI的使用t93
3.3 Vue CLI项目的配置t94
3.4 模块t98
3.4.1 CommonJS模块t100
3.4.2 ES6模块t101
3.5 vue-devtools调试工具t104
3.5.1 vue-devtools的下载
与安装t104
3.5.2 vue-devtools的使用t104
3.6 本章小结t104
第4章 Express服务器开发t106
4.1 Express概述t107
4.1.1 创建Express应用程序t107
4.1.2 Express路由t109
4.1.3 pug视图模板t114
4.2 请求与上传文件t116
4.2.1 GET请求和POST请求t116
4.2.2 上传文件t118
4.3 Session概述t121
4.3.1 Session简介t121
4.3.2 Session的使用t121
4.4 构建RESTful APIt122
4.5 Nodemon概述t125
4.6 本章小结t126
第5章 aos网络交互t128
5.1 aos的基本使用t129
5.1.1 aos简介t129
5.1.2 aos的使用t129
5.2 发送请求t130
5.2.1 发送GET请求t130
5.2.2 发送POST请求t131
5.3 aos跨域问题t132
5.4 aos网络交互应用t134
5.5 本章小结t136
第6章 Vue路由t138
6.1 SPA和vue-routert139
6.1.1 SPAt139
6.1.2 vue-routert139
6.2 路由的使用t141
6.2.1 定义路由t141
6.2.2 动态路由t142
6.2.3 路由参数t142
6.2.4 在路由组件中使用AJAXt143
6.3 路由导航t144
6.3.1 路由导航守卫t144
6.3.2 编程式路由导航t145
6.3.3 全局路由导航守卫t146
6.4 嵌套路由和命名路由视图t147
6.4.1 嵌套路由t147
6.4.2 命名路由视图t149
6.5 Vue路由应用t150
6.5.1 用户登录与校验t150
6.5.2 注销功能及存在的问题t152
6.6 本章小结t154
第7章 Vuex状态管理t156
7.1 Vuex状态管理概述t157
7.1.1 Vue组件共享数据的方式t157
7.1.2 Vuex的安装与使用t158
7.2 Vuex.Store对象的接口t159
7.2.1 Statet160
7.2.2 Getterst162
7.2.3 Mutationst163
7.2.4 Actionst165
7.3 Vuex多模块t167
7.4 Vuex插件t168
7.5 重新组织Vuex目录结构t168
7.6 本章小结t169
第8章 Vue UIt170
8.1 Vue UI概述t171
8.1.1 Vue UI简介t171
8.1.2 Element的安装与使用t171
8.2 Element UI组件库t173
8.3 第三方扩展库Expresst174
8.3.1 集成Express和Vuet174
8.3.2 配置Express和Vuet174
8.4 本章小结177
面向职业院校和应用型本科院校开展1+X证书制度试点工作是落实《国家职业教育改革实施方案》的重要内容之一,为了便于X证书标准融入院校学历教育,工业和信息化部教育与考试中心组织编写了《Web前端开发(高级)》教材。本教材以《Web前端开发职业技能等级标准》(高级)为编写依据,分上、下两册,包括前端高效开发框架技术与应用、移动Web设计与开发、性能优化与自动化技术三篇,分别对应《Web前端开发职业技能等级标准》(高级)涉及的三门核心课程:前端高效开发框架技术与应用移动Web设计与开发性能优化与自动化技术。本教材以模块化的结构组织各篇及其章节,以任务驱动的方式安排教材内容,选取移动Web典型应用作为教学案例。