ホームページ > 記事 > ウェブフロントエンド > VueにJQを導入する方法
VueにJQを導入する方法
- 王林オリジナル
- 2023-05-18 09:09:074864ブラウズ
フロントエンド開発の継続的な発展に伴い、React、Vue、Angular などのフロントエンド テクノロジー フレームワークの種類はますます増えています。その中でも、Vue は現在最も人気のあるフロントエンド フレームワークの 1 つであり、強力なコンポーネントベースの開発、便利なテンプレート構文、優れたレンダリング パフォーマンスという利点を備えています。さらに、Vue では jQuery を簡単に導入し、jQuery プラグインやメソッドを有効に活用してより豊かな効果を実現することもできます。
それでは、Vue で jQuery を導入して使用するにはどうすればよいでしょうか?ここで簡単に紹介します。
- jQuery のインストール
まず、Vue プロジェクトに jQuery をインストールする必要があります。
コマンド ライン ウィンドウに次のコマンドを入力できます:
npm install jquery --save
インストールが完了すると、jQuery が package.json ファイルに自動的に追加されます。
- jQuery の導入
Vue プロジェクトに jQuery を導入するには、次の 2 つの方法があります。
(1)require メソッド
次の 2 つの方法があります。 main で使用 jQuery を導入するには .js で require を使用します:
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
window.jQuery = require('jquery')
require('bootstrap/dist/js/bootstrap.min')
new Vue({
render: h => h(App),
}).$mount('#app')(2) Index.html に
を直接導入します。index.html に jQuery を直接導入することもできます:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue App</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div id="app"></div> </body> </html>
- jQuery の使い方
Vue プロジェクトに jQuery を導入すると、楽しく使うことができます。以下は、ブートストラップのツールチップ プラグインの使用例です:
<template>
<div class="container">
<button type="button" class="btn btn-primary mt-5"
data-toggle="tooltip" title="这是一段提示文本">
Hover over me
</button>
</div>
</template>
<script>
export default {
mounted() {
//在mounted方法中初始化tooltip插件
$('[data-toggle="tooltip"]').tooltip()
}
}
</script>Vue プロジェクトで DOM 要素を操作するには、jQuery の $ 記号も使用する必要があることに注意してください。使用するときは$。
この時点で、Vue プロジェクトに jQuery を簡単に導入して使用できるようになります。このような操作の後、Vue のコンポーネント開発と豊富な jQuery プラグインおよびメソッドをより適切に組み合わせることができ、プロジェクト開発と最適化により多くの可能性がもたらされ、フロントエンド開発がより便利になります。
以上がVueにJQを導入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。