vueとjqueryは互換性がありますか?

vue は jquery と互換性があります。 JQuery と Vue は焦点が異なるため、合理的に使用すると競合が発生しません。Vue はデータ バインディングとビュー コンポーネントに重点を置き、JQuery は非同期リクエストとアニメーション効果に重点を置き、JQuery と Vue は連携すると非同期タスクを非常に効率的に完了できます。

このチュートリアルの動作環境: Windows7 システム、jquery1.10.2&&vue2.9.6 バージョン、Dell G3 コンピューター。

JQuery と VueJS は焦点が異なるため、合理的に使用すると競合が発生しません。VueJS はデータ バインディングとビュー コンポーネントに焦点を当て、JQuery は非同期リクエストとアニメーション効果に焦点を当てます。 VueJS 開発に JQuery を使用する場合、Vue がレンダリングした後ですべての HTML コンポーネントを JQuery 経由で処理する必要があります。JQuery を使用する場合は、DOM を直接操作することは避けるべきですが、アニメーションの適用は許可されています。

JQuery と VueJS は連携して非同期タスクを非常に効率的に完了できます。まず、JQuery を通じて Ajax リクエストが発行されます。サーバーから渡された JSON データを受信した後、データは Vue を通じてコン​​ポーネントにバインドされます。最後に、JQuery アニメーション処理を実行するとき、プロセス全体は雲の流れや水の流れと同じくらい自然です。

vue プロジェクトで jquery を使用する方法

vue-cli を使用して開発スキャフォールディングを構築したと仮定して、次に見てください。次の 。

1. NPM で jQuery をインストールし、プロジェクト ルート ディレクトリで次のコードを実行します

npm install jquery --save

2. Webpack 構成

プロジェクト ルートのビルド ディレクトリで webpack.base を見つけますこのファイルはデフォルトでは参照されないため、最初に次のコードを使用して webpack を導入します。

var webpack = require('webpack')

次に、 module.exports にコードを追加します。

// 原有代码resolve: {
 extensions: ['.js', '.vue', '.json'],
 alias: {'vue$': 'vue/dist/vue.esm.js','@': resolve('src')
 }
},// 添加代码plugins: [
 new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery","window.jQuery": "jquery"
 })
],// 原有代码module: {
 rules: [// ...... ]
}

次に、他の多くのソリューションでは、それを main.js にインポートするだけで十分であると言っていますが、質問者はそうしました。

main.js に jQuery をインポートします

import 'jquery'

Vue コンポーネントで $ または jQuery を使用して dom を操作するコードを記述します

次にプロジェクトを開始します

npm run dev

しかし、コンパイルでエラーが報告されました:

http://eslint.org/docs/rules/no-undef '$' is not defined or
http://eslint.org/docs/rules/no-undef 'jQuery' is not defined

何が起こっているのでしょうか? ? ?

3. eslint チェック

賢い友人なら、これは eslint に関連していると考えたはずです。はい、現時点で行う必要がある次のステップは、.eslintrc.js ファイルを変更することです。変更後、ファイルの module.exports にキーと値のペア jquery: true for env を追加するだけです:

env: { // 原有
 browser: true, // 添加
 jquery: true
 }

Againnpm run dev, OKエラーは報告されません。すぐに行ってください。コンポーネント console.log($('selector')) で試してみると、jQuery を使用して DOM を正常に取得できることがわかります。

プログラミング関連の知識について詳しくは、プログラミング入門をご覧ください。 ！

以上がvueとjqueryは互換性がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。