So entfernen Sie jQuery aus Ihrem Bootstrap-Projekt

Bootstrap ist das beliebteste Front-End-Entwicklungsframework im Internet. In diesem Artikel erfahren Sie, wie Sie jQuery aus Ihrem Bootstrap-Projekt entfernen. Freunde, die es benötigen, können darauf verweisen.

Bootstrap ist das beliebteste Front-End-Entwicklungsframework im Internet. Abgesehen davon kenne ich keine andere schnellere Möglichkeit, eine responsive Website zu erstellen.

Aber seitdem mein Tool zum Hinzufügen dynamischer Funktionen zu Webseiten vue.js wurde. Die Anpassung an Bootstrap wird schwierig. Denn das bringt einiges technisches Gepäck mit sich. Das ist richtig. Ich spreche von Jquery.

Hiermit soll keine Kritik an Jquery geäußert werden, mir ist nur klar, dass die Einführung von jQuery einige erhebliche Mängel mit sich bringt, wenn Sie bereits einige Frameworks wie Vue in Ihrem Projekt verwendet haben:

Erhöhter Overhead. jQuery vergrößert Ihre Webseite um 30 KB.

Bei Verwendung von Verpackungstools wie Webpack ist die Konfiguration von JQuery ebenfalls schwierig.

Wenn Sie Vue zur Abwicklung von DOM-Operationen verwenden, möchten Sie nicht, dass Jquery das DOM erneut durcheinander bringt.

JQuery- und Bootstrap-Javascript-Plugins vollständig entfernen

Hier ist ein großartiges Vue-Strap-Projekt, das die integrierten Vue.js-Plug-Ins verwendet, um Bootstrap zu ersetzen Javascript-Plugin. Daher können Sie in Ihrem Projekt die ursprünglichen Bootstrap-Plug-Ins wie Modals, Karussell, Tabs usw. verwenden. Sie basieren alle auf Vue, um Unterstützung zu bieten.

Aber wenn Sie nur einen kleinen Teil davon verwenden Ich denke, die Bootstrap-Plug-Ins. Es ist auch einfach, das Vue.js-Plug-In selbst anzupassen, sodass Sie nicht auf den gesamten Vue-Strap verweisen müssen (Anmerkung des Übersetzers: Ich habe gerade Vue.js und ein paar andere verwendet Erforderliche Plug-Ins:)

Lassen Sie mich Ihnen zeigen, wie Sie Vue verwenden und einige häufig verwendete Bootstrap-Plug-Ins von Grund auf einrichten

Erstellen Sie Ihre eigenen Bootstrap-Widgets von vue.js

Tabs

Wir beginnen mit Tabs. Jede Registerkarte wird von einem eigenen Bedienfeld begleitet. Das Anzeigen/Ausblenden der Registerkarte erfolgt durch Hinzufügen/Entfernen des Aktiven im Klassenattribut der Registerkarte und des Bedienfelds. Dies ist die Aufgabe von Vue.

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

Wir verwenden eine Variable tab, um die aktuell ausgewählte Registerkarte zu verfolgen, und verwenden diese Variable, um die Registerkarte und das entsprechende Bedienfeld im Klassenattribut aktiv hinzuzufügen/zu entfernen:

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

Wir müssen auch auf Klickereignisse auf allen Registerkarten warten, um unsere Registerkartenvariablen zu aktualisieren

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

Schließlich der js-Code:

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

Es gibt einige Verbesserungen und Optimierungen, die wir hier vornehmen können, aber der Einleitung dieses Artikels halber werde ich das nicht tun erweitern:

Verpacken Sie die JavaScript-Darstellung in eine Vue-Komponente, damit wir diesen Tab-Code auf der gesamten Website wiederverwenden können.

Als wirklich kompakte Vorlage. Fügen Sie die Registerkarten und die entsprechenden Bedienfeldinhalte in eine Array-Eigenschaft ein und drucken Sie dann mit v-for die Liste der Registerkarten und Bedienfelder aus.

Modal-Box

Das Modal-Dialogfeld ist eines meiner Lieblings-Bootstrap-Plugins. Ähnlich wie bei Tabs steuern wir das Anzeigen/Ausblenden von Modalboxen durch Hinzufügen/Entfernen einer In-Klasse. Und diese werden durch eine Schaltfläche zum Öffnen und Schließen ausgelöst.

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

Für ein modales Bootstrap-Feld benötigen wir einen dynamischen Inline-Stil im Dialogfeld. Wir tun dies über die Direktive v-bind:style, die durch den Empfang eines „Objektstils“ von einer berechneten Eigenschaft funktioniert. Jedes Mal, wenn sich die Variablen ändern, von denen die berechneten Attribute abhängen, berechnet er sie selbst neu:

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

Sie können auch in das modale Feld eingeben, indem Sie die Übergangsanimation von Vue verwenden und Farbverlauf beim Verlassen des DOM, um Ihr Modal zu verbessern.

Legen Sie jQuery außer Dienst und erwägen Sie die Verwendung von Vue.js in Ihrem nächsten Bootstrap-Projekt

Das bedeutet nicht, dass Sie vue.js anstelle von jquery in Bootstrap verwenden können, aber dass Sie es tun sollten. Denn unabhängig davon, ob Sie vue-strap verwenden oder das Plug-in selbst packen, können Sie die folgenden attraktiven Vorteile von Vue spüren:

Im Vergleich zu jQuery ermöglicht das DOM-Betriebssystem von vue eine höhere UI-Leistung und Reaktionsfähigkeit.

Vue ist für die Erstellung kleiner, isolierter UI-Blöcke konzipiert. Daher sind in Vue geschriebene Widgets einfacher zu erweitern und besser wartbar als JQuery.

Bootstrap-Widgets haben notorisch unübersichtliche Vorlagen, daher kann Vue dieses Problem mit seinen flexiblen Vorlagenoptionen wie jsx, Einzelseiten-Anwendungskomponenten, Rendering-Funktionen, Klassen- und Stilbindung usw. lindern.

Bitte beachten Sie, dass Vue IE8 nicht unterstützt, aber Sie könnten es in Ihrem nächsten Bootstrap-Projekt verwenden.

Verwandte Empfehlungen:

So zählen Sie die Anzahl der Tabellensummen im Bootstrap

So erstellen Sie ein Rastersystem Bootstrap

bootstrap-table.js fügt eine Methode hinzu, um die Funktion des Springens zu Seite xx zu implementieren

Das obige ist der detaillierte Inhalt vonSo entfernen Sie jQuery aus Ihrem Bootstrap-Projekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!