印前

用Vue.js摒弃Bootstrap项目中的jQuery– JS Dojo – Medium

印前 · 2017-03-30翻译 · 547阅读 原文链接

Bootstrap是网络上最受欢迎的web网页框架。我不知道比它更好的方法构建一个响应式web项目。

但是,现在由于我的项目工具选择使用Vue.js添加动态功能到一个页面。调整Bootstrap变得越来越困难,因为它带来一些额外的担子,我指jQuery。

这不是对jQuery的抨击,只是认识到,当你已经使用Vue这样的框架时,再添加jQuery有些明显的缺点:

  • 负载。 jQuery给网页增大30KB的大小。
  • jQuery可以在类似Webpack的捆绑软件上配置。
  • 当你使用Vue来管理DOM,你就不希望jQuery弄乱。

如果你正在使用Vue,但是你真的想要使用Bootstrap的CSS框架,你将面临一个艰难的选择:妥协使用jQuery是否值得。

在你决定之前,这里有另一选择...

完全丢弃jQuery和Bootstrap的JavaScript插件

有个伟大的项目vue-strap,它使用Vue.js-built插件代替Bootstrap的jQuery插件。因此你可以使用由Vue提供的所有Bootstrap插件如弹窗,旋转,选项卡等。

然而,在作者写这篇文章时,vue-strap仍然只支持Vue1.x和Bootstrap 3.x。

但是如果你仅仅只需要使用少量Bootstrap组件,我认为使用定制的Vue.js插件很简单,这样也不需要vue-strap了。

让我为你展示如何使用Vue.js从头开始设置几个常用Bootstrap插件。

基于Vue.js制作小部件

选项卡

我们将以选项卡为例做为开始。对于所有的选项卡,都必须有一个附带的选项卡窗格。通过对选项卡和选项窗格添加/删除'active'的class来实现显示隐藏。所以这就是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_跟踪选中的选项卡,并使用这个为每个选项卡和选项卡窗格来添加/移除"active"class:

Pane 1
Pane 2


我们还需要在每个选项卡上监听更新我们的tab变量的点击事件:

Pane 1
Pane 2


最终的JavaScript的代码:

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


以上代码还可以做一些完善,出于让本篇文章简洁的目的,我没有列出来。

*  将JavaScript封装成Vue组件,这样就可以在整个网站上重用选项卡代码。
*  对于真正简洁的模板和超快速渲染,将选项卡和选项卡窗格内容放进一个数组数据属性中再使用_v-for_打印出选项卡/选项窗格列表。

#### 弹窗

弹窗是我最喜欢的Bootstrap插件.类似选项卡,当打开或关闭按钮时,我们通过添加/删除一个"in"的class来显示/隐藏弹窗。


使用Bootstrap我们需要在弹窗上动态内联样式。用Vue实现同样功能,可以用_v-bind:style_指令,它从一个计算属性中接收一个"样式对象" 。该计算属性在每次依赖变量_show_会重执行

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

你还可以通过使用Vue Transition来强调弹窗,使其在进入、离开DOM时展现淡入淡出动画效果。

考虑在下一个Bootstrap项目中使用Vue.js并摒弃jQuery

在Bootstrap中你不仅可以用Vue.js替代jQuery,也许你应该替代了。无论你使用vue-strap或者使用自己造的轮子,我都列举了Vue一些迷人的优点:

  • Vue的DOM更新系统允许更高级的UI性能,而且比起jQuery来响应能力更强。
  • Vue志于构建小型,独立的UI组件,并且在这方面完成得非常棒,所以Vue构建的组件比jQuery更具可扩展性和维护性。
  • 众所周知Bootstrap组件模板混乱,所以通过Vue灵活的模板选择,可以帮助它减轻这个问题,正如JSX一样,单个页面组件,渲染函数,类以及样式绑定等等。

时刻记住Vue不支持IE8,但是你可以在下个Bootstrap项目中考虑使用它。


使用Vue.js Developers Newsletter获取最新Vue.js文章,教程和超酷的项目。

相关文章