How to remove jQuery from your Bootstrap project

Bootstrap is the most popular front-end development framework on the Internet. This article will share with you how to remove jQuery from your Bootstrap project. Friends who need it can refer to it. I hope it can help everyone.

Bootstrap is the most popular front-end development framework on the Internet. Apart from using it, I don’t know of any other faster way to build a responsive website.

But since my tool for adding dynamic functions to web pages became vue.js. Adapting to bootstrap becomes difficult. Because this comes with some technical baggage. That's right. I'm talking about jquery.

This is not to criticize jquery, I just realize that when you have already used some frameworks like Vue in your project, there will be some significant shortcomings when introducing jQuery:

Increased overhead. jQuery will increase your web page by 30KB.

When using packaging tools such as webpack, jquery will also be difficult to configure.

When you use Vue to be responsible for DOM operations, you don’t want Jquery to mess up the DOM again.

Completely remove jQuery and Bootstrap javascript plug-ins

Here is a great project vue-strap, which uses Vue.js built-in plug-ins to replace Bootstrap Javascript plug-in. Therefore, you can use the original Bootstrap plug-ins in your project, such as modals, carousel, tabs, etc. They are all based on Vue to provide support.

But if you only use a small part of the Bootstrap plug-ins, I think It’s also easy to customize the Vue.js plug-in yourself, that way you don’t need to reference the entire vue-strap (Translator’s Note: I just used Vue.js and a few other required plug-ins:)

Let me show you how to use vue and set up some commonly used Bootstrap plug-ins from scratch

Make your own Bootstrap widgets driven by vue.js

Tabs

We'll start with tabs. Each tab is accompanied by its panel. The display/hiding of the tab is achieved by adding/removing the active in the class attribute of the tab and panel, and this is what Vue will handle.

<p id="tabs">
 <ul class="nav nav-tabs">
  <li><a>Tab 1</a></li>
  <li><a>Tab 2</a></li>
 </ul>
 <p class="tab-content">
  <p class="tab-pane">Pane 1</p>
  <p class="tab-pane">Pane 2</p>
 </p>
</p>

We use a variable tab to track the currently selected tab, and use this variable to add/remove active in the Class attribute of the tab and its corresponding panel:

<p 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>
 <p class="tab-content">
  <p class="tab-pane" v-bind:class="{ active: tab === 1}">
   Pane 1</p>
  <p class="tab-pane" v-bind:class="{ active: tab === 2}">
   Pane 2</p>
 </p>
</p>

We also need to listen for click events on all tabs to update our tab variables

<p 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>
 <p class="tab-content">
  <p class="tab-pane" v-bind:class="{ active: tab === 1}">
   Pane 1</p>
  <p class="tab-pane" v-bind:class="{ active: tab === 2}">
   Pane 2</p>
 </p>
</p>

Finally, js code:

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

There are some improvements and optimizations we can make, but for the sake of the introduction of this article, we will not expand on them:

Wrap the JavaScript representation into a Vue component so that we can reuse this tab code throughout the website.

As a really compact template. Put the tabs and corresponding panel contents into an array property, and then use v-for to print out the list of tabs and panels.

Modal box

Modal dialog box is one of my favorite Bootstrap plugins. Similar to tabs, we control the display/hiding of modal boxes by adding/removing an in class. And these are triggered by an open and close button,

<p id="app" v-bind:class=" { &#39;modal-open&#39;: show }">
 <button class="btn btn-primary" v-on:click="toggle">
  Open
 </button>
 <p class="modal" tabindex="-1" v-bind:class="{ in: show }"
  v-bind:style="modalStyle">
  <p class="modal-dialog">
   <p class="modal-content">
    <p class="modal-body">
     <p>Vue-powered modal!</p>
    </p>
   <p class="modal-footer">
    <button class="btn" v-on:click="toggle">Close</button>
   </p>
  </p>
 </p>
 </p>
</p>

For a Bootstrap modal box, we need to have a dynamic inline style on the dialog box. We do this via the v-bind:style directive, which works by receiving an "object style" from a computed property. Every time the variables on which the calculated properties depend change, they will be recalculated themselves:

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

You can also enter and leave the modal box by using Vue's transition animation DOM gradient to enhance your modal box.

Retire jQuery and consider using Vue.js in your next Bootstrap project

This is not to say that you can use vue.js instead of jquery in Bootstrap, but that you should. . Because whether you use vue-strap or package the plug-in yourself, you can feel the following attractive advantages of Vue:

Compared with jQuery, vue's DOM operating system allows higher UI performance and Responsiveness.

Vue is designed for building small, isolated UI blocks. Therefore, widgets written in Vue will be easier to expand and have better maintainability than jquery.

Bootstrap widgets have notoriously messy templates, so Vue can alleviate this problem with its flexible template options, such as jsx, single-page application components, rendering functions, class and style binding, etc. .

Please keep in mind that Vue does not support IE8, but you may consider using it in your next bootstrap project.

Related recommendations:

How to count the number of table sums in bootstrap

How to make a grid system in Bootstrap

bootstrap-table.js adds a jump to page xx function implementation method

The above is the detailed content of How to remove jQuery from your Bootstrap project. For more information, please follow other related articles on the PHP Chinese website!