如何在Bootstrap项目中用Vue.js替代jQuery

Posted 2021-04-08 21CTO

Bootstrap是 Web 开发最受欢迎的框架之一，没有比它开发响应式网站项目效率最高了。

随着Vue.js的逐渐流行，更多人们用它来控制页面元素，实现强大互动功能。而jQuery出现了一些技术落后，总结如下：

1、体积。jQuery将给页面增加30KB的尺寸；

2、如果你使用WebPack等打包工具时，如果有jQuery会比较麻烦；

3、当人们用Vue控制DOM时，就不想再用jQuery了。

如果我们用的是Vue，而且也用了Bootstrap框架，那还需要jQuery吗？

其实有一种选择就是：删除jQuery和Bootstrap的JS组件。

在Vue中，有一个很好的项目叫做vue-strap（https://github.com/yuche/vue-strap），它用Vue内置的插件替换了Bootstrap中的jQuery插件。所以，我们可以拥有Vue提供的所有Bootstrap组件，如模式窗口，轮播，标签，选项卡等。

比如你只是用Bootstrap的一些小组件，如果换成Vue.js定制插件是挺简单的事情，也不需要刚才说的vue-strap。

以下展示如何使用Vue.js从头配置一些常见的Bootstrap组件。

Tabs选项卡

先从选项卡开始。每个选项卡，都有一个附带的选项卡窗体。其显示/隐藏是通过active属性控制，在选项卡和相关窗体中添加或移除类来实现的。Vue.js这样处理：

<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处理在选项目卡和窗体的添加或删除功能。

<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>

接下来是javascript：

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

为使这篇文章简洁，我们还可以做如下一些改进：

把JavaScript打包到Vue组件中，这样在整个网站都可以重复使用Tabs代码。

要想有真正紧凑的模板和超级快的呈现效果，需要将选项卡和选项卡窗体的内容放到数组数据属性中，并用v-for打印出选项卡以及选项卡窗体的列表项。

模式对话框

模式（也称为模态）对话框是我最喜欢的Bootstrap插件之一，它与Tabs类似，我们通过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>

对于Bootstap的modal对话框，需要处理对话框中的动态内联样式表。我们通过v-bind:style 计算属性来接收“样式对象“来实现。每次变量显示更改时，calculated属性将重新计算：

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时，使用淡出淡入动画来增强效果。

怎么样，在下一个项目里使用Vue，移动jQuery。不管是用vue-strap还是自己写组件，都是可以的。

下面来总结一下Vue.js的动人优势：

1、与jQuery相比，Vue的DOM更新系统更出色，不管是UI性能还是响应能力均是；

2、Vue专为构建小型且独立的UI区块而设计，在开始时就专注于此，因此更擅长此任务，其内置的小组件比jQuery插件更有扩展性与可维护性；

3、Bootstrap的插件也比较混乱，通过Vue的灵活模板选项，如JSX，单页组件，渲染函数组、类和样式绑定等，能够有效减轻这种情况。

但是Vue也有一些缺点，它不支持IE 8浏览器。希望本文帮你在下一个Bootstrap项目中成功应用Vue.js，祝你成功。

编译：老夏

相关阅读：