本书以Vue.js 2为基础，以项目实战的方式引导读者渐进式学习Vue.js框架。本书分为项目起步、Vue.js介绍、项目插件、项目梳理等部分。“项目起步”主要是对大觅项目架构设计以及项目中使用的ECMAScript6内容进行介绍，“Vue.js介绍”主要是讲解Vue.js框架的核心功能，“项目插件”主要是介绍Vuex、百度地图以及生成二维码插件的使用，“项目梳理”则梳理大觅项目每一个页面的技能点并且分析页面的实现思路。经过项目实战之后，读者可以掌握工程化的前端开发方法，Vue.js框架主要API的使用方法、单文件组件、组件通信、Axios等。
本书示例丰富，侧重实战，适合刚接触或即将接触Vue.js的开发者，也适合有Vue.js开发经验但还需进一步提升的开发者。

肖睿任职于北大课工场。北大课工场是专注互联网教育的生态平台，针对行业的快速变化，建设并维护了中国和北美的327人一线大咖团队，由他们直接参与课程研发和提供授课服务。大咖团队不乏来自BAT等国内知名互联网技术公司的技术专家、技术大牛、CTO和CEO，其中绝大部分拥有超过10年的技术研发实战经验，这样可以让学员拿到互联网一线企业项目进行实战化练习，真正起到“名师出高徒”的传帮带效应。同时课工场也为高校、企业、行业提供教育技术赋能，依托Transform只能教育生态平台，打造智慧校园、企业大学、行业培训的教育场景，提供一站式教育解决方案。

本书以Vue.js 2为起点，通过实战项目引导读者学习Vue.js框架。书中详细介绍了大觅项目的架构设计和ECMAScript6的应用，讲解了Vue.js框架的核心功能，并介绍了Vuex、百度地图等插件的使用。此外，还梳理了大觅项目每个页面的技能点，分析了实现思路，帮助读者掌握前端开发方法和Vue.js API。全书示例丰富，适合不同层次的Vue.js开发者。



内容提要

《Web全栈工程师系列》编委会的成员名单，包括主任肖睿，副主任潘贞玉和王玉伟，以及众多委员如张惠军、孙苹、李娜等。名单展现了编委会的组成，成员涵盖了不同领域的专业人才。



Web全栈工程师系列编委会

智慧教材，这是一种结合互联网技术的教材，能提供丰富的教学资源和及时的服务反馈。用户可通过下载课工场App，扫描二维码获取教材资源，还有专属的扩展资源可以定制。无论是普通读者还是高校老师，都能通过不同的方式获取到开发工具、示例素材、上机练习、作业答案等，极大地便利了学习过程。



智慧教材使用方法

大觅项目是一个专注于票务销售的网站，流程包括项目首页、详情页和选座页，用户可以在此选座订购门票。业务分析详细说明了登录页和注册页的功能，包括登录方式和验证规则。项目业务流程涵盖从首页到支付页的整个过程。

在环境搭建方面，我们介绍了Node.js和NPM的安装与配置，以及如何使用Vue-cli脚手架快速搭建项目。前端架构设计方面，我们强调了分层架构和模块化的重要性，并推荐使用Visual Studio Code作为开发工具。

对于UI框架的选择，我们讨论了选择标准，并推荐使用iView框架。安装iView框架有两种方式：CDN引入和NPM安装。鉴于项目使用Vue-cli脚手架，我们推荐使用NPM安装。通过命令`cnpm install iview --save`，可以将iView添加到`package.json`文件的`dependencies`下。

iView框架支持一次性引入和按需引入。一次性引入会引入所有组件，可能导致文件体积过大；按需引入则只引入所需组件，虽然管理起来较为繁琐，但能更有效地控制文件大小。

此外，我们介绍了Webpack构建工具的优势，如解决依赖问题、性能优化和效率提升等。Webpack可以将多种静态资源打包成单个文件，减少页面请求，提高开发效率。通过安装相应的插件和配置webpack.config.js文件，我们可以更方便地进行Webpack的配置和使用。

第1章 大觅项目架构设计

ES6引入了let和const两个重要特性，分别用于声明变量和只读常量。let命令限定了变量的作用域，只在声明代码块内有效，避免了var命令的变量提升和作用域泄露问题。而const命令声明的是只读的常量，其值一旦被设定便不能更改。此外，ES6的解构赋值功能简化了从数组和对象中提取值的过程，直接赋值给变量，提升了代码的简洁性。

箭头函数的引入为JavaScript提供了更简洁的语法，并解决了this指向问题，但它在某些场景下可能受到限制。Map数据结构作为新型数据结构，支持任意类型的键值对，其丰富的API如set、get、has、delete等，使得键值对的管理变得方便。Map还支持遍历，提供了keys、values、entries和forEach等方法，方便开发者遍历Map中的元素。

在ES6模块化设计中，Map发挥着重要作用，用于管理模块间的依赖关系。ES6模块的语法包括export和import命令，以及export default命令，它们使得模块间的变量和方法共享更加便捷。

Promise对象是ES6提供的一种用于处理异步操作的解决方案，它可以避免回调地狱，使代码更加简洁易读。通过Promise，开发者可以更轻松地处理复杂的异步逻辑，提高代码的可读性和可维护性。

第2章 大觅项目中ES6的使用

前端路由的概念，它指的是通过JavaScript在前端完成页面跳转，而不是通过服务器端的处理。这种做法特别适合单页面应用，因为它可以在不刷新页面的情况下展示不同的内容。前端路由利用HTML5的history API或hash来实现，其中hash模式更兼容旧版浏览器。文章详细讲解了Vue Router的基本使用，包括安装、配置路由器模块、启动路由器、设置重定向、实现路由懒加载等。此外，还介绍了<router-link>组件用于实现页面间的导航，以及如何使用router.push、router.replace、router.go等方法进行页面跳转。



第3章 大觅项目的路由配置

Vue.js，一个轻量级且易于渐进式应用的JavaScript框架，让Web开发变得更加简便。它具备解耦视图与数据、组件可复用性、前端路由、状态管理和虚拟DOM等功能，适用于各类规模的应用。基于MVVM模式，Vue.js将数据、视图和业务逻辑分离，显著提升代码的可维护性和重用性。该框架支持单文件组件，将HTML、CSS和JavaScript代码封装在一个文件中，便于开发和利用。通过插值表达式和生命周期钩子函数，开发者可以灵活处理数据和视图，实现丰富的交互效果。

在Vue中，类和样式的绑定有多种灵活的用法。首先，可以单独绑定一个类，也可以同时应用多个类，这通过数组语法实现。接着，通过计算属性可以简化复杂的类绑定逻辑。此外，内联样式的绑定也有多种方式，包括使用对象语法和数组语法。在data中管理样式，可以使代码更加清晰易读，易于维护。值得一提的是，Vue在绑定特殊CSS属性时，会自动添加相应的前缀。

类绑定方面，Vue允许开发者绑定单个或多个类。通过数组语法，开发者可以一次性应用多个类，大大简化了样式绑定过程。例如，`<div :class="[activeClass, errorClass]"></div>`，这里的`activeClass`和`errorClass`都是类名，它们会被应用到相应的元素上。

计算属性是Vue中处理复杂类绑定逻辑的强大工具。通过计算属性，可以将复杂的逻辑封装起来，简化模板中的表达式。例如，`<div :class="classObject"></div>`，这里的`classObject`是一个计算属性，它返回一个对象，对象的属性值决定了哪些类会被应用到元素上。

内联样式的绑定也非常灵活。Vue支持使用对象语法和数组语法来绑定内联样式。对象语法允许绑定多个样式，如`<div :style="{ color: color, fontSize: fontSize + 'px' }"></div>`。数组语法则可以绑定多个样式，如`<div :style="[style1, style2]"></div>`。

在data中管理样式，可以使代码更加清晰易读。例如，可以将样式封装在一个对象中，然后通过计算属性或方法来返回这个对象。这样，当样式发生变化时，只需要修改data中的对象，而不需要修改模板中的绑定表达式。

Vue在绑定特殊CSS属性时，会自动添加相应的前缀。这大大简化了开发者的工作，避免了手动处理浏览器兼容性问题。例如，在绑定`transform`属性时，Vue会自动添加浏览器前缀，如`-webkit-transform`、`-moz-transform`等。

总之，Vue.js在类和样式的绑定方面提供了丰富的功能，使得开发者可以更加灵活地处理样式和类。通过合理运用这些功能，可以编写出更加优雅、易于维护的代码。

第4章 初识Vue.js

connect-mock-middleware是一款功能强大的mock模拟工具，支持多种数据格式，包括mockJs语法、json和jsonp。它允许开发者在不重新加载的情况下修改mock数据。通过配置文件中的proxyTable，可以在本地启动一个固定的服务地址。

Mock.js遵循特定的语法规范，包括数据模板定义和数据占位符定义，使得开发者能够轻松生成各类模拟数据。Axios是一个基于Promise的HTTP客户端，具备拦截请求和响应、转换数据等特性，并提供了丰富的请求方法，如get和post。在开发过程中，可以封装请求方法，以便进行通用配置。

Axios在开发中的应用涵盖了请求参数的设置，如timeout和headers，以及返回结果的处理。同时，介绍了拦截器的使用方法，包括请求拦截和返回拦截，用于在请求或响应前后对数据进行处理。此外，还提供了实际操作示例，指导读者如何使用Axios的get方法获取数据并在页面上展示。

简而言之，connect-mock-middleware和Mock.js为开发者提供了便捷的mock数据生成功能，而Axios则提供了强大的HTTP客户端支持，使得数据请求和响应处理更加高效。这两者的结合，使得开发过程更加流畅。

第5章 大觅项目中与服务端通信

Vue.js框架中的条件渲染指令，包括v-if、v-else和v-show，这些指令在开发过程中应用广泛，类似于JavaScript中的条件语句，可以根据表达式的真假来动态地渲染、销毁元素或组件。v-if指令用于条件渲染，根据表达式真假显示或隐藏元素；v-else指令为v-if添加了else块，在v-if不成立时显示；v-show指令通过切换元素的CSS属性display来控制显示与隐藏。此外，还介绍了v-for指令，用于遍历数组或对象渲染列表，并通过示例代码展示了如何使用这些指令。最后，还讨论了v-if和v-show的选择，以及v-model指令与表单的双向绑定。



第6章 Vue.js指令

在软件开发中，组件的应用凸显了模块化和复用性的重要性。组件能够将代码分解成可复用的单元，简化开发流程，提升效率。组件间通过props实现数据传递，实现通信。不仅如此，子组件还能通过自定义事件向父组件传递数据，通信方式并非单一。slot的引入，允许组件内使用不同内容，适应各种使用场景，显著提升了代码的可维护性和可扩展性。

在Vue中，具名slot的使用确保内容被放置到组件的指定位置。命名机制类似于计算机主板上的插槽，每种插槽对应特定功能，不能随意替换。例如，名为"CPU"的slot会接收与CPU相关的信息，如Intel Core i7。这种精确控制组件内部内容布局和显示的方式，为开发者提供了便利。

此外，通过父子组件传值实现数量控制器功能，包括增加和减少数量的按钮，使页面上的数量根据用户操作动态变化。

第7章 组件详解

计算属性的概念和用法，它能够简化复杂逻辑，并提高代码的可维护性。通过一个字符串倒序显示的例子，我们可以看到计算属性如何将逻辑复杂的代码分离出来，使代码更加简洁易读。计算属性还可以依赖多个数据源，当数据变化时自动更新，非常适合处理购物车总价等动态计算的需求。与methods相比，计算属性具有缓存机制，只有在依赖数据变化时才会重新计算，减少了不必要的计算开销。此外，还介绍了侦听器的作用，它能够更灵活地响应数据变化，尤其适用于需要执行异步操作的场景。通过计算属性和侦听器的对比，我们可以更好地理解它们的适用场景和区别。



第8章 计算属性和侦听器

百度地图JavaScript API，它是一套强大的地图应用开发工具，支持PC端和移动端，还能配合HTML5使用。API使用简单，免费开放，且无使用次数限制。但自v1.5版本起，需要申请密钥（ak）才能使用。文章详细介绍了如何申请密钥、引入地图插件以及开发地图组件的步骤，并附有示例代码，让读者能够轻松上手。此外，文章还提到了如何使用Vuex进行状态管理，以及如何使用QRCode插件生成二维码。通过学习这些内容，读者可以掌握如何在实际项目中应用这些技术。



Vue企业开发实战