Bootstrap+Vue.js前端开发超实用代码集锦

随着互联网技术的发展和HTML、CSS、JavaScript的应用，前端界面变得更加美观，体验更加友好，交互更加显著，功能更加强大。为了让开发者得到更好的编程体验，将编程生产力转化为实际效益，前端开发已不仅仅局限于使用HTML、CSS及JavaScript等原始技术，而是广泛使用其衍生出来的各种框架，如Vue.js、Node.js、Three.js、React、Bootstrap、Angular等，这些前端框架均提供了比较优秀的解决方案，有效地将开发者从烦琐的代码中解放出来，使开发者更专注于内容呈现和逻辑实现。本书将以实例代码的模式解析Bootstrap 和Vue.js这两个空前火爆的前端开发框架的技术要点。
Bootstrap是Twitter公司的设计师Mark Otto和Jacob Thornton基于HTML、CSS、JavaScript编写的前端开发框架，Bootstrap 提供了响应式的栅格系统、链接样式、配色方案，以及大量可重用的组件和样式，本书将以实例的形式演示该框架的主要技术，如输入框组、按钮组、块级按钮、胶囊导航、路径导航、导航栏折叠、分页、轮播、排版、条纹表格、堆叠表单、内联表单、自定义表单、选项卡切换、选项卡下拉菜单、胶囊下拉菜单、导航栏下拉菜单、手风琴折叠、Jumbotron、缩略图、徽章、卡片、警告框、弹出框、模态框、条纹进度条、动画进度条、滚动监听、响应式浮动、多媒体对象等。
Vue.js是华人尤雨溪在2014年2月编写的一个主要以数据驱动和组件化的思想构建的JavaScript库。相比其他前端开发库，Vue.js提供了更简洁、更易于理解的API。如果说jQuery是手工作坊，那么Vue.js就像是一座工厂，虽然Vue.js做的大多数事情jQuery都可以做，但无论是代码量还是流程规范性都是Vue.js较优。本书以实例的形式列举了Vue.js非常有个性化的代码，如单向数据绑定、双向数据绑定、动态属性绑定、多个事件绑定、样式绑定、计算属性、监听属性、过滤器、修饰符、全局组件和局部组件、全局指令和局部指令、各种内置指令、插槽、模板、混入对象、钩子函数、路由及其参数传递、过渡动画，以及Vue.js与Lodash、GSAP、jQuery、Velocity、Animate、TweenJS等第三方库(框架)的整合应用。
如果Bootstrap是对CSS的再次封装，那么Vue.js就是对HTML的再次优化，因此本书需要读者有一定的HTML、CSS和JavaScript的基础知识。本书的Bootstrap代码基于Bootstrap 4.3.1实现，Vue.js代码基于Vue.js 2.6.11实现，在IntelliJ IDEA 2019.2.3环境编写完成，在*版的“搜狗高速浏览器”和“Google Chrome浏览器”测试成功(即在浏览器中直接打开源代码.html文件)。因此建议读者在上述环境或条件下使用源代码。所有源代码不需要下载Bootstrap和Vue.js的其他文件，在测试或使用时保持网络畅通即可。由于Bootstrap和Vue.js这两个框架版本较多，并且不同的版本新增和作废的内容较多，因此不建议在其他版本中使用源代码，特别是不能使用较低的版本测试这些源代码。
本书实例丰富，技术新颖,贴近实战,思路清晰,高效直观,通俗易懂,操作性强。全书内容和思想并非一人之力所能及，而是凝聚了众多热心人士的智慧并经过充分的提炼和总结而成，在此对他们表示崇高的敬意和衷心的感谢！限于时间关系和作者水平，少量内容可能存在认识不全面或偏颇及一些疏漏和不当之处，敬请读者批评指正。
罗帅罗斌2020年于重庆渝北

本书以问题描述 解决方案的模式，使用360多个实例介绍了Bootstrap 和Vue.js这两大前端开发框架的技术亮点。全书根据内容分为两部分：在第1部分的Bootstrap代码中，主要介绍了输入框组、按钮组等技术；在第2部分的Vue.js代码中，主要介绍了单向数据绑定、双向数据绑定、动态属性绑定等以及Vue.js与Lodash、GSAP、jQuery、Velocity、Animate、TweenJS等第三方库(框架)的整合应用。