Vue.js实战 下载 pdf 百度网盘 epub 免费 2025 电子书 mobi 在线

本书以Vue.js 2为基础，以项目实战的方式来引导读者渐进式学习Vue.js。本书分为基础篇、进阶篇和实战篇三部分。基础篇主要是对 Vue.js 核心功能的介绍；进阶篇主要讲解前端工程化Vue.js的组件化、插件的使用；实战篇着重开发了两个完整的示例，所涉及的内容涵盖Vue.js绝大部分API。通过阅读本书，读者能够掌握Vue.js框架主要API的使用方法、自定义指令、组件开发、单文件组件、Render函数、使用webpack开发可复用的单页面富应用等。

本书示例丰富、侧重实战，适用于刚接触或即将接触Vue.js的开发者，也适用于对Vue.js有过开发经验，但需要进一步提升的开发者。

目    录

第1篇  基础篇

第1章  初识Vue.js      3

1.1 

Vue.js是什么         3

1.1.1 

MVVM模式         3

1.1.2 

Vue.js有什么不同      4

1.2  如何使用Vue.js     5

1.2.1 

传统的前端开发模式         5

1.2.2 

Vue.js的开发模式      5

第2章  数据绑定和个Vue应用          8

2.1 

Vue实例与数据绑定    9

2.1.1 

实例与数据         9

2.1.2 

生命周期    10

2.1.3 

插值与表达式    11

2.1.4 

过滤器         13

2.2  指令与事件   15

2.3  语法糖   18

第3章  计算属性          19

3.1  什么是计算属性   19

3.2  计算属性用法        20

3.3  计算属性缓存        23

第4章  v-bind及class与style绑定   25

4.1  了解v-bind指令    25

4.2  绑定class的几种方式 26

4.2.1 

对象语法    26

4.2.2 

数组语法    27

4.2.3 

在组件上使用    29

4.3  绑定内联样式        30

第5章  内置指令          32

5.1  基本指令        32

5.1.1 

v-cloak 32

5.1.2 

v-once 33

5.2  条件渲染指令        33

5.2.1 

v-if、v-else-if、v-else 33

5.2.2 

v-show          36

5.2.3 

v-if与v-show的选择 36

5.3  列表渲染指令v-for        37

5.3.1 

基本用法    37

5.3.2 

数组更新    41

5.3.3 

过滤与排序         43

5.4  方法与事件   44

5.4.1 

基本用法    44

5.4.2 

修饰符         46

5.5  实战：利用计算属性、指令等知识开发购物车        47

第6章  表单与v-model        55

6.1  基本用法        55

6.2  绑定值   61

6.3  修饰符   63

第7章  组件详解          65

7.1  组件与复用   65

7.1.1 

为什么使用组件         65

7.1.2 

组件用法    66

7.2  使用props传递数据     70

7.2.1 

基本用法    70

7.2.2 

单向数据流         72

7.2.3 

数据验证    74

7.3  组件通信        75

7.3.1 

自定义事件         75

7.3.2 

使用v-model       77

7.3.3 

非父子组件通信         79

7.4  使用slot分发内容        83

7.4.1 

什么是slot 83

7.4.2 

作用域         84

7.4.3 

slot用法      85

7.4.4 

作用域插槽         87

7.4.5 

访问slot      89

7.5  组件高级用法        90

7.5.1 

递归组件    90

7.5.2 

内联模板    92

7.5.3 

动态组件    93

7.5.4 

异步组件    94

7.6  其他        95

7.6.1 

$nextTick     95

7.6.2 

X-Templates         96

7.6.3 

手动挂载实例    97

7.7  实战：两个常用组件的开发        98

7.7.1 

开发一个数字输入框组件         98

7.7.2 

开发一个标签页组件         106

第8章  自定义指令     118

8.1  基本用法        118

8.2  实战        121

8.2.1 

开发一个可从外部关闭的下拉菜单         121

8.2.2 

开发一个实时时间转换指令v-time 126

第2篇  进阶篇

第9章  Render函数    133

9.1  什么是Virtual

Dom        133

9.2  什么是Render函数      136

9.3 

createElement用法       140

9.3.1 

基本参数    140

9.3.2 

约束    143

9.3.3 

使用JavaScript代替模板功能  147

9.4  函数化组件   153

9.5 

JSX  157

9.6  实战：使用Render函数开发可排序的表格组件      159

9.7  实战：留言列表   172

9.8  总结        183

第10章  使用webpack        184

10.1 

前端工程化与webpack       184

10.2 

webpack基础配置       187

10.2.1 

安装webpack与webpack-dev-server     187

10.2.2 

就是一个js文件而已      188

10.2.3 

逐步完善配置文件  191

10.3 

单文件组件与vue-loader   194

10.4 

用于生产环境      201

第11章  插件       206

11.1 

前端路由与vue-router        207

11.1.1 

什么是前端路由       207

11.1.2 

vue-router基本用法         208

11.1.3 

跳转  212

11.1.4 

高级用法  213

11.2 

状态管理与Vuex         216

11.2.1 

状态管理与使用场景       216

11.2.2 

Vuex基本用法 217

11.2.3 

高级用法  221

11.3 

实战：中央事件总线插件vue-bus    227

第3篇  实战篇

第12章  iView经典组件剖析     235

12.1 

级联选择组件Cascader      236

12.2 

折叠面板组件Collapse       249

12.3 

iView内置工具函数    257

第13章  实战：知乎日报项目开发   261

13.1 

分析与准备 261

13.2 

推荐列表与分类 265

13.2.1 

搭建基本结构  265

13.2.2 

主题日报  267

13.2.3 

每日推荐  271

13.2.4 

自动加载更多推荐列表  276

13.3 

文章详情页 278

13.3.1 

加载内容  278

13.3.2 

加载评论  281

13.4 

总结      286

第14章  实战：电商网站项目开发   288

14.1 

项目工程搭建      288

14.2 

商品列表页 290

14.2.1 

需求分析与模块拆分       290

14.2.2 

商品简介组件  291

14.2.3 

列表按照价格、销量排序       297

14.2.4 

列表按照品牌、颜色筛选       306

14.3 

商品详情页 309

14.4 

购

物 车      313

14.4.1 

准备数据  314

14.4.2 

显示和操作数据       316

14.4.3 

使用优惠码       320

14.5 

总结      324

第15章  相关开源项目介绍       325

15.1 

服务端渲染与Nuxt.js 325

15.1.1 

是否需要服务端渲染       325

15.1.2 

Nuxt.js       326

15.2 

HTTP库axios       327

15.3 

多语言插件vue-i18n   329

梁灏:网名 Aresn，基于 Vue.js 的开源 UI 组件库 iView 的作者。目前在大数据公司 TalkingData 负责可视化基础架构。创办了程序员社区 TalkingCoder。

暂无出版社相关信息，正在全力查找中！

第5章  内置指令回顾一下第2.2节，我们已经介绍过指令（Directive）的概念了，Vue.js的指令是带有特殊前缀“v-”的HTML特性，它绑定一个表达式，并将一些特性应用到DOM上。其实我们已经用到过很多 Vue内置的指令，比如v-html、v-pre，还有上一章的v-bind。本章将继续介绍 Vue.js中更多常用的内置指令。5.1  基本指令5.1.1  v-cloakv-cloak不需要表达式，它会在Vue实例结束编译时从绑定的HTML元素上移除，经常和CSS的display: none; 配合使用：<div id="app" v-cloak>    {{ message }}</div><script>    var app = new Vue({        el: '#app',        data: {            message: '这是一段文本'        }    })</script>这时虽然已经加了指令v-cloak，但其实并没有起到任何作用，当网速较慢、Vue.js文件还没加载完时，在页面上会显示{{ message }}的字样，直到Vue创建实例、编译模板时，DOM才会被替换，所以这个过程屏幕是有闪动的。只要加一句 CSS就可以解决这个问题了：[v-cloak] {    display: none;}在一般情况下，v-cloak是一个解决初始化慢导致页面闪动的实践，对于简单的项目很实用，但是在具有工程化的项目里，比如后面进阶篇将介绍 webpack和vue-router时，项目的HTML结构只有一个空的div元素，剩余的内容都是由路由去挂载不同组件完成的，所以不再需要v-cloak。5.1.2  v-oncev-once 也是一个不需要表达式的指令，作用是定义它的元素或组件只渲染一次，包括元素或组件的所有子节点。首次渲染后，不再随数据的变化重新渲染，将被视为静态内容，例如：<div id="app">    <span v-once>{{ message }}</div>    <div v-once>        <span>{{ message }}</span>    </div></div><script>    var app = new Vue({        el: '#app',        data: {            message: '这是一段文本'        }    })</script>v-once在业务中也很少使用，当你需要进一步优化性能时，可能会用到。5.2  条件渲染指令5.2.1  v-if、v-else-if、v-else 与JavaScript的条件语句if、else、else if类似，Vue.js的条件指令可以根据表达式的值在DOM中渲染或销毁元素/组件，例如：<div id="app">    <p v-if="status === 1">当status为1时显示该行</p>    <p v-else-if="status === 2">当status为2时显示该行</p>    <p v-else>否则显示该行</p></div><script>    var app = new Vue({        el: '#app',        data: {            status: 1        }    })</script>v-else-if 要紧跟v-if，v-else 要紧跟v-else-if或v-if，表达式的值为真时，当前元素/组件及所有子节点将被渲染，为假时被移除。如果一次判断的是多个元素，可以在Vue.js内置的<template>元素上使用条件指令，终渲染的结果不会包含该元素，例如：<div id="app">    <template v-if="status === 1">        <p>这是一段文本</p>        <p>这是一段文本</p>        <p>这是一段文本</p>    </template></div><script>    var app = new Vue({        el: '#app',        data: {            status: 1        }    })</script>Vue在渲染元素时，出于效率考虑，会尽可能地复用已有的元素而非重新渲染，比如下面的示例：<div id="app">    <template v-if="type === 'name'">        <label>用户名：</label>        <input placeholder="输入用户名">    </template>    <template v-else>        <label>邮箱：</label>        <input placeholder="输入邮箱">    </template>    <button @click="handleToggleClick">切换输入类型</button></div><script>    var app = new Vue({        el: '#app',        data: {            type: 'name'        },        methods: {            handleToggleClick: function() {                this.type = this.type === 'name' ? 'mail' : 'name';            }        }    })</script>如图5-1和图5-2所示，键入内容后，点击切换按钮，虽然DOM变了，但是之前在输入框键入的内容并没有改变，只是替换了placeholder的内容，说明<input>元素被复用了。

在线阅读地址：Vue.js实战在线阅读

在线听书地址：Vue.js实战在线收听

在线购买地址：Vue.js实战在线购买

暂无原文赏析，正在全力查找中！

编辑推荐

Vue.js作者尤雨溪作推荐序，业界前端大腕(TalkingData 研发副总裁,马骥;w3cplus.com站长,大漠;在线回声前端技术专家,justjavac（迷渡）;laravel-china.org站长,Summer)联袂推荐！   Vue社区iView组件贡献者，前端大神梁灏执笔编撰，突出实战，应用为王。

书摘插图

媒体评论

推  荐  序在撰写Vue文档的过程中，出于篇幅和精力的限制，主要着力于对Vue本身API的解释。对于缺乏实战经验的读者来说，虽然可能明白了API的用法，但对于如何将它使用在实际项目中仍然会感到困惑。而这本书的优点，正是在于对重要的知识点结合了一些实战范例来帮助读者更好地理解API设计的初衷和使用场景，并且在GitHub有对应的源码可以下载研究。本书的作者梁灏是优秀的开源Vue组件库iView的作者，也为Vue社区的活跃做出了很多贡献。同时，对开源的投入也使得他对Vue的设计和底层实现有相当深入的理解。如果你喜欢通过实例来学习，那么这本书会是你上手Vue的一个好选择。

尤雨溪  2017年6月

前言

引    言

两年前，我开始接触Vue.js框架，当时就被它的轻量、组件化和友好的API所吸引。之后我将Vue.js和webpack技术栈引入我的公司（TalkingData）可视化团队，并经过一年多的实践，现已成为整个公司的前端开发规范。

与此同时，我开源了iView 项目，它是基于 Vue.js的一套高质量 UI 组件库，从设计规范、工程构建到国际化都提供了完整的解决方案，并支持 SSR。在许多志愿者的帮助下，将文档全部翻译为英文，在Vue开发者社区颇受欢迎。

如今，前端框架可谓百家争鸣，但每一个框架的产生都是为了解决具体问题的。Vue.js以渐进式切入，对不同阶段的开发者提供了不同的开发模式，由浅入深。Vue.js 提供了友好的API和强大的功能，包括双向数据绑定、路由、状态管理、动画、组件化、SSR，无论是简单的页面还是复杂的系统，从可复用性、便捷性和维护性上都精益求精。

有幸完成此书，希望能给Vue.js社区带来一点帮助。

梁灏（Aresn）

2017年7月10日

书籍介绍

本书以Vue.js 2为基础，以项目实战的方式来引导读者渐进式学习Vue.js。本书分为基础篇、进阶篇和实战篇三部分。基础篇主要是对 Vue.js 核心功能的介绍；进阶篇主要讲解前端工程化Vue.js的组件化、插件的使用；实战篇着重开发了两个完整的示例，所涉及的内容涵盖Vue.js绝大部分API。通过阅读本书，读者能够掌握Vue.js框架主要API的使用方法、自定义指令、组件开发、单文件组件、Render函数、使用webpack开发可复用的单页面富应用等。

本书示例丰富、侧重实战，适用于刚接触或即将接触Vue.js的开发者，也适用于对Vue.js有过开发经验，但需要进一步提升的开发者。