Vue et jquery sont-ils compatibles ?

compatible vue et jquery. Une utilisation raisonnable de JQuery et Vue ne provoquera pas de conflit car ils ont des objectifs différents. Vue se concentre sur la liaison de données et les composants de vue, tandis que JQuery se concentre sur les requêtes asynchrones et les effets d'animation et JQuery et Vue peuvent effectuer des tâches asynchrones de manière très efficace lorsqu'ils travaillent ensemble.

L'environnement d'exploitation de ce tutoriel : système windows7, version jquery1.10.2&&vue2.9.6, ordinateur Dell G3.

L'utilisation raisonnable de JQuery et VueJS ne provoquera pas de conflit car ils ont des objectifs différents. VueJS se concentre sur la liaison de données et les composants d'affichage, et JQuery se concentre sur les requêtes asynchrones et les effets d'animation. Si vous utilisez JQuery + VueJS pour développer, vous devez traiter tous les composants HTML via JQuery après que Vue les ait rendus. Lorsque vous utilisez JQuery, vous devez éviter de manipuler directement le DOM, mais l'application d'une animation est autorisée.

JQuery et VueJS peuvent travailler ensemble pour effectuer des tâches asynchrones de manière très efficace. Tout d'abord, une requête Ajax est émise via JQuery. Après avoir reçu les données JSON transmises par le serveur, les données sont ensuite liées au composant via Vue. traitement de l'animation. L'ensemble du processus est aussi naturel que des nuages ​​​​qui coulent et de l'eau qui coule.

Comment utiliser jquery dans le projet vue

En supposant que vous avez déjà utilisé vue-cli pour construire l'échafaudage de développement, regardez ensuite ce qui suit.

1. NPM installez jQuery, exécutez le code suivant dans le répertoire racine du projet

npm install jquery --save

2 Configuration Webpack

Trouvez le fichier webpack.base.conf.js dans le répertoire de construction sous le répertoire racine du projet et utilisez ce qui suit. code au début pour introduire webpack , car le fichier n'est pas référencé par défaut.

var webpack = require('webpack')

Ensuite, ajoutez un morceau de code dans 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: [// ...... ]
}

Ensuite, de nombreuses autres solutions disent simplement de l'importer dans main.js, mais l'interrogateur a emboîté le pas.

Importez jQuery dans main.js

import 'jquery'

Utilisez $ ou jQuery dans le composant Vue pour écrire le code permettant de faire fonctionner le dom

Puis démarrez le projet

npm run dev

Mais la compilation a signalé une erreur :

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

Que se passe-t-il sur? ? ?

3. Vérification d'eslint

Les amis intelligents ont dû penser que cela est lié à eslint Oui, la prochaine étape que vous devez faire à ce moment est de modifier le fichier .eslintrc.js dans le répertoire racine du module. exports du fichier modifié, ajoutez simplement une paire clé-valeur jquery: true to env, c'est-à-dire :

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

Encore une foisnpm run dev ，OK了，没报错，赶紧去组件里试一下吧，console.log($('选择器')), vous constaterez que vous avez utilisé avec succès jQuery pour obtenir le DOM.

Pour plus de connaissances sur la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!