随着互联网技术的不断发展，HTML5、CSS3、JavaScript语言及其相关技术越来越受人们的关注，各种前端框架层出不穷。Vue.js和Bootstrap作为前端框架中的优秀代表，为广大开发者提供了诸多便利，在Web开发技术中占据着重要地位。 本书内容翔实、结构清晰，通过丰富的案例详细讲解了Vue.js和Bootstrap框架的相关技术。在Vue.js部分，讲解了计算属性、侦听器、样式控制、事件处理、表单绑定、结构渲染、组件等核心基础知识；在此基础上，讲解组件化开发的完整逻辑；最后拓展讲解了AJAX、路由、状态管理等高级内容。在Bootstrap部分，主要讲解了工具类、栅格布局、表单样式和常用组件等内容。本书使用了大量案例帮助读者理解这两个框架的使用方法，同时演示了综合使用这两个框架进行Web开发的方法。 本书既可作为高等院校相关专业的网页设计与制作、前端开发等课程的教材，也可作为Vue.js和Bootstrap初学者的入门用书。

丛书特色： （1）编排丰富实战案例，可扫前言二维码进行快速预览。 （2）提供在线实训平台（http://code.artech.cn），支撑随时开展全书案例实战演练。 （3）开源分阶实战项目（http://www.geekfun.website），助力不同层次读者（学生）获取企业实战项目开发能力。 （4）配套多类教辅资源，包含文本类、视频类（微课视频）、案例类、平台类等。 （5）建立教师服务与交流群（QQ群号：368845661），立体化服务院校教师教学。 特别说明： 为了使本书中的案例作用最大化，我们专门为其提供了“在线实训平台”（http://code.artech.cn）。该平台的具体功能介绍如下。 【在线实训平台】功能： （1）教师可以利用该平台，在上课过程中直接演练（展示）书中的所有案例，并可通过实时的运行结果同步讲解相关知识点和技能。 （2）师生可以通过该平台观看全书导学、原理讲解、案例讲解等视频，配合实操演练，随时随地进行学习，支持开展线上线下混合式教学。 （3）学生可以在课前或课后通过该平台，实操练习书中的所有案例，实时查看代码运行结果，而且所有案例代码均支持复制与还原。 （4）学生还可以通过该平台实操练习各章课后的实操题，并可通过微信分享功能，将实操的结果分享给其他人，如分享给老师进行审阅。 说明：扫描“从书序中的二维码”可以了解该平台的具体使用方法，教师也可通过“教师用书指导手册”了解该平台的具体操作步骤。

温谦： ## 全栈工程师，前沿科技创始人，现从事企业大型软件系统的分析与开发工作，拥有超20年的软件开发经验，主持并成功开发了多个复杂系统，项目实战经验丰富。 ## 常销书作者，毕业于华中科技大学计算机专业，主编网页设计与软件开发相关领域图书共12本，图书编写经验颇丰，其中《HTML+CSS网页设计与布局从入门到精通》《网页设计与布局项目化教程（HTML+CSS+DIV）》等图书常销10余年，被百余所高校选作教材。

## 章名目录 【第 一篇】　Vue.js程序开发 第 1章　Vue.js开发基础 第 2章　计算属性与侦听器 第3章　控制页面的CSS样式 第4章　事件处理 第5章　表单绑定 第6章　结构渲染 第7章　组件基础 第8章　单文件组件 第9章　AJAX与axios 第 10章　过渡和动画 第 11章　Vue.js插件 【第二篇】 Bootstrap程序开发 第 12章　Bootstrap基础 第 13章　CSS原子化与工具类 第 14章　Bootstrap的栅格布局 第 15章　Bootstrap的表单样式 第 16章　Bootstrap的常用组件 【第三篇】 综合实战 第 17章　综合案例：产品着陆页 第 18章　综合案例：“豪华版”待办事项 ## 详细目录 【第 一篇】　Vue.js程序开发 第 1章　Vue.js开发基础 1.1 Web前端开发概述　2 1.1.1 Web开发简史　2 1.1.2 基于前后端分离模式的Web开发　3 1.1.3 Vue.js与MVVM模式　4 1.1.4 安装Vue.js　7 1.1.5 上手实践：第 一个Vue.js程序　8 1.2 Vue.js开发入门　10 1.2.1 Vue根实例　10 1.2.2 Vue实例的生命周期　19 本章小结　21 习题1　21 第 2章　计算属性与侦听器 2.1 计算属性　22 2.1.1 定义计算属性　22 2.1.2 计算属性的缓存特性　24 2.2 侦听器　27 2.2.1 侦听器的应用场景　27 2.2.2 侦听器的基本用法　28 2.2.3 深度侦听　29 2.2.4 侦听对象时获取对象原值　30 2.2.5 使用immediate参数　31 2.2.6 对数组的侦听　32 本章小结　35 习题2　35 第3章　控制页面的CSS样式 3.1 绑定class属性　36 3.1.1 以对象方式绑定 class属性　36 3.1.2 将class属性与对象变量绑定　38 3.1.3 以数组方式绑定class属性　39 3.1.4 动态改变class属性值　40 3.1.5 在数组中使用对象　40 3.2 绑定style属性　41 3.2.1 以对象方式绑定style属性　41 3.2.2 将style属性与对象变量绑定　42 3.2.3 以数组方式绑定style属性　43 3.2.4 动态改变style属性值　43 本章小结　44 习题3　44 第4章　事件处理 4.1 标准DOM中的事件　45 4.1.1 事件与事件流　45 4.1.2 事件对象　46 4.2 使用Vue.js处理事件　47 4.2.1 内联方式响应事件　48 4.2.2 事件处理方法　48 4.2.3 在Vue.js中使用事件对象　50 4.3 动手练习：监视鼠标移动　51 4.4 事件修饰符　52 4.4.1 准备基础页面　52 4.4.2 .stop修饰符　53 4.4.3 .self修饰符　53 4.4.4 .capture修饰符　54 4.4.5 .once修饰符　54 4.4.6 .prevent修饰符　54 4.4.7 事件修饰符的使用说明　55 4.4.8 按键修饰符　55 本章小结　58 习题4　58 第5章　表单绑定 5.1 输入文本的绑定　59 5.1.1 文本框　59 5.1.2 多行文本框　60 5.2 选择类表单元素的绑定　61 5.2.1 单选按钮　61 5.2.2 复选框　62 5.2.3 下拉框　63 5.2.4 多选列表框　63 5.2.5 键值对绑定　64 5.3 修饰符　65 5.3.1 .lazy修饰符　65 5.3.2 .number修饰符　65 5.3.3 .trim修饰符　66 本章小结　66 习题5　66 第6章　结构渲染 6.1 条件渲染指令v-if　67 6.1.1 v-if和v-else　67 6.1.2 v-else-if　68 6.1.3 用key管理可复用的元素　69 6.1.4 v-if与v-show　69 6.2 列表渲染指令v-for　70 6.2.1 基本列表　71 6.2.2 迭代对象数组　71 6.2.3 对象属性列表　73 6.2.4 数值范围　73 6.2.5 数组更新检测　74 6.2.6 v-for中key的作用　76 6.2.7 v-for与v-if一同使用时的注意事项　78 6.3 案例——汇率计算器　79 6.3.1 页面结构和样式　79 6.3.2 数据模型　80 本章小结　82 习题6　82 第7章　组件基础 7.1 自定义组件与HTML标记　83 7.1.1 组件的名称　84 7.1.2 组件的属性　85 7.1.3 组件的内容　86 7.1.4 在组件中处理事件　86 7.2 全局组件与局部组件　89 本章小结　91 习题7　91 第8章　单文件组件 8.1 基础知识　92 8.2 安装Vue CLI脚手架工具　93 8.2.1 安装基础环境　94 8.2.2 安装Vue CLI　95 8.3 动手实践：投票页面　97 8.3.1 制作greeting组件　98 8.3.2 制作app组件　99 8.3.3 父子组件之间传递数据　101 8.3.4 构建用于生产环境的文件　105 8.4 单页应用和多页应用　106 8.4.1 单页应用和多页应用的区别　106 8.4.2 多页应用的开发　107 8.4.3 单页应用的开发　108 本章小结　114 习题8　114 第9章　AJAX与axios 9.1 认识axios　115 9.2 axios的基础用法　116 9.2.1 基础用法　116 9.2.2 GET与POST方法　118 9.2.3 嵌套请求与并发请求　121 9.3 axios的进阶用法　124 9.3.1 创建实例　124 9.3.2 实例的相关配置　124 9.3.3 错误处理　125 9.3.4 拦截器　126 本章小结　130 习题9　130 第 10章　过渡和动画 10.1 CSS过渡　131 10.2 单元素过渡　132 10.2.1 transition组件　132 10.2.2 过渡的类名　133 10.3 动手实践：可折叠的多级菜单　134 10.3.1 搭建页面结构　134 10.3.2 展开和收起菜单　135 10.3.3 添加过渡效果　136 10.3.4 实现多级菜单　137 10.4 列表过渡　140 本章小结　142 习题10　142 第 11章　Vue.js插件 11.1 Vue Router　143 11.1.1 基本用法　143 11.1.2 命名路由　147 11.1.3 路由动态匹配　148 11.1.4 编程式导航　153 11.1.5 重定向和别名　154 11.1.6 进阶用法　155 11.1.7 history模式　157 11.2 状态管理　158 11.2.1 Vuex的基本用法　158 11.2.2 深入掌握Vuex　161 本章小结　169 习题11　169 【第二篇】 Bootstrap程序开发 第 12章　Bootstrap基础 12.1 Bootstrap简介　173 12.2 下载并使用Bootstrap　174 12.3 常用样式　176 12.3.1 文本样式　176 12.3.2 图片样式　180 12.3.3 表格样式　181 12.4 图标库　183 本章小结　185 习题12　185 第 13章　CSS原子化与工具类 13.1 CSS原子化的理念　186 13.2 Bootstrap的工具类规则　190 13.3 颜色　191 13.4 尺寸　192 13.4.1 font-size　193 13.4.2 padding和margin　193 13.4.3 width和height　194 13.5 布局　194 13.5.1 display　195 13.5.2 flexbox　195 13.5.3 实例：制作导航菜单　196 13.5.4 float　199 13.6 其他工具类　199 13.7 动手练习：创建嵌套的留言组件　201 13.7.1 搭建框架　202 13.7.2 用工具类布局　202 13.7.3 头像放右侧　202 13.7.4 实现布局的嵌套　203 本章小结　204 习题13　204 第 14章　Bootstrap的栅格布局 14.1 栅格布局基础　205 14.1.1 栅格布局理念　205 14.1.2 上手案例　207 14.1.3 理解屏幕分辨率的概念　213 14.2 基本用法　215 14.2.1 响应式断点　215 14.2.2 常规用法　216 14.2.3 设置行间距与列间距　218 14.3 高级用法　221 14.3.1 栅格嵌套　221 14.3.2 流式布局　222 14.3.3 设定列宽　223 14.3.4 列的偏移与对齐　225 本章小结　228 习题14　228 第 15章　Bootstrap的表单样式 15.1 表单控件样式　229 15.1.1 文本框　229 15.1.2 选择框　233 15.1.3 单选框与复选框　234 15.1.4 滑动条输入　235 15.1.5 输入组　236 15.2 表单布局　237 15.3 表单验证　239 15.3.1 客户端校验　239 15.3.2 服务器端校验　240 15.4 动手练习：创建一个结账页面　242 本章小结　242 习题15　243 第 16章　Bootstrap的常用组件 16.1 按钮　244 16.2 反馈和提示类组件　246 16.2.1 警告框　246 16.2.2 加载中　246 16.2.3 轻量提示　247 16.2.4 模态框　250 16.3 响应式导航栏　252 16.4 卡片组件　256 16.4.1 实例：卡片　256 16.4.2 实例：瀑布流布局的相册　258 16.5 轮播图组件　261 本章小结　262 习题16　262 【第三篇】 综合实战 第 17章　综合案例：产品着陆页 17.1 页面结构分析　266 17.2 制作页头和页脚　267 17.3 制作第 一屏　268 17.4 制作图文介绍　269 17.5 制作课程特色　271 17.6 适配平板端　272 17.6.1 适配页头　273 17.6.2 适配第 一屏　273 17.6.3 适配图文介绍　274 17.6.4 适配课程特色　275 17.7 适配PC端　276 本章小结　279 第 18章　综合案例：“豪华版”待办事项 18.1 功能描述　281 18.2 用到的知识点　281 18.3 使用Vue CLI搭建项目　282 18.4 页面结构和样式　284 18.4.1 安装并引入Bootstrap　284 18.4.2 添加待办事项　284 18.4.3 筛选项　285 18.4.4 任务列表　286 18.4.5 编辑任务弹窗　287 18.5 组件化　288 18.5.1 抽离单个任务项　289 18.5.2 抽离弹窗　289 18.6 实现核心功能　290 18.6.1 定义Todo类　290 18.6.2 使用Vuex管理任务列表　291 18.7 实现各项功能　292 18.7.1 添加待办事项　292 18.7.2 显示任务列表　293 18.7.3 动态化筛选项　294 18.7.4 修改任务状态　295 18.7.5 编辑任务　296 18.7.6 删除任务　300 18.7.7 调整任务顺序　300 18.7.8 持久化任务　302 本章小结　303