本书从零基础读者的角度出发，通过通俗易懂的语言、丰富多彩的实例，循序渐进地让读者在实践中学习Vue.js编程知识，并提升自己的实际开发能力。全书共分为4篇18章，内容包括Vue.js简介、基础特性、条件判断、列表渲染、计算属性、监听属性、样式绑定、事件处理、表单控件绑定、自定义指令、组件、过渡、渲染函数、常用插件、单页Web应用、状态管理、51购商城、仿豆瓣电影评分等。书中知识点讲解细致，侧重介绍每个知识点的使用场景，涉及的代码给出了详细的注释，可以使读者轻松领会Vue.js程序开发的精髓，快速提高开发技能。同时，本书配套了大量教学视频，扫码即可观看，还提供所有程序源文件，方便读者实践。本书适合Vue.js初学者、前端开发工程师等自学使用，也可用作高等院校相关专业的教材及参考书。

第1篇 基础知识篇 第1章 Vue.js简介 2 视频讲解：8节，28分钟 1.1 Vue.js概述 3 1.1.1 什么是Vue.js 3 1.1.2 Vue.js的特性 3 1.2 Vue.js的安装 4 1.2.1 直接下载并引入 4 1.2.2 使用CDN方法 5 1.2.3 使用NPM方法 5 1.3 Vue.js的开发模式 5 1.4 开发工具WebStorm简介 6 1.4.1 WebStorm的下载 6 1.4.2 WebStorm的安装 7 1.5 创建**个Vue实例 9 [实例1.1] 输出“Hello Vue.js” 9 本章知识思维导图 12 第2章 基础特性 13 视频讲解：7节，61分钟 2.1 Vue实例及选项 14 2.1.1 挂载元素 14 2.1.2 数据 14 2.1.3 方法 15 2.1.4 生命周期钩子函数 16 2.2 数据绑定 17 2.2.1 插值 17 [实例2.1] 插入文本 17 [实例2.2] 插入HTML内容 18 [实例2.3] 为元素设置样式 18 [实例2.4] 为图片绑定属性 20 [实例2.5] 获取QQ邮箱地址中的QQ号 21 2.2.2 过滤器 21 [实例2.6] 获取当前的日期、星期��时间 22 [实例2.7] 截取新闻标题 23 2.2.3 指令 25 本章知识思维导图 26 第3章 条件判断 27 视频讲解：7节，34分钟 3.1 v/if指令 28 3.1.1 基本用法 28 3.1.2 在元素中使用v/if 28 3.2 v/else指令 29 [实例3.1] 判断2021年2月份的天数 29 3.3 v/else/if指令 30 [实例3.2] 判断空气质量状况 30 3.4 应用key属性管理可复用的元素 31 3.5 v/show指令 33 3.5.1 基本用法 33 [实例3.3] 切换图片的显示和隐藏 33 3.5.2 v/if和v/show的比较 34 本章知识思维导图 34 第4章 列表渲染 35 视频讲解：6节，52分钟 4.1 应用v/for指令遍历数组 36 4.1.1 基本用法 36 [实例4.1] 输出省份、省会以及旅游景点信息 37 4.1.2 在元素中使用v/fo/ 37 [实例4.2] 输出网站导航菜单 38 4.1.3 数组更新检测 38 [实例4.3] 输出2020年内地电影票房排行榜前十名 39 4.2 应用v/for指令遍历对象 41 4.2.1 基本用法 41 4.2.2 向对象中添加属性 43 4.3 应用v/for指令遍历整数 44 [实例4.4] 输出九九乘法表 44 本章知识思维导图 46 第5章 计算属性 47 视频讲解：3节，28分钟 5.1 基本用法 48 5.1.1 什么是计算属性 48 5.1.2 计算属性的应用 48 [实例5.1] 统计购物车中的商品总价 49 5.2 getter和sette/ 50 5.2.1 gette/ 50 5.2.2 sette/ 51 5.3 计算属性缓存 52 本章知识思维导图 53 第6章 监听属性 54 视频讲解：3节，19分钟 6.1 基本用法 55 6.1.1 什么是监听属性 55 6.1.2 监听属性的应用 55 [实例6.1] 实现汇率换算 56 6.2 deep选项 56 6.3 计算属性和监听属性的比较 57 本章知识思维导图 58 第2篇 核心技术篇 第7章 样式绑定 60 视频讲解：4节，38分钟 7.1 class属性绑定 61 7.1.1 对象语法 61 [实例7.1] 为书名添加颜色 62 [实例7.2] 以垂直方式从右向左显示文本 65 7.1.2 数组语法 66 7.2 内联样式绑定 68 7.2.1 对象语法 68 [实例7.3] 为搜索框绑定样式 69 [实例7.4] 竖向导航菜单 70 7.2.2 数组语法 71 本章知识思维导图 73 第8章 事件处理 74 视频讲解：6节，38分钟 8.1 事件监听 75 8.1.1 使用v/on指令 75 [实例8.1] 统计单击按钮的次数 75 8.1.2 事件处理方法 75 [实例8.2] 动态改变页面的背景颜色 76 [实例8.3] 动态改变图片透明度 77 [实例8.4] 为图片添加和去除边框 78 8.1.3 使用内联JavaScript语句 79 8.1.4 实战应用 80 [实例8.5] 二级联动菜单 80 8.2 事件处理中的修饰符 82 8.2.1 事件修饰符 82 8.2.2 按键修饰符 83 [实例8.6] 按下回车键自动切换焦点 84 本章知识思维导图 86 第9章 表单控件绑定 87 视频讲解：13节，95分钟 9.1 绑定文本框 88 9.1.1 单行文本框 88 [实例9.1] 搜索图书信息 88 9.1.2 多行文本框 89 [实例9.2] 限制用户输入字数 90 9.2 绑定复选框 91 9.2.1 单个复选框 91 [实例9.3] 切换注册按钮的状态 92 9.2.2 多个复选框 93 [实例9.4] 实现复选框的全选、反选和全不选操作 94 9.3 绑定单选按钮 95 [实例9.5] 模拟查询话费流量的功能 96 9.4 绑定下拉菜单 97 9.4.1 单选 97 [实例9.6] 更换页面主题 98 9.4.2 多选 99 [实例9.7] 选择职位 100 9.5 值绑定 101 9.5.1 单选按钮 101 9.5.2 复选框 101 9.5.3 下拉菜单 102 9.6 使用修饰符 103 9.6.1 lazy 103 9.6.2 numbe/ 103 9.6.3 trim 104 本章知识思维导图 105 第10章 自定义指令 106 视频讲解：7节，40分钟 10.1 注册指令 107 10.1.1 注册全局指令 107 10.1.2 注册局部指令 107 10.2 钩子函数 108 [实例10.1]为图片设置边框 110 [实例10.2] 通过下拉菜单设置文字大小 110 10.3 自定义指令的绑定值 111 10.3.1 绑定数值常量 111 10.3.2 绑定字符串常量 112 10.3.3 绑定对象字面量 112 10.4 实战应用 112 [实例10.3] 实现元素的随意拖动 113 本章知识思维导图 115 第11章 组件 116 视频讲解：21节，127分钟 11.1 注册组件 117 11.1.1 注册全局组件 117 11.1.2 注册局部组件 119 11.2 数据传递 120 11.2.1 什么是Prop 120 11.2.2 Prop的大小写 121 11.2.3 传递动态Prop 121 [实例11.1] 输出影片信息 122 11.2.4 Prop验证 124 11.3 自定义事件 127 11.3.1 自定义事件的监听和触发 127 [实例11.2] 单击按钮放大文本 127 [实例11.3] 导航菜单效果 128 11.3.2 将原生事件绑定到组件 130 11.4 内容分发 130 11.4.1 基础用法 130 11.4.2 编译作用域 131 11.4.3 后备内容 132 11.4.4 具名插槽 133 [实例11.4] 输出简单商品信息 133 11.4.5 作用域插槽 135 [实例11.5] 输出人物信息列表 136 11.5 混入 137 11.5.1 基础用法 137 11.5.2 选项合并 138 11.5.3 全局混入 140 11.6 动态组件 141 11.6.1 基础用法 141 [实例11.6] 实现文字选项卡的切换 141 11.6.2 keep/alive 143 [实例11.7] 实现选项卡内容的缓存效果 143 11.7 其他用法 146 11.7.1 使用$refs访问组件 146 11.7.2 使用标签定义模板 147 11.8 实战应用 148 [实例11.8] 实现热播电影和经典电影之间的切换 148 本章知识思维导图 151 第12章 过渡 152 视频讲解：11节，89分钟 12.1 单元素过渡 153 12.1.1 CSS过渡 153 12.1.2 过渡的类名介绍 154 [实例12.1] 显示和隐藏文章内容的过渡效果 154 12.1.3 CSS动画 155 [实例12.2] 以缩放的动画形式隐藏和显示文字 155 12.1.4 自定义过渡的类名 156 [实例12.3] 以旋转动画的形式隐藏和显示文字 157 12.1.5 JavaScript钩子函数 157 [实例12.4] 实现文字显示和隐藏时的不同效果 159 12.2 多元素过渡 160 12.2.1 基础用法 160 12.2.2 key属性 162 [实例12.5] 实现古诗的过渡效果 162 12.2.3 过渡模式 165 12.3 多组件过渡 166 [实例12.6] 实现横向选项卡文字切换的过渡效果 167 12.4 列表过渡 169 [实例12.7] 实现插入数字和移除数字时的过渡效果 169 12.5 实战应用 170 [实例12.8] 广告图片的轮播效果 170 本章知识思维导图 174 第3篇 **应用篇 第13章 渲染函数 176 视频讲解：4节，31分钟 13.1 什么是虚拟DOM 177 13.2 渲染函数的使用 177 13.2.1 基本用法 177 13.2.2 createElement用法 180 13.2.3 使用JavaScript代替模板功能 183 [实例13.1] 实现文本的放大和缩小 183 [实例13.2] 实现列表的显示和隐藏 185 [实例13.3] 模拟在线聊天 187 本章知识思维导图 188 第14章 常用插件 189 视频讲解：13节，81分钟 14.1 应用vue/router实现路由 190 14.1.1 引入插件 190 14.1.2 基本用法 191 14.1.3 路由动态匹配 192 14.1.4 嵌套路由 193 [实例14.1] 电影和音乐组件的切换 194 14.1.5 命名路由 197 14.1.6 应用push()方法定义导航 197 [实例14.2] 右侧选项卡切换图片效果 197 14.1.7 命名视图 201 14.1.8 重定向 202 14.1.9 **用法 203 [实例14.3] 设置网页标题 203 14.2 应用axios实现Ajax请求 207 14.2.1 引入方式 207 14.2.2 GET请求 208 [实例14.4] 检测用户名是否被占用 209 14.2.3 POST请求 210 [实例14.5] 检测用户登录是否成功 211 14.3 实战应用 213 [实例14.6] 实现文字选项卡和内容的切换 213 本章知识思维导图 219 第15章 单页Web应用 220 视频讲解：9节，78分钟 15.1 webpack简介 221 15.1.1 webpack的安装 221 15.1.2 基本使用 222 15.2 loader简介 223 15.2.1 加载CSS 223 15.2.2 webpack配置文件 223 15.2.3 加载图片文件 226 15.3 单文件组件 227 15.4 项目目录结构 229 15.4.1 @vue/cli的安装 230 15.4.2 创建项目 230 [实例15.1] 实现购物车功能 232 15.5 实战应用 235 [实例15.2] 通过选项卡浏览新闻标题 235 本章知识思维导图 240 第16章 状态管理 241 视频讲解：4节，58分钟 16.1 Vuex简介 242 16.2 基本使用 242 16.2.1 Vuex的核心概念 242 16.2.2 简单例子 243 [实例16.1] 保存用户登录状态 250 16.3 实战应用 255 [实例16.2] 添加商品和删除商品 255 本章知识思维导图 260 第4篇 项目开发篇 第17章 51购商城 262 视频讲解：21节，63分钟 17.1 项目的设计思路 263 17.1.1 项目概述 263 17.1.2 界面预览 263 17.1.3 功能结构 263 17.1.4 文件夹组织结构 263 17.2 主页的设计与实现 266 17.2.1 主页的设计 266 17.2.2 顶部区和底部区功能的实现 267 17.2.3 商品分类导航功能的实现 269 17.2.4 轮播图功能的实现 271 17.2.5 商品**功能的实现 274 17.3 商品详情页面的设计与实现 276 17.3.1 商品详情页面的设计 276 17.3.2 图片放大镜效果的实现 276 17.3.3 商品概要功能的实现 279 17.3.4 猜你喜欢功能的实现 281 17.3.5 选项卡切换效果的实现 283 17.4 购物车页面的设计与实现 285 17.4.1 购物车页面的设计 285 17.4.2 购物车页面的实现 286 17.5 付款页面的设计与实现 288 17.5.1 付款页面的设计 288 17.5.2 付款页面的实现 289 17.6 登录注册页面的设计与实现 292 17.6.1 登录注册页面的设计 292 17.6.2 登录页面的实现 292 17.6.3 注册页面的实现 294 本章知识思维导图 297 第18章 仿豆瓣电影评分网 298 视频讲解：14节，40分钟 18.1 课程设计目的 299 18.2 系统设计 299 18.2.1 系统功能结构 299 18.2.2 文件夹组织结构 299 18.2.3 系统预览 299 18.3 在项目中使用jQuery 301 18.4 主页的设计与实现 302 18.4.1 主页的设计 302 18.4.2 “正在热映”版块的实现 302 18.4.3 “*近热门的电影”版块的实现 306 18.5 电影信息页面的设计与实现 309 18.5.1 “电影基本信息和评分”版块的设计 309 18.5.2 “剧情简介”版块的实现 311 18.5.3 “类似电影**”版块的实现 312 18.6 电影评价功能的实现 313 18.6.1 记录想看的电影 313 18.6.2 评价看过的电影 316 18.6.3 删除记录 318 本章知识思维导图 319