如何将 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 相关文章推荐
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
Jquery把获取到的input值转换成json
May 15 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
jQuery实现滚动效果
Nov 17 jQuery
基于jquery的on和click的区别详解
Jan 15 jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
jquery实现二级导航下拉菜单效果实例
May 14 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
我的论坛源代码(八)
2006/10/09 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
给大家分享几个常用的PHP函数
2017/01/15 PHP
Laravel中正确地返回HTTP状态码方法示例
2019/09/10 PHP
Laravel 框架路由原理与路由访问实例分析
2020/04/14 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
详解php反序列化
2020/06/10 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
驱动事件的addEvent.js代码
2007/03/27 Javascript
循环 vs 递归浅谈
2013/02/28 Javascript
js对象与打印对象分析比较
2013/04/23 Javascript
jQuery检测鼠标左键和右键点击的方法
2015/03/17 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
Bootstrap实现登录校验表单(带验证码)
2016/06/23 Javascript
js严格模式总结(分享)
2016/08/22 Javascript
JS实现的简单表单验证功能示例
2017/10/13 Javascript
使用vue实现一个电子签名组件的示例代码
2020/01/06 Javascript
JavaScript组合模式---引入案例分析
2020/05/23 Javascript
多个Vue项目部署到服务器的步骤记录
2020/10/22 Javascript
Python中Collection的使用小技巧
2014/08/18 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
python实现随机梯度下降法
2020/03/24 Python
Python如何基于smtplib发不同格式的邮件
2019/12/30 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
浅谈Python协程
2020/06/17 Python
keras 多任务多loss实例
2020/06/22 Python
Python读取ini配置文件传参的简单示例
2021/01/05 Python
Python实现给PDF添加水印的方法
2021/01/25 Python
夜大毕业生自我鉴定
2013/10/31 职场文书
党员培训思想汇报
2014/01/07 职场文书
询价采购方案
2014/06/09 职场文书
社区志愿者培训方案
2014/06/10 职场文书
励志演讲稿600字
2014/08/21 职场文书
原料仓管员岗位职责
2015/04/01 职场文书
教师个人师德工作总结2015
2015/05/12 职场文书
SQL Server中交叉联接的用法详解
2021/04/22 SQL Server