如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
作者:mrr 发布时间:2023-07-02 17:08:10
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项目中使用他。
以上所述是本文的全部内容网站的支持!
来源:http://www.21cto.com/article/1301
猜你喜欢
- 通常情况下,定义函数时都会选择有参数的函数形式,函数参数的作用是传递数据给函数,令其对接收的数据做具体的操作处理。在使用函数时,经常会用到形
- MySQL ERROR 1045 (28000): Access denied for user 'root'@'l
- 一、数据库的操作1、新建数据库2、打开数据库右键或者双击就可以了。3、删除数据库右键–>删除数据库4、修改数据库右键–>数据库属
- 介绍本篇将介绍Python3中的迭代器与生成器,描述可迭代与迭代器关系,并实现自定义类的迭代器模式。迭代的概念上一次输出的结果为下一次输入的
- 1、查找表结构,判断要加入的列是否已存在2、如果不存在,则执行添加 CREATE PROCEDURE `mysql_sp_add_
- 定义字典 dic = {'a':"hello",'b':"how",
- 本文实例讲述了Python3实现并发检验代理池地址的方法。分享给大家供大家参考,具体如下:#encoding=utf-8#author: w
- 认证系统auth auth模块是Django提供的标准权限管理系统,可以提供用户身份认证, 用户组和权限管理。auth可以和adm
- 一、正则表达式概述 如果原来没有使用过正则表达式,那么可能对这个术语和概念会不太熟悉。不过,它们并不是您想象的那么新奇。请回想一下在硬盘上是
- 一、前言前文是针对普通的字符串数据进行处理。今天,我们要讲解的textwrap库,是对多文本进行处理的库。比如对于段落的缩进,填充,截取等,
- 作为一个从 PHP 转 Java 的人,发现 alibaba 的 arthas 很好用。通过 arthas 的 redefine 命令,可以
- 一、前言构建命令行程序很酷:命令行可以按照我们的设定完成相应的工作,相比 GUI 界面程序,无需花费大量时间设计 GUI 界面。但要使命令行
- 说明1、当函数的参数太多,需要简化时,使用functools.partial可以创建一个新的函数。2、这个新的函数可以固定原始函数的部分参数
- 深度优先算法(DFS 算法)是什么?寻找起始节点与目标节点之间路径的算法,常用于搜索逃出迷宫的路径。主要思想是,从入口开始,依次搜寻周围可能
- 大家好,我是J哥。在我们的工作中,面临着大量的重复性工作,通过人工方式处理往往耗时耗力易出错。而Python在自动化办公方面具有极大的优势,
- 前言python中进行面向对象编程,当在子类的实例中调用父类的属性时,由于子类的__init__方法重写了父类的__init__方法,如果在
- 假设我有一个DataFrame(df)如下:name age idmike 10 1tony 14 2lee 20 3现在我想把id 放到最
- np.newaxisnp.newaxis 的功能是增加新的维度,但是要注意 np.newaxis 放的位置不同,产生的矩阵形状也不同。通常按
- 背景:现如今不管什么服务和应用基本都可以在docker里跑一跑了,但是在我个人的印象中,像数据库这种比较重要大型且数据容易受伤的应用是不适合
- 原来在一本书上看到过,从多个tfrecord文件中读取数据的方法,今天想用在网上找了一下,现在记录一下,免得自己以后忘记了又不好找,tfre