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等第三方库(框架)的整合应用。

罗帅,罗斌，男，本科学历。曾经在无锡宝特软件有限公司，深圳唯佳物流有限公司从事软件开发。曾经在清华大学出版社出版《Android炫酷应用300例.实战篇》和《Android炫酷应用300例.提升篇》、在武汉大学出版社出版《Visual C 6.0 编程经典博览》、在电子科技大学出版社出版《Visual C .NET注册表编程实用手册》等

第1部分Bootstrap代码

001对文本的字体线条进行细化

002对文本的字体线条进行加粗

003主副标题使用不同大小字体

004创建黑色半透明的字体线条

005使用自定义字体突出段落

006自定义引用和引用的脚注

007创建黑底白字风格的文本

008使段落中的所有字母大写或小写

009使段落中所有单词的首字母大写

010允许或禁止文本自动换行

011设置文本靠左或靠右对齐

012设置文本块靠左或靠右对齐

013在水平方向上居中显示文本块

014在垂直方向上居中显示文本块

015在水平方向上和垂直方向上均居中显示文本块

016为文本块添加圆角边框线

017为文本块添加开口边框线

018在文本块之间添加分隔线

019动态折叠或展开文本块内容

020在首次显示时展开隐藏内容

021对图像进行小(或大)圆角裁剪

022对图像的上(或下)边进行圆角裁剪

023将矩形图像裁剪成椭圆形状

024将矩形图像裁剪成胶囊形状

025在图像边缘添加镶边效果

026设置图像在水平方向上居中

027设置图像在垂直方向上居中

028设置图像在水平方向上和垂直方向上均居中

029设置图像与容器的底部靠齐

030设置图像与容器的右侧靠齐

031根据宽度变化响应式排列图像

032以动画风格折叠或展开图像

033创建手风琴风格的互斥折叠

034在输入框组的左侧添加文本

035在输入框组的右侧添加文本

036在输入框组中添加单选按钮

037在输入框组中添加复选框

038在输入框组中添加下拉菜单

039在输入框组中添加多个元素

040创建多种颜色的实心按钮

041创建多种颜色的空心按钮

042创建两端靠齐的块级按钮

043设置按钮的激活状态样式

044设置按钮的禁用状态样式

045使用多个按钮创建按钮组

046在垂直方向上创建按钮组

047在按钮组中内嵌下拉菜单

048在按钮上嵌套黄色的徽章

049创建多种颜色和大小的徽章

050在列表项上嵌套胶囊型徽章

051创建Bootstrap4风格的复选框

052按照行优先排列自定义复选框

053以行优先原则排列默认复选框

054启用或禁用默认的复选框

055创建Bootstrap4风格的单选按钮

056按照行优先排列自定义单选按钮

057启用或禁用自定义的单选按钮

058以行优先原则排列默认单选按钮

059按照行优先排列多种表单元素

060创建Bootstrap4风格的textarea

061在一行中排列label和select元素

062在select元素中实现多选功能

063禁用或启用select元素的选项

064在select元素中实现选项分组

065创建自定义的select元素

066创建自定义的range元素

067创建自定义的文件上传控件

068创建不同颜色的自定义进度条

069创建不同条纹的自定义进度条

070自定义进度条的未完成进度

071自定义细实线风格的进度条

072在进度条上显示完成百分比

073在条纹进度条上添加动画

074使用进度条展示多类别占比

075在卡片上添加文本和图像

076在卡片顶部或底部添加图像

077设置卡片的背景图像或颜色

078将多张卡片组合排列在一起

079以分隔风格排列多张卡片

080以瀑布流风格排列多张卡片

081使用媒体对象布局图像和文本

082使用嵌套的媒体对象布局元素

083在水平方向上排列多个媒体对象

084在媒体对象的右侧放置图像

085在垂直方向上居中放置媒体对象的图像

086通过左右滑动轮播多幅图像

087自定义暂停或继续轮播图像

088自定义轮播的左右按钮功能

089使用无序列表进行分页处理

090去掉在无序列表上的默认圆点

091在同一行上排列多个列表项

092在水平方向上排列多个列表项

093在列表组中创建多色列表项

094在列表组中创建链接列表项

095创建条纹交错的表格数据行

096创建黑灰交错的表格数据行

097自定义表格数据行的背景颜色

098在默认表格的周围添加边框线

099去掉表格数据行间的默认线条

100创建小间隙的紧凑格式表格

101创建可滚动数据的响应式表格

102在鼠标悬停时高亮显示数据行

103创建含有灰色背景的模态框

104强制模态框在垂直方向上居中

105禁止显示模态框的灰色背景

106在单击徽章时显示弹出框

107在鼠标悬浮时显示弹出框

108单击元素外区域关闭弹出框

109在图像上添加工具提示框

110允许在工具提示框上使用标签

111创建定时关闭的信息提示框

112在信息提示框上添加关闭按钮

113在信息提示框上添加转圈动画

114在信息提示框上添加生长动画

115在垂直方向上排列导航菜单

116设置水平导航菜单靠右对齐

117禁用在导航菜单中的部分菜单

118使用导航菜单作为选项卡标签

119创建与选项卡等宽的导航菜单

120使用胶囊导航菜单切换选项卡

121设置垂直导航菜单同步滚动条

122在胶囊菜单上创建下拉菜单

123在水平导航栏上添加Logo

124在导航栏上创建响应式菜单

125在导航栏上创建下拉菜单

126设置导航栏的下拉菜单右对齐

127在垂直导航栏上内嵌子菜单

128在导航栏上创建上弹子菜单

129在垂直导航栏上添加折叠按钮

130在页面底部固定水平导航栏

131设置水平导航菜单同步滚动条

132在下拉菜单中设置分组标题

133创建从按钮右侧弹出的子菜单

134创建从按钮左侧弹出的子菜单

135创建从分隔按钮弹出的子菜单

136使用w类设置元素的宽度百分比

137使用h类设置元素的高度百分比

138使用m类设置元素的外边距

139使用p类设置元素的内边距

140使用mx类调整元素左右外边距

141使用px类调整元素左右内边距

142在水平方向上倒序排列子元素

143在垂直方向上倒序排列子元素

144在水平方向上等距排列子元素

145按照权重数字排列多个子元素

146指定子元素分配容器剩余宽度

147设置子元素均分容器剩余宽度

148将剩余宽度设置为元素右边距

149将剩余宽度设置为元素左边距

150以包裹方式排列多个子元素

151以非包裹方式排列多个子元素

152以反转包裹方式排列多个子元素

153设置多个子元素在垂直方向上居中排列

154设置多个子元素靠齐容器底部

155设置单个子元素在垂直方向上居中排列

156设置单个子元素靠齐容器底部

157在垂直方向上拉伸多个子元素

158在垂直方向上拉伸单个子元素

159在同一行上创建相等宽度的列

160在同一行上创建等宽响应式列

161在同一行上创建不同宽度的列

162在同一行上创建不等宽响应式列

163在等宽列中嵌套不等宽响应式列

164使用偏移量重置响应式列的位置

第2部分Vue.js代码

165使用双大括号实现文本插值

166使用vtext单向绑定文本

167使用vhtml绑定HTML代码

168使用vpre使元素跳过编译

169使用vbind绑定数据属性

170使用vbind绑定方法属性

171使用vbind为元素绑定单个class

172使用vbind通过数组绑定多个class

173使用vbind通过JSON绑定多个class

174使用vbind通过对象数组绑定class

175使用vbind为元素绑定单个style

176使用vbind为元素绑定内联style

177使用vbind通过数组绑定多个style

178使用vbind通过对象绑定多个style

179使用vbind绑定元素的只读属性

180使用vbind绑定details元素的属性

181使用vbind在列表选项上绑定索引

182使用vbind在列表选项上绑定对象

183在vbind上加中括号实现动态绑定

184使用vmodel双向绑定数据

185使用vmodel创建一组单选按钮

186使用vmodel创建一组复选框

187使用vmodel创建单选下拉列表

188使用vmodel创建多选下拉列表

189使用vmodel获取range滑块值

190使用vmodel获取时间选择器值

191使用vmodel获取日期选择器值

192使用vmodel获取月份选择器值

193使用vmodel获取周数选择器值

194使用vmodel.lazy控制同步时机

195使用vmodel.number转换数值

196使用vif移除或添加元素

197使用velse根据条件增删元素

198使用velseif根据多条件增删元素

199在template上使用vif渲染分组

200使用vshow隐藏或显示元素

201使用vonce限定元素仅渲染一次

202在复选框中设置truevalue属性

203使用vfor输出包含索引的列表项

204使用vfor在模板中输出对象数组

205使用vfor输出对象的各个属性值

206使用vfor输出对象的属性名和属性值

207使用vfor根据指定次数进行迭代

208使用vfor迭代简单的声明式数组

209使用vfor在下拉列表中添加选项

210使用vfor在选项中添加对象数组

211使用嵌套vfor输出二维数组成员

212使用嵌套vfor筛选二维数组成员

213在嵌套vfor语句中使用vif语句

214使用vfor根据数组创建多个超链接

215使用vfor全选或全不选复选框

216使用vfor启用或禁用所有复选框

217使用vfor设置偶数或奇数行背景

218使用von在元素上绑定单个事件

219使用von在元素上绑定多个事件

220在von上加中括号动态绑定事件

221在von的事件方法中使用$event

222使用von在内联语句中调用方法

223使用von在列表项上添加删除按钮

224使用von统计textarea的复制次数

225使用von监听textarea的粘贴内容

226使用von监听文件是否加载成功

227使用von实现图像跟随鼠标移动

228使用von在元素上添加右键菜单

229使用von自定义单击按钮的样式

230使用von高亮指示鼠标所在数据行

231使用von为表格添加双击编辑功能

232使用stop修饰符阻止事件向上冒泡传递

233使用capture修饰符改变冒泡顺序

234使用capture和stop修饰符定制事件

235使用prevent修饰符阻止默认事件

236使用self修饰符限定仅响应自身事件

237使用self和prevent修饰符定制事件

238使用once修饰符限定事件仅响应一次

239使用按键修饰符自定义按键响应

240使用系统修饰键定义按键事件行为

241使用exact修饰符定制系统键响应

242使用鼠标左右按键修饰符定制事件

243使用全局对象自定义按键修饰符

244使用computed属性筛选字符串

245使用computed属性自定义筛选

246使用computed属性按序排列数组

247使用computed属性查询*值和*小值

248使用computed属性计算平均值

249使用computed属性计算合计金额

250使用computed属性代替orderBy

251使用computed属性代替filterBy

252使用computed属性代替limitBy

253使用computed属性代替groupBy

254使用computed属性动态设置样式

255使用watch属性监听数据属性变化

256使用watch属性限制输入框输入字符

257使用watch属性监听动画的数字变化

258使用watch属性创建二级联动下拉列表

259使用局部过滤器使字母全部大写

260使用局部过滤器保留两位小数

261使用局部过滤器使人民币金额大写

262使用全局过滤器格式化货币金额

263使用全局过滤器格式化中文日期

264串联多个过滤器格式化货币金额

265使用带参数过滤器格式化表达式

266创建并使用全局组件

267使用组件构造器创建全局组件

268在全局组件中使用template标签

269在全局组件中根据数组创建列表项

270使用native为组件添加原生事件

271在全局组件中创建单个slot

272在全局组件中创建具名slot

273在全局组件中创建作用域slot

274在vslot中使用中括号动态指定slot

275在vslot中使用default调用匿名slot

276在全局组件中使用渲染函数

277在表格中插入自定义全局组件

278在全局组件内部调用外部方法

279在外部调用全局组件内部方法

280从全局组件内部向外部传递数据

281从外部向全局组件内部传递数据

282在全局组件中实现双向传递数据

283在全局组件内部访问外部数据

284在外部访问全局组件内部数据

285在全局组件中实现todolist功能

286在全局组件中绑定输入框数据

287在全局组件中控制属性继承

288在全局组件中绑定复选框数据

289在全局组件中绑定滑块数据

290在全局组件中添加混入对象

291在Vue实例中混入同名混入对象

292使用全局混入对象创建Vue实例

293创建并使用局部组件

294在根实例外部创建局部组件

295在script标签中创建局部组件

296使用component动态指定组件

297在父子组件中使用$listeners

298创建并使用全局指令

299创建并使用带参数的全局指令

300创建并使用多参数的全局指令

301在全局指令中设置动态参数

302在全局指令中使用bind等钩子函数

303在全局指令的钩子函数中添加事件

304创建并使用未指定钩子的全局指令

305创建并使用局部指令

306使用ref和$refs操作DOM元素

307使用transition淡入淡出显示图像

308使用transition按照角度旋转图像

309使用transition淡入和平移图像

310在首次渲染时自动执行transition

311使用type设置animation或transition

312使用transition切换多个元素

313在transition中设置元素过渡模式

314使用transition实现多个组件切换

315在全局组件中使用transition

316在transitiongroup中实现增删过