Vue.js实战 pdf
内容简介
《 Vue.js实战》》以Vue.js 2为基础，以项目实战的方式来引导读者渐进式学习Vue.js。《Vue.js实战》分为基础篇、进阶篇和实战篇三部分。基础篇主要是对 Vue.js 核心功能的介绍；进阶篇主要讲解前端工程化Vue.js的组件化、插件的使用；实战篇着重开发了两个完整的示例，所涉及的内容涵盖Vue.js绝大部分API。通过阅读《 Vue.js实战》，读者能够掌握Vue.js框架主要API的使用方法、自定义指令、组件开发、单文件组件、Render函数、使用webpack开发可复用的单页面富应用等。
《 Vue.js实战》示例丰富、侧重实战，适用于刚接触或即将接触Vue.js的开发者，也适用于对Vue.js有过开发经验，但需要进一步提升的开发者。
作者简介
梁灏 :网名 Aresn，基于 Vue.js 的开源 UI 组件库 iView 的作者。目前在大数据公司 TalkingData 负责可视化基础架构。创办了程序员社区 TalkingCoder。
目录
第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
感悟与笔记
初识Vuejs
Vue特点:简单小巧,渐进式.
简单小巧是指 Vue.js 压缩后大小仅有 17KB。
所谓渐进式（Progressive），就是你可以一步一 步、有阶段性地来使用 Vue.js，不必一开始就使用所有的东西。Vue 最独特的特性之一，是其非侵入性的响应式系统。比如你可以直接用脚本插入，也可以构建一个前端工程vue-cil。
Vue特性:解耦视图和数据,可复用的组件,前端路由,状态管理,虚拟的DOM技术
MWM 模式:Model-view-viewModel.模式.mvvm模式是由经典的ＭＶＣ模式演变而来，。当 View （视图层）变化时，会自动更新到 ViewModel （视图模型），反之亦然。 View 和 ViewModel 之间通过双向绑定（tdata-binding）建立 联系．
Vｕe.js 是一个渐进式的 JavaScript 框架，根据项目需求，你可以选择从不同的维度来使用它。
数据绑定和第一个Vue应用
el 用于指定一个页面中己存在的 DOM 元素来挂载 Vue 实例，它可以是 HTMLElement ，也可以是 css 选择器.
Vue 实例的 data 选项，可以声明应用内需要双向绑定的数据.
生命周期:
插值与表达式:使用双大括号（Mustache 语法）“｛｛｝｝”是最基本的文本插值方法，它会自动将我们双向绑 定的数据实时显示出来,在｛｛｝｝中，除了简单的绑定属性值外，还可以使用 JavaScript 表达式进行简单的运算、 三元运算
<span v-pre＞｛｛这里的内容是不会被编译的＜／ span>
过滤器:
Vue.js支持在｛｛｝｝插值的尾部添加一个管道符 “ ( | ) ” 对数据进行过滤，经常用于格式化文 本，比如字母全部大写、货币千位使用逗号分隔等。过滤的规则是自定义的， 通过给 Vue 实例添 加选项 filters 来设置
<template>
<div id="add">
{{data | formdate }}
</div>
</template>
<script>
export default {
data () {
return {
date:new Date(),
}
},
filters: {
formdate (value) {
var date = new Date(value);
var year = date.getFullYear();
var month = this.padDate(date.getMonth() + 1);
var day = this.padDate(date.getDate());
var hours = this.padDate(date.getHours());
var minutes = this.padDate(date.getUTCMinutes());
var seconds = this.padDate(date.getSeconds());
return year + '-' + month +'-' + day + ' ' + hours + ':' + minutes
+":" + seconds;
}
},
mounted () {
},
methods: {
padDate (value){
return (value < 10 ? '0' + value : value);
}
}
}
</script>
<style>
</style>
指令与事件:
指令的主要职责就是当其表达式的值改变时，相应地将某些行为应用到 DOM 上,数据驱动 DOM 是 Vue.js 的核心理念，所以不到万不得已时不要主动操作 DOM，你只需要维护好数据， DOM 的事 Vue 会 帮你优雅的处理。Vue. 内置了很多指令，帮助我们快速完成常见的 DOM 操作，比如循环渲染、显示与隐藏等.
v-bind 的基本用途是动态更新 HTML 元素上的属性，比如 id、 class 等，
v-on 可以监 昕原生的 DOM 事件，除了 click 外，还有 dblclick、 keyup, mousemove 等。表达式可以是一个方 法名，这些方法都写在 Vue 实例的 methods 属性内，并且是函数的形式
会员免费下载
链接：https://pan.baidu.com/s/1_6P0OVVSTb4WaWCdm14JEQ
提取码： ****** 查看
成为本站VIP会员即可无限下载。 请先点击百度网盘，看资源是否还在，不在请点击链接通知站长补资源。
资源标签点击标签可查看对应分类的资源
