Vue et jquery sont-ils compatibles ?

青灯夜游
Libérer: 2021-11-19 13:51:55
original
5032 Les gens l'ont consulté

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.

Vue et jquery sont-ils compatibles ?

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
Copier après la connexion

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')
Copier après la connexion

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: [// ...... ]
}
Copier après la connexion

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'
Copier après la connexion

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
Copier après la connexion

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
Copier après la connexion

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
 }
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal