VueにJQを導入する方法-フロントエンドQ&A-php.cn

(1)require メソッド

(2) Index.html に

ホームページ

ウェブフロントエンド

フロントエンドQ&A

VueにJQを導入する方法

王林

May 18, 2023 am 09:09 AM

フロントエンド開発の継続的な発展に伴い、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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。