本书是一本介绍Web前端开发框架Vue.js的实战教程,主要满足高等职业教育软件技术专业Web前端开发方向课程的教学需要。全书从一个完整实战项目中抽取出小任务,每单元以小任务的完成为主线,介绍Vue.js前端开发的各项知识,包括开发与调试环境准备,ECMAScript6语法简介及常见的对象、函数、数组、字符串等扩展语法,Vue.js语法、指令、条件渲染、循环渲染、计算属性、方法属性、侦听器、Class与Style绑定、表单双向绑定、组件、虚拟DOM;了解render函数、过滤器、路由、过渡、动画、混入使用Axios与服务器通信、使用Vuex进行全局状态管理、部署Vue项目等,最后从小任务的整合到整个项目的完成形成一个综合性案例。本书由学校教师和企业软件开发工程师合作共同编写,教学案例来源于企业真实项目。本教材体系完整,内容丰富,配套资源齐全,注重实践性和可操作性,既可作为高等职业教育计算机类专业学生的学习用书,也可作为软件开发人员能力提升的自学参考用书。
方选政,1981,讲师,重庆奉节人。2006年6月参加工作,先后在重庆正大软件职业学院任教、重庆华日软件股份有限公司任软件开发工程师。于2014年重庆大学取得软件工程硕士学位,现在重庆开放大学电子信息工程学院从事教学及科研工作,主要研究范围包括大数据、人工智能及算法分析与设计。
导言 1
单元1 Vue项目构建 6
学习情境1.1 使用Vue.js完成网页设计 6
1.1.1 Vue简介 9
1.1.2 Vue安装 12
1.1.3 Vue声明式渲染 13
学习情境1.2 使用Vue init构建Vue 2.x项目 23
1.2.1 Vue CLI 26
1.2.2 Node.js 27
1.2.3 Vue init 30
学习情境1.3 使用Vue create构建Vue 2.x项目 42
学习情境1.4 使用Vue ui构建Vue 3.x项目 55
单元2 Vue网页设计 72
学习情境2.1 使用v-model构建智慧医养注册页面 72
2.1.1 模板语法 75
2.1.2 表单输入绑定 81
2.1.3 基本指令 89
2.1.4 事件绑定 94
2.1.5 侦听器 99
学习情境2.2 使用渲染指令构建智慧医养首页 114
2.2.1 Class与Style绑定 116
2.2.2 过渡&动画 119
学习情境2.3 使用computed计算健康设备购物车数据 139
2.3.1 计算属性 141
2.3.2 过滤器 145
单元3 Vue组件化开发 159
学习情境3.1 智慧医养首页Banner组件化开发 159
3.1.1 组件注册 162
3.1.2 Prop 165
3.1.3 监听子组件事件 166
3.1.4 插槽 167
学习情境3.2 使用Vue Router组件化开发智慧医养导航 179
3.2.1 Vue Router安装 181
3.2.2 路由的定义与使用 182
3.2.3 路由元信息和编程式导航 188
单元4 网页交互与数据通信 197
学习情境4.1 使用Vue-Resource完成智慧医养用户注册 197
学习情境4.2 使用Axios实时展示智慧医养首页数据 209
单元5 Vue项目打包部署 224
学习情境 Vue项目打包与部署 224
5.1.1 Vue项目打包 226
5.1.2 服务器 227