如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)


Posted in jQuery onJuly 17, 2017

Bootstrap是网上最流行的前端开发框架. 除了用它,我不知道还有其他更快的方法去构建一个响应式的网站。

但是自从我向网页添加动态功能的工具变成vue.js后。适应bootstrap变得困难起来。因为这带来了一些技术包袱。没错。我说的就是jquery。

这并不是在抨击jquery,我只是意识到,当你已经在项目里使用一些像Vue的框架后,再引入jQuery就会出现一些显著的缺点:

增加开销。jQuery将会使你的网页增加30KB。

在使用诸如webpack一类的打包工具时,jquery也会很难与之进行配置。

当你使用Vue负责DOM操作时,你不会愿意Jquery再来将DOM搞的一团糟。

彻底移除jQuery和Bootstrap的javascript插件

这里有一个很棒的项目 vue-strap ,它使用Vue.js 内置的插件来替换Bootstrap中的Javascript插件。因此你可以使用你项目中原有的Bootstrap插件,比如 modals, carousel, tabs, etc. 他们都是基于 Vue 提供支持.

但是如果你只是用一小部分的Bootstrap插件的话, 我觉得自己定制Vue.js的插件也很容易,那样的话你也不需要将整个vue-strap都引用进来(译者注:我就是只用了Vue.js和几个其他需要的plugin  :)

下面让我展示一下怎么使用vue,从零开始设置一些常用的Bootstrap 插件

自己动手做由vue.js驱动的Bootstrap小部件

选项卡

我们将从选项卡开始。每一个选项卡都附带着他的面板. 选项卡的显示/隐藏是通过添加/移除选项卡与面板的class属性中的active来实现的,而这就是Vue将要处理的工作。

<div id="tabs">
 <ul class="nav nav-tabs">
  <li><a>Tab 1</a></li>
  <li><a>Tab 2</a></li>
 </ul>
 <div class="tab-content">
  <div class="tab-pane">Pane 1</div>
  <div class="tab-pane">Pane 2</div>
 </div>
</div>

我们用一个变量tab来跟踪当前被选中的选项卡,并用这个变量来添加/移除选项卡与其对应面板的Class属性中的active:

<div id="tabs">
 <ul class="nav nav-tabs">
  <li v-bind:class="{ active: tab === 1}"><a>Tab 1</a></li>
  <li v-bind:class="{ active: tab === 2}"><a>Tab 2</a></li>
 </ul>
 <div class="tab-content">
  <div class="tab-pane" v-bind:class="{ active: tab === 1}">
   Pane 1</div>
  <div class="tab-pane" v-bind:class="{ active: tab === 2}">
   Pane 2</div>
 </div>
</div>

我们还需要在所有的选项卡上监听点击事件,用来更新我们的tab变量

<div id="tabs">
 <ul class="nav nav-tabs">
  <li v-bind:class="{ active: tab === 1}" v-on:click="tab = 1">
   <a>Tab 1</a>
  </li>
  <li v-bind:class="{ active: tab === 2}" v-on:click="tab = 2">
   <a>Tab 2</a>
  </li>
 </ul>
 <div class="tab-content">
  <div class="tab-pane" v-bind:class="{ active: tab === 1}">
   Pane 1</div>
  <div class="tab-pane" v-bind:class="{ active: tab === 2}">
   Pane 2</div>
 </div>
</div>

最后,js代码:

new Vue({
 el: '#tabs',
 data: { 
  // Tab 1 is selected by default
  tab: 1 
 }
});

这里还有一些我们可以进行的改进与优化,但为了使本文简介的缘故就不展开了:

将JavaScript代表包装成一个Vue组件,以便我们能在整个网站重用这个选项卡代码。

作为一个真正紧凑的模板。将选项卡和对应的面板内容放入一个数组属性中,然后用 v-for来打印出选项卡与面板的列表来。

模态框

 模态对话框是我最喜欢的Bootstrap 插件之一。与选项卡类似,我们通过添加/移除一个in的类来控制模态框的显示/隐藏。而这些通过一个打开和关闭按钮来触发,

<div id="app" v-bind:class=" { 'modal-open': show }">
 <button class="btn btn-primary" v-on:click="toggle">
  Open
 </button>
 <div class="modal" tabindex="-1" v-bind:class="{ in: show }"
  v-bind:style="modalStyle">
  <div class="modal-dialog">
   <div class="modal-content">
    <div class="modal-body">
     <p>Vue-powered modal!</p>
    </div>
   <div class="modal-footer">
    <button class="btn" v-on:click="toggle">Close</button>
   </div>
  </div>
 </div>
 </div>
</div>

对于一个Bootstrap 的模态框,我们需要在对话框上有一个动态的内联样式。 我们通过 v-bind:style 指令来实现,这个指令通过从一个计算属性中接收一个“对象样式”进行的。每次计算属性所依赖的变量变化时,他自己都会重新计算一遍:

new Vue({
 el: '#app',
 data: { 
  show: false 
 },
 methods: {
  toggle() { this.show = !this.show; }
 },
 computed: {
  modalStyle() {
   return this.show ? 
    { 'padding-left': '0px;', display: 'block' } : {};
  }
 }
});

你也可以通过使用Vue的过渡动画在模态框进入和离开DOM时渐变,来增强你的模态框。

让jQuery退休吧,考虑下在下一个Bootstrap 项目中使用Vue.js

不是说你可以在Bootstrap中用vue.js代替jquery,而是说你的确应该这么做。因为不管你是使用vue-strap或自己封装插件,你都可以感到Vue的如下诱人的优势:

与jQuery对比,vue的DOM操作系统允许较高的UI性能和响应性。

Vue是被设计用来建立小型,孤立的UI块的。所以vue编写的小部件将比jquery的更容易扩展,可维护性更好。

Bootstrap的小部件有着臭名昭著的混乱模板, 所以vue可以使用他灵活的模板选项来缓解这个问题,如jsx,单页应用组件,渲染功能,类与样式绑定,等等。

请记住,Vue不支持IE8,但是你可能会考虑在下一个bootstrap项目中使用他。

以上所述是本文的全部内容,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
jquery平滑滚动到顶部插件使用详解
May 08 jQuery
jQuery 实现双击编辑表格功能
Jun 19 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
jQuery UI实现动画效果代码分享
Aug 19 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 #jQuery
JQuery EasyUI的一些常用组件
Jul 12 #jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 #jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 #jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 #jQuery
使用jQuery实现动态添加小广告
Jul 11 #jQuery
jquery.validate.js 多个相同name的处理方式
Jul 10 #jQuery
You might like
header()函数使用说明
2006/11/23 PHP
深入PHP许愿墙模块功能分析
2013/06/25 PHP
PHP永久登录、记住我功能实现方法和安全做法
2015/04/27 PHP
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
新鲜出炉的js tips提示效果
2011/04/03 Javascript
jQuery :first选择器使用介绍
2013/08/09 Javascript
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
javascript:void(0)使用探讨
2013/08/27 Javascript
JS的get和set使用示例
2014/02/20 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
2014/03/19 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
ActiveX控件与Javascript之间的交互示例
2014/06/04 Javascript
易被忽视的js事件问题总结
2016/05/14 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
浅谈jQuery操作类数组的工具方法
2016/12/23 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
2017/09/26 Javascript
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
python中使用mysql数据库详细介绍
2015/03/27 Python
Python中unittest模块做UT(单元测试)使用实例
2015/06/12 Python
Python实现基于多线程、多用户的FTP服务器与客户端功能完整实例
2017/08/18 Python
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
python实现推箱子游戏
2020/03/25 Python
详解Pandas之容易让人混淆的行选择和列选择
2019/07/10 Python
Python3 字典dictionary入门基础附实例
2020/02/10 Python
windows上彻底删除jupyter notebook的实现
2020/04/13 Python
使用keras内置的模型进行图片预测实例
2020/06/17 Python
通过自学python能找到工作吗
2020/06/21 Python
英国复古和经典球衣网站:Vintage Football Shirts
2018/10/05 全球购物
优秀毕业生求职信范文
2014/01/02 职场文书
委托协议书范本
2014/04/22 职场文书
技术股份合作协议书
2014/10/05 职场文书
2015年保送生自荐信
2015/03/24 职场文书
监理中标通知书
2015/04/16 职场文书
楚门的世界观后感
2015/06/03 职场文书
2015大学迎新标语
2015/07/16 职场文书