Comment supprimer jQuery de votre projet Bootstrap

Bootstrap est le framework de développement front-end le plus populaire sur Internet. Cet article vous expliquera comment supprimer jQuery de votre projet Bootstrap. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

Bootstrap est le framework de développement front-end le plus populaire sur Internet. En dehors de son utilisation, je ne connais aucun autre moyen plus rapide de créer un site Web réactif.

Mais depuis que mon outil pour ajouter des fonctions dynamiques aux pages Web est devenu vue.js. S'adapter au bootstrap devient difficile. Parce que cela s’accompagne d’un certain bagage technique. C'est exact. Je parle de jquery.

Ce n'est pas pour critiquer jquery, je me rends simplement compte que lorsque vous avez déjà utilisé certains frameworks comme Vue dans votre projet, l'introduction de jQuery aura des défauts importants :

Augmentation des frais généraux. jQuery augmentera votre page Web de 30 Ko.

Lors de l'utilisation d'outils de packaging tels que webpack, jquery sera également difficile à configurer.

Lorsque vous utilisez Vue pour gérer les opérations DOM, vous ne voudrez pas que Jquery gâche à nouveau le DOM.

Supprimer complètement les plug-ins javascript jQuery et Bootstrap

Voici un excellent projet vue-strap, qui utilise les plug-ins intégrés de Vue.js pour remplacer Bootstrap Plug-in Javascript. Par conséquent, vous pouvez utiliser les plug-ins Bootstrap d'origine dans votre projet, tels que les modaux, le carrousel, les onglets, etc. Ils sont tous basés sur Vue pour fournir un support.

Mais si vous n'utilisez qu'une petite partie de les plug-ins Bootstrap, je pense qu'il est également facile de personnaliser le plug-in Vue.js vous-même, de cette façon vous n'avez pas besoin de référencer l'intégralité de vue-strap (Note du traducteur : je viens d'utiliser Vue.js et quelques autres plug-ins requis :)

Laissez-moi vous montrer comment utiliser vue et configurer à partir de zéro certains plug-ins Bootstrap couramment utilisés

Créez vos propres widgets Bootstrap par vue.js

Onglets

Nous allons commencer par les onglets. Chaque onglet est accompagné de son panneau. L'affichage/masquage de l'onglet se fait en ajoutant/supprimant l'actif dans l'attribut class de l'onglet et du panneau, et c'est ce que Vue va gérer.

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

Nous utilisons un onglet variable pour suivre l'onglet actuellement sélectionné, et utilisons cette variable pour ajouter/supprimer l'onglet et son panneau correspondant dans l'attribut Classe actif :

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

Nous devons également écouter les événements de clic sur tous les onglets pour mettre à jour nos variables d'onglet

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

Enfin, le code js :

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

Il y a quelques améliorations et optimisations que nous pouvons apporter ici, mais pour le bien de l'introduction de cet article, je ne vais pas m'étendre :

Enveloppez la représentation JavaScript dans un composant Vue afin que nous puissions réutiliser ce code d'onglet sur tout le site Web.

En tant que modèle vraiment compact. Placez les onglets et le contenu du panneau correspondant dans une propriété de tableau, puis utilisez v-for pour imprimer la liste des onglets et des panneaux.

Boîte modale

La boîte de dialogue modale est l'un de mes plugins Bootstrap préférés. Semblable aux onglets, nous contrôlons l’affichage/masquage de la boîte modale en ajoutant/supprimant un en classe. Et ceux-ci sont déclenchés par un bouton d'ouverture et de fermeture,

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

Pour une boîte modale Bootstrap, nous devons avoir un style en ligne dynamique sur la boîte de dialogue. Nous faisons cela via la directive v-bind:style, qui fonctionne en recevant un « style d'objet » à partir d'une propriété calculée. Chaque fois que les variables dont dépendent les attributs calculés changent, il les recalculera lui-même :

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

Vous pouvez également entrer dans la boîte modale en utilisant l'animation de transition de Vue et dégradé en quittant le DOM pour améliorer votre modal.

Retirez jQuery et envisagez d'utiliser Vue.js dans votre prochain projet Bootstrap

Cela ne veut pas dire que vous pouvez utiliser vue.js au lieu de jquery dans Bootstrap, mais que vous devriez le faire. Parce que que vous utilisiez vue-strap ou emballiez le plug-in vous-même, vous pouvez ressentir les avantages attrayants suivants de Vue :

Par rapport à jQuery, le système d'exploitation DOM de vue permet des performances et une réactivité de l'interface utilisateur plus élevées.

Vue est conçu pour créer de petits blocs d'interface utilisateur isolés. Par conséquent, les widgets écrits en Vue seront plus faciles à développer et auront une meilleure maintenabilité que jquery.

Les widgets Bootstrap ont des modèles notoirement compliqués, donc Vue peut atténuer ce problème avec ses options de modèles flexibles, telles que jsx, les composants d'application d'une seule page, les fonctions de rendu, la liaison de classe et de style, etc.

Veuillez garder à l'esprit que Vue ne prend pas en charge IE8, mais vous pourriez envisager de l'utiliser dans votre prochain projet d'amorçage.

Recommandations associées :

Comment compter le nombre de sommes de table dans bootstrap

Comment créer un système de grille dans Bootstrap

bootstrap-table.js ajoute une méthode pour implémenter la fonction de passage à la page xx

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!