本书是一本介绍Web前端开发框架Vue.js的实战教程，主要满足高等职业教育软件技术专业Web前端开发方向课程的教学需要。全书从一个完整实战项目中抽取出小任务，每单元以小任务的完成为主线，介绍Vue.js前端开发的各项知识，包括开发与调试环境准备，ECMAScript6语法简介及常见的对象、函数、数组、字符串等扩展语法，Vue.js语法、指令、条件渲染、循环渲染、计算属性、方法属性、侦听器、Class与Style绑定、表单双向绑定、组件、虚拟DOM；了解render函数、过滤器、路由、过渡、动画、混入使用Axios与服务器通信、使用Vuex进行全局状态管理、部署Vue项目等，最后从小任务的整合到整个项目的完成形成一个综合性案例。本书由学校教师和企业软件开发工程师合作共同编写，教学案例来源于企业真实项目。本教材体系完整，内容丰富，配套资源齐全，注重实践性和可操作性，既可作为高等职业教育计算机类专业学生的学习用书，也可作为软件开发人员能力提升的自学参考用书。

本书系重庆工商职业学院首批国家级职业教育教师教学创新团队联合四川华迪信息技术有限公司、四川川大智胜股份有限公司、成都思晗科技股份有限公司编写的基于工作过程系统化的软件技术专业Web前端开发方向“活页式”“工作手册式”教材之一。 依托数字工场和省级“双师型”教师培养培训基地，由创新团队成员和企业工程师组成教材编写团队，目的是打造高素质“双师型”教师队伍，深化职业院校教师、教材、教法“三教”改革，探索产教融合、校企“双元”有效育人模式。教材编写的初衷是让软件技术专业Web前端开发方向学生掌握Web前端开发核心技术，提高他们的Web前端开发技能，为进入Web前端开发工作或继续深造奠定基础。同时让软件技术专业学生掌握一定的Web前端开发技术，支撑软件技术专业发展，拓展软件技术专业学生的就业范围。 教材体系与特色 本书属于重庆工商职业学院联合企业共同开发的面向高等职业教育的“软件技术专业Web前端开发方向教材体系”中的一本，其特色如下： 1. 组织结构合理，内容由浅入深。为了更好地帮助读者学习Vue.js框架，本书设计了大量案例来介绍Vue.js框架的基本操作方法和技术。 2. 针对性强。本书的教学内容和结构着眼于Web前端开发的能力培养，适应时代的要求，符合应用型院校人才培养的需要。 3. 贴合实际。本书案例取自企业一线，符合高等职业学校软件技术专业教学标准的专业核心课程主要教学内容，对接岗位要求，具有较强的实践价值。 4. 可操作性强。本书项目的编写体例，针对每个项目案例，提供详细的解决方案和操作步骤，将知识点融入项目开发过程中，书中每一个项目案例都经过反复演练使用，读者可根据步骤独立操作。 5. 教学资源丰富。本书提供课件、软件操作录屏、微课等教辅资料，使教和学更加容易。 受众定位 本书适用于应用型本科、职业本科、高职高专软件技术Web前端开发方向及软件技术专业等相关专业，也可作为Web前端开发人员提升技能和阅读的教材。 教材基本概况 本书围绕Vue.js框架及相关技术进行介绍，分为导言和5个单元。 导言：介绍了本课程的性质与背景、工作任务、学习目标、课程核心内容、重点技术、学习方法等。单元1：介绍了Vue项目构建。单元2：介绍了Vue网页设计。单元3：介绍了Vue组件化开发。单元4：介绍了网页交互与数据通信。单元5：介绍了Vue项目打包部署。全书以实用为基础，从一个完整实战项目中抽取出小任务，每单元以小任务的完成为主线，介绍Vue.js前端开发的各项知识，包括开发与调试环境准备，ECMAScript6语法简介及常见的对象、函数、数组、字符串等扩展语法，Vue.js语法、指令、条件渲染、循环渲染、计算属性、方法属性、侦听器、Class与Style绑定、表单双向绑定、组件、虚拟DOM；了解render函数、过滤器、路由、过渡、动画，混入使用Axios与服务器通信，使用Vuex进行全局状态管理，部署Vue项目等，最后从小任务的整合到整个项目的完成形成一个综合性案例。 编写团队 本书由方选政（重庆工商职业学院骨干教师，高级软件开发工程师，重庆市高等职业院校学生职业技能竞赛优秀指导教师）、陶建兵（企业人工智能高级工程师，具有丰富的项目开发经验）担任主编，方选政负责单元2的编写工作，陶建兵负责单元3的编写工作。 本书副主编具有丰富的人工智能教学实践经验或者?5?年以上的软件开发企业工作经验，具体编写分工如下：导言由成都思晗科技股份有限公司曹旻涵编写，单元1由重庆工商职业学院唐慧编写，单元4由重庆工商职业学院李麒骥编写，单元5由四川华迪信息技术有限公司李维编写。 本书在编写过程中得到重庆工商职业学院和四川华迪信息技术有限公司相关领导和同事的大力支持和帮助，在此表示感谢。由于编者水平有限，教材中难免存在不妥之处，敬请广大读者批评指正。 编 者 2021年11月

导言 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