VUE.JS从入门到项目实战

开发理论与编码实践结合，让你不仅学有所成，更能学以致用！系统：从点到面讲解，循序渐进，有条有理深入：以底层筑基实现上层运用，让你知其所以然实用：提供62个应用案例，以实践检验真理实战：4种常见类型网站实例，避免纸上谈兵免费提供配套源程序下载+精彩视频学习教程

本书从Vue框架的基础语法讲起，逐步深入Vue进阶实战，并在最后配合项目实战案例，重点演示了Vue在项目开发中的一些应用。在系统地讲解Vue的相关知识之余，本书力图使读者对Vue项目开发产生更深入的理解。本书共分为11章，涵盖的主要内容有前端的发展历程、Vue的基本介绍、Vue的语法、Vue中的选项、Vue中的内置组件、Vue项目化、使用Vue开发电商类网站、使用Vue开发企业官网、使用Vue开发移动端资讯类网站、使用Vue开发工具类网站。本书内容通俗易懂、案例丰富、实用性强，特别适合Vue的初学者和从业人员阅读，同时也适合职业生涯遇到“瓶颈”的前端从业人员和其他编程爱好者阅读。另外，本书也适合作为相关培训机构的教材。

刘汉伟，一线软件工程师，活跃于GitHub等开源社区，接触过许多优秀项目的代码，有丰富的专业知识和开发经验，曾负责并上线多个大型Web项目。2016年起开始在网上发表博客，短时间内各平台累计访问量超过10万人次，深受读者好评，并受邀成为CSDN专业讲师、腾讯云+社区专栏作者。

第一篇 概念篇——扎根于基础 第1章 引言 0021.1 前端技术的发展0021.1.1 从静态走向动态 0021.1.2 从后端走向前端 0031.1.3 从前端走向全端 0051.2 MVVM族员——Vue.js 0081.2.1 从MVC到MVVM 0081.2.2 Vue.js简介 0091.3 Vue与React 0101.3.1 虚拟DOM 0101.3.2 功能性组件 0111.3.3 轻量级——将与核心库无关的业务封装成独立库 0111.3.4 视图模板 0111.3.5 其他 0121.4 Vue与Angular 0131.4.1 模板语法 0131.4.2 脏检测 0131.4.3 双向数据绑定 0141.4.4 学习曲线 015第2章 基本介绍 0162.1 安装和引入0162.1.1 如何引入Vue.js 0162.1.2 安装Vue Devtools 0172.2 Vue实例介绍 0192.2.1 简单实例 0192.2.2 生命周期 020目录VIIIVue. js从入门到项目实战 2.3 数据响应式原理0242.3.1 初识数据链 0242.3.2 函数式编程 0252.3.3 Vue中的数据链 0262.3.4 数据绑定视图 028第3章 Vue语法 0303.1 插值绑定0303.1.1 文本插值 0303.1.2 HTML插值 0313.2 属性绑定0333.2.1 指令v-bind 0333.2.2 类名和样式绑定 0343.3 事件绑定0373.3.1 指令v-on 0373.3.2 常见修饰符 0393.3.3 按键修饰符 0413.3.4 组合修饰符 0423.4 双向绑定0443.4.1 指令v-model 0443.4.2 v-model与修饰符 0473.4.3 v-model与自定义组件 0483.5 条件渲染和列表渲染0503.5.1 指令v-if和v-show 0503.5.2 指令v-for 0533.5.3 列表渲染中的key 057第4章 Vue选项 0594.1 数据和方法0594.1.1 数据选项 059IX 目 录4.1.2 属性选项 0654.1.3 方法选项 0674.1.4 计算属性 0684.1.5 侦听属性 0724.2 DOM渲染 0744.2.1 指定被挂载元素 0744.2.2 视图的字符串模板 0754.2.3 渲染函数render 0764.2.4 选项的优先级 0834.3 封装复用0854.3.1 过滤器 0854.3.2 自定义指令 0864.3.3 组件的注册 0904.3.4 混入的使用 091第5章 Vue内置组件 0955.1 组件服务0955.1.1 动态组件 0955.1.2 使用插槽分发内容 0975.1.3 组件的缓存 1035.2 过渡效果1045.2.1 单节点的过渡 1045.2.2 多节点的过渡 113第6章 Vue项目化 1176.1 快速构建项目1176.1.1 Vue CLI简介 1176.1.2 使用Vue CLI构建项目 1186.1.3 项目目录介绍 1196.2 前端路由1236.2.1 前端路由的简单实现 1236.2.2 Vue中的前端路由 1276.3 状态管理1326.3.1 对象引用 1336.3.2 状态管理器Vuex 1336.3.3 在项目中使用Vuex 138 第二篇 实战篇 —— 提升于项目 第7章 打造线上商城（一） 1447.1 项目规划1447.1.1 需求分析 1447.1.2 流程分析 1467.2 项目展示1477.2.1 首页 1477.2.2 商品详情 1507.2.3 购物车 1517.2.4 订单 152第8章 打造线上商城（二） 1548.1 项目构建1548.1.1 目录结构 1548.1.2 webpack是什么？ 1558.1.3 Font Awesome图标库 1578.2 动态资源和数据1598.2.1 关于配置 1598.2.2 动态资源 1628.2.3 动态数据的存储 1638.3 自定义组件1648.3.1 幻灯片 1648.3.2 复选框 168第9章 企业官网的建设 1719.1 响应式设计1719.1.1 响应式设计 1719.1.2 媒体查询 1729.1.3 JS布局 1749.2 页面开发1759.2.1 页面切换 1759.2.2 Swiper组件 1769.2.3 划分内容区 1779.3 多语种网站的建设1799.3.1 将一切纳入配置 1809.3.2 将配置绑定到视图 183第10章 我的掌上新闻 18610.1 应用介绍18610.1.1 应用首屏 18610.1.2 应用首页 18710.1.3 新闻详情 18910.1.4 搜索页面 19010.1.5 搜索结果 19310.2 项目构建19310.2.1 项目结构 19310.2.2 数据流图 198第11章 SVG画图板 19911.1 SVG简介 19911.1.1 有关SVG的三个问题 19911.1.2 基本图形的使用 20111.1.3 SVG中的渐变 20211.2 项目介绍 20411.2.1 页面介绍 20411.2.2 代码简析 208 附录 拓 展 篇 附录A Git入门 218附录B NPM入门 221附录C Webpack入门 224附录D 闭包和对象引用 230附录E 常见的ECMAScript 6语法 233

    第1章 引 言早期的HTML作为静态文件，即使只有部分内容是需要变动的，那么有多少种变动的可能性，就需要准备多少份文档，这对开发者来说是非常不友好的，并且无法与用户进行交互。CGI（Common Gateway Interface）的出现改善了这一情况。CGI作为服务器拓展功能，可以从数据库或者文件系统获取数据，在将数据渲染为HTML文档后，返回至客户端，从而实现了网页的动态生成。在接收到用户请求后，CGI还可以在服务端进行处理，并返回对应的处理结果，如图1.2所示。图1.2 动态网页渲染流程CGI被广泛认为是服务端脚本语言的鼻祖。然而，它也有着非常致命的缺陷。首先，CGI每接收到一个请求，都会新开一个进程进行处理，占用服务器的CPU和内存，当请求量成千上万时，服务器可能无法支撑以致崩溃。其次，黑客很容易通过不完善的CGI程序非法进入开发者的服务器系统，这从安全方面来考虑是绝对不允许的。以后来人的角度来看，笔者认为CGI出现的优选意义就是给当时刚起步的Web提供了一个发展方向。在这之后，PHP、JSP、ASP等各种服务端语言层出不穷，不仅弥补了CGI的缺陷，而且在性能上愈加高效，在开发上愈加简捷。这些语言的出现和广泛应用，使得Web技术飞速发展，前端网页从此从静态走向动态，这个时代被称为Web 1.0时代。1.1.2 从后端走向前端在 Web 1.0 时代，前后端是如何协作的呢？由于网页是在服务端使用动态脚本语言和模板引擎渲染出来的，所以一般由前端先写模板，写好后交付给后端套用，之后再由前后端联调，以确认模板套用无误。在这种开发环境下，前后端耦合密切，项目开发需要很高的沟通成本。在模板引擎的变量、判断和循环、宏区块等语法糖的支持下，前端也可以拿到环境变量来实现部分004Vue. js从入门到项目实战 业务逻辑。如果前端开发者表现得稍微弱势一些，就很有可能被后台摁着在视图层实现一些业务代码。同时，整个项目的代码质量也随之降低。网站的这种组织架构还会带来另外一些问题。比如，页面哪怕仅有一小块内容需要变更，浏览器也需要重新请求和渲染整个页面。一方面，网站资源的传输耗费了更多的时间；另一方面，页面重载的用户体验也十分糟糕。举个例子，用户在登录页面输入了错误密码时，服务器要将校验信息渲染到页面并传给浏览器。实际上，页面只是多了一行类似于“密码错误”的提示，然而网站资源却需要重新进行传输，同时页面还会丢失用户输入的表单数据（即便到了今天，这种现象依然可以在一些政府和国企的老旧网站中看到）。当时虽然出现了各种页面和数据的缓存技术，稍有成效地缓解了这一问题，但也无法从根本上解决问题。于是，从事Web的前辈们开始探寻其他一些解决方案，如Ajax异步数据加载。Ajax（Asynchronous JavaScript And XML，异步JavaScript和XML）通过XMLHttpRequest 对象，可以在不重载页面的情况下与Web服务器交换数据，再加上JavaScript的document对象，开发者们可以很轻松地实现页面局部内容刷新。从1999年开始，ActiveX和XMLHttpRequest陆续问世，Ajax的星星之火渐渐燃起。时间推移到2005年，互联网巨头Google发布了全面使用Ajax打造的Gmail（如图1.3所示）和Gmap两款应用。人们惊讶地发现，原来使用异步数据传输获得的应用体验是如此地良好。自此，Ajax获得了井喷式的发展。