如何将 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用noConflict代替$的实现方法
Apr 12 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
Jul 12 jQuery
使用jQuery实现鼠标点击左右按钮滑动切换
Aug 04 jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
jQuery代码优化方法总结
Jan 29 jQuery
jQuery中$原理实例分析
Aug 13 jQuery
详解jQuery中的easyui
Sep 02 jQuery
jquery.pagination.js分页使用教程
Oct 23 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
使用jquery实现轮播图效果
Jan 02 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
php实现memcache缓存示例讲解
2013/12/04 PHP
回帖脱衣服的图片实现代码
2014/02/15 PHP
利用Ext Js生成动态树实例代码
2008/09/08 Javascript
javascript preload&amp;lazy load
2010/05/13 Javascript
基于jquery的滑动样例代码
2010/11/20 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
2016/06/06 Javascript
浅谈时钟的生成(js手写简洁代码)
2016/08/20 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
angular2实现统一的http请求头方法
2018/08/13 Javascript
angular ng-model 无法获取值的处理方法
2018/10/02 Javascript
详解angular2.x创建项目入门指令
2018/10/11 Javascript
JS简单判断是否在微信浏览器打开的方法示例
2019/01/08 Javascript
JavaScript禁用右键单击优缺点分析
2019/01/20 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
[01:31:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第二场 1月10日
2021/03/11 DOTA
Python3实现简单可学习的手写体识别(实例讲解)
2017/10/21 Python
Window10+Python3.5安装opencv的教程推荐
2018/04/02 Python
python下解压缩zip文件并删除文件的实例
2018/04/24 Python
pip install urllib2不能安装的解决方法
2018/06/12 Python
python单向链表的基本实现与使用方法【定义、遍历、添加、删除、查找等】
2019/10/24 Python
Python多线程正确用法实例解析
2020/05/30 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
Html5与App的通讯方式详解
2019/10/24 HTML / CSS
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
化学教师自荐信范文
2013/12/28 职场文书
大二学期个人自我评价
2014/01/13 职场文书
前处理组长岗位职责
2014/03/01 职场文书
大学生个人自荐信样本
2014/03/02 职场文书
贸易经济专业自荐书
2014/06/29 职场文书
责任书格式
2019/04/18 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书
vue @ ~ 相对路径 路径别名设置方式
2022/06/05 Vue.js
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技