Vue.js 实战

🌙
手机阅读
本文目录结构
a'xi'he

Vue.js 实战

编辑推荐

适读人群 :Vue.js 初学者 Vue.js 开发者 Vues.js 培训机构使用教材

Vue.js 作者尤雨溪作推荐序

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

内容简介

《 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
axihe
axihe

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang