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

第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 时代,前后端是如何协作的呢?由于网页是在服务端使用动态脚本语言
和模板引擎渲染出来的,所以一般由前端先写模板,写好后交付给后端套用,之后再由
前后端联调,以确认模板套用无误。

在这种开发环境下,前后端耦合密切,项目开发需要很高的沟通成本。在模板引擎
的变量、判断和循环、宏区块等语法糖的支持下,前端也可以拿到环境变量来实现部分



004

Vue. 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获得了井喷式的发展。

**篇 概念篇——扎根于基础 第1章 引言 002 1.1 前端技术的发展002 1.1.1 从静态走向动态 002 1.1.2 从后端走向前端 003 1.1.3 从前端走向全端 005 1.2 MVVM族员——Vue.js 008 1.2.1 从MVC到MVVM 008 1.2.2 Vue.js简介 009 1.3 Vue与React 010 1.3.1 虚拟DOM 010 1.3.2 功能性组件 011 1.3.3 轻量级——将与核心库无关的业务封装成独立库 011 1.3.4 视图模板 011 1.3.5 其他 012 1.4 Vue与Angular 013 1.4.1 模板语法 013 1.4.2 脏检测 013 1.4.3 双向数据绑定 014 1.4.4 学习曲线 015 第2章 基本介绍 016 2.1 安装和引入016 2.1.1 如何引入Vue.js 016 2.1.2 安装Vue Devtools 017 2.2 Vue实例介绍 019 2.2.1 简单实例 019 2.2.2 生命周期 020 目录 VIII Vue. js从入门到项目实战 2.3 数据响应式原理024 2.3.1 初识数据链 024 2.3.2 函数式编程 025 2.3.3 Vue中的数据链 026 2.3.4 数据绑定视图 028 第3章 Vue语法 030 3.1 插值绑定030 3.1.1 文本插值 030 3.1.2 HTML插值 031 3.2 属性绑定033 3.2.1 指令v-bind 033 3.2.2 类名和样式绑定 034 3.3 事件绑定037 3.3.1 指令v-on 037 3.3.2 常见修饰符 039 3.3.3 按键修饰符 041 3.3.4 组合修饰符 042 3.4 双向绑定044 3.4.1 指令v-model 044 3.4.2 v-model与修饰符 047 3.4.3 v-model与自定义组件 048 3.5 条件渲染和列表渲染050 3.5.1 指令v-if和v-show 050 3.5.2 指令v-for 053 3.5.3 列表渲染中的key 057 第4章 Vue选项 059 4.1 数据和方法059 4.1.1 数据选项 059 IX 目 录 4.1.2 属性选项 065 4.1.3 方法选项 067 4.1.4 计算属性 068 4.1.5 侦听属性 072 4.2 DOM渲染 074 4.2.1 指定被挂载元素 074 4.2.2 视图的字符串模板 075 4.2.3 渲染函数render 076 4.2.4 选项的优先级 083 4.3 封装复用085 4.3.1 过滤器 085 4.3.2 自定义指令 086 4.3.3 组件的注册 090 4.3.4 混入的使用 091 第5章 Vue内置组件 095 5.1 组件服务095 5.1.1 动态组件 095 5.1.2 使用插槽分发内容 097 5.1.3 组件的缓存 103 5.2 过渡效果104 5.2.1 单节点的过渡 104 5.2.2 多节点的过渡 113 第6章 Vue项目化 117 6.1 快速构建项目117 6.1.1 Vue CLI简介 117 6.1.2 使用Vue CLI构建项目 118 6.1.3 项目目录介绍 119 6.2 前端路由123 6.2.1 前端路由的简单实现 123 6.2.2 Vue中的前端路由 127 6.3 状态管理132 6.3.1 对象引用 133 6.3.2 状态管理器Vuex 133 6.3.3 在项目中使用Vuex 138 第二篇 实战篇 —— 提升于项目 第7章 打造线上商城(一) 144 7.1 项目规划144 7.1.1 需求分析 144 7.1.2 流程分析 146 7.2 项目展示147 7.2.1 首页 147 7.2.2 商品详情 150 7.2.3 购物车 151 7.2.4 订单 152 第8章 打造线上商城(二) 154 8.1 项目构建154 8.1.1 目录结构 154 8.1.2 webpack是什么? 155 8.1.3 Font Awesome图标库 157 8.2 动态资源和数据159 8.2.1 关于配置 159 8.2.2 动态资源 162 8.2.3 动态数据的存储 163 8.3 自定义组件164 8.3.1 幻灯片 164 8.3.2 复选框 168 第9章 企业官网的建设 171 9.1 响应式设计171 9.1.1 响应式设计 171 9.1.2 媒体查询 172 9.1.3 JS布局 174 9.2 页面开发175 9.2.1 页面切换 175 9.2.2 Swiper组件 176 9.2.3 划分内容区 177 9.3 多语种网站的建设179 9.3.1 将一切纳入配置 180 9.3.2 将配置绑定到视图 183 第10章 我的掌上新闻 186 10.1 应用介绍186 10.1.1 应用首屏 186 10.1.2 应用首页 187 10.1.3 新闻详情 189 10.1.4 搜索页面 190 10.1.5 搜索结果 193 10.2 项目构建193 10.2.1 项目结构 193 10.2.2 数据流图 198 第11章 SVG画图板 199 11.1 SVG简介 199 11.1.1 有关SVG的三个问题 199 11.1.2 基本图形的使用 201 11.1.3 SVG中的渐变 202 11.2 项目介绍 204 11.2.1 页面介绍 204 11.2.2 代码简析 208 附录 拓 展 篇 附录A Git入门 218 附录B NPM入门 221 附录C Webpack入门 224 附录D 闭包和对象引用 230 附录E 常见的ECMAScript 6语法 233