ホームページ >ウェブフロントエンド >jsチュートリアル >Bootstrap プロジェクトから jQuery を削除する方法

Bootstrap プロジェクトから jQuery を削除する方法

小云云オリジナル: 2018-01-01 10:34:431898ブラウズ

Bootstrap は、インターネット上で最も人気のあるフロントエンド開発フレームワークです。この記事では、Bootstrap プロジェクトから jQuery を削除する方法を説明します。それが必要な友人が参考になれば幸いです。

Bootstrap は、インターネット上で最も人気のあるフロントエンド開発フレームワークです。これを使用する以外に、応答性の高い Web サイトを構築するためのより速い方法を私は知りません。

しかし、Web ページに動的関数を追加するためのツールが vue.js になって以来。ブートストラップへの適応は困難になります。これには技術的な問題が伴うためです。それは正しい。 jQueryについて話しています。

これは jQuery に対する批判ではありません。プロジェクトで既に Vue などのフレームワークを使用している場合、jQuery を導入すると、

オーバーヘッドの増加という重大な欠点があることを認識しているだけです。 jQuery を使用すると Web ページが 30 KB 増加します。

webpackなどのパッケージ化ツールを使用する場合、jqueryの設定も難しくなります。

Vue を使用して DOM 操作を処理する場合、Jquery によって DOM が再び台無しになることは望ましくありません。

jQuery と Bootstrap JavaScript プラグインを完全に削除します

これは、Vue.js 組み込みプラグインを使用して Bootstrap の Javascript プラグインを置き換える素晴らしいプロジェクト vue-strap です。したがって、モーダル、カルーセル、タブなどのオリジナルの Bootstrap プラグインをプロジェクトで使用できます。これらはすべて Vue に基づいてサポートを提供しています

ただし、Bootstrap プラグインのごく一部のみを使用する場合は、 ins では、Vue を自分でカスタマイズできると思います。js プラグインも非常に簡単です。そうすれば、vue-strap 全体を参照する必要がなくなります (翻訳者注: 私は Vue.js とその他の必要なプラグインをいくつか使用しました。 )

以下に説明します。vue の使い方を学び、一般的に使用される Bootstrap プラグインを最初からセットアップしましょう

vue.js を利用した独自の Bootstrap ウィジェットを作成します

Tab

始めますタブ付き。各タブにはパネルが伴います。タブの表示/非表示は、タブとパネルの class 属性の active を追加/削除することで実現され、これが 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>

変数 tab を使用して現在選択されているタブを追跡し、この変数を使用してタブとその対応するパネルの Class 属性でアクティブを追加/削除します。すべてのタブのクリックイベントを使用してタブ変数を更新します

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

最後に、js コード:

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

できる改善と最適化がいくつかありますが、この記事を簡潔にするために省略します。

このタブコードを Web サイト全体で再利用できるように、JavaScript 表現を Vue コンポーネントにラップします。

非常にコンパクトなテンプレートとして。タブと対応するパネルの内容を配列プロパティに配置し、v-for を使用してタブとパネルのリストを出力します。

モーダルボックス

モーダルダイアログボックスは私のお気に入りの Bootstrap プラグインの 1 つです。タブと同様に、クラス内のを追加/削除することでモーダルボックスの表示/非表示を制御します。そして、これらは開くボタンと閉じるボタンによってトリガーされます。

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

Bootstrap モーダルボックスの場合、ダイアログボックスに動的なインラインスタイルが必要です。これは、計算されたプロパティから「オブジェクトスタイル」を受け取ることによって機能する v-bind:style ディレクティブを介して行われます。計算されたプロパティが依存する変数が変更されるたびに、それ自体が再計算されます:

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

モーダルボックスが DOM フレームに出入りするときに、Vue のトランジションアニメーションを使用してグラデーションを強化することもできます。

jQuery を廃止し、次の Bootstrap プロジェクトで Vue.js の使用を検討してください

Bootstrap で jQuery の代わりに vue.js を使用できると言っているわけではありませんが、そうすべきです。なぜなら、vue-strap を使用する場合でも、プラグインを自分でパッケージ化する場合でも、Vue の次のような魅力的な利点を感じることができるからです:

jQuery と比較して、vue の DOM オペレーティングシステムは、より高い UI パフォーマンスと応答性を実現します。

Vue は、小さく独立した UI ブロックを構築するために設計されています。したがって、Vue で書かれたウィジェットは jquery よりも拡張しやすく、保守性も優れています。

ブートストラップウィジェットには乱雑なテンプレートがあることで有名なので、Vue では、jsx、シングルページアプリケーションコンポーネント、レンダリング関数、クラスとスタイルのバインディングなどの柔軟なテンプレートオプションを使用してこの問題を軽減できます。

Vue は IE8 をサポートしていないことに注意してください。ただし、次のブートストラッププロジェクトで IE8 を使用することを検討してもよいでしょう。

Bootstrap プロジェクトから jQuery を削除する方法

関連記事