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

网络编程 2025/1/12 佚名

2 0 1

极乐门资源网 Design By www.ioogu.com

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项目中使用他。

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

vuejs中使用bootstrap

标签：

vuejs中使用bootstrap

极乐门资源网 Design By www.ioogu.com

极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

极乐门资源网 Design By www.ioogu.com

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

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

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

vuejs中使用bootstrap

nodejs密码加密中生成随机数的实例代码

Javascript ES6中对象类型Sets的介绍与使用详解

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

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接