Sind Vue und JQuery kompatibel?

vue- und jquery-kompatibel. Eine sinnvolle Verwendung von JQuery und Vue führt nicht zu Konflikten, da Vue sich auf Datenbindung und Ansichtskomponenten konzentriert, während JQuery sich auf asynchrone Anforderungen und Animationseffekte konzentriert und JQuery und Vue bei der Zusammenarbeit sehr effizient asynchrone Aufgaben erledigen können.

Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery1.10.2&&vue2.9.6-Version, Dell G3-Computer.

Die sinnvolle Verwendung von JQuery und VueJS führt nicht zu Konflikten, da sich VueJS auf Datenbindung und Ansichtskomponenten konzentriert, während JQuery sich auf asynchrone Anforderungen und Animationseffekte konzentriert. Wenn Sie JQuery + VueJS zum Entwickeln verwenden, müssen Sie alle HTML-Komponenten über JQuery verarbeiten, nachdem Vue sie gerendert hat. Bei der Verwendung von JQuery sollten Sie eine direkte Manipulation des DOM vermeiden, das Anwenden von Animationen ist jedoch zulässig.

JQuery und VueJS können sehr effizient zusammenarbeiten, um asynchrone Aufgaben auszuführen. Nach dem Empfang der vom Server übergebenen JSON-Daten werden die Daten dann über Vue ausgeführt Die Animationsverarbeitung ist so natürlich wie fließende Wolken und fließendes Wasser.

So verwenden Sie JQuery im Vue-Projekt

Angenommen, Sie haben Vue-Cli bereits zum Erstellen des Entwicklungsgerüsts verwendet. Schauen Sie sich als Nächstes Folgendes an.

1. NPM installiert jQuery, führt den folgenden Code im Projektstammverzeichnis aus

npm install jquery --save

2. Webpack-Konfiguration

Suchen Sie die Datei webpack.base.conf.js im Build-Verzeichnis unter dem Projektstammverzeichnis und verwenden Sie Folgendes Code am Anfang, um webpack einzuführen, da auf die Datei standardmäßig nicht verwiesen wird.

var webpack = require('webpack')

Dann fügen Sie ein Stück Code in module.exports hinzu,

// 原有代码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: [// ...... ]
}

Dann sagen viele andere Lösungen einfach, es in main.js zu importieren, aber der Fragesteller folgte diesem Beispiel.

JQuery in main.js importieren

import 'jquery'

Verwenden Sie $ oder jQuery in der Vue-Komponente, um den Code für den Betrieb des Doms zu schreiben

Dann starten Sie das Projekt

npm run dev

Aber die Kompilierung hat einen Fehler gemeldet:

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

Was ist los? An? ? ?

3. Eslint-Check

Kluge Freunde haben bestimmt gedacht, dass es mit Eslint zusammenhängt. Ja, der nächste Schritt, den Sie zu diesem Zeitpunkt ausführen müssen, besteht darin, die Datei .eslintrc.js im Stammverzeichnis zu ändern. Exporte der geänderten Datei. Fügen Sie einfach ein Schlüssel-Wert-Paar jquery: true zu env hinzu, das heißt:

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

Auch hier werden Sie feststellen, dass Sie jQuery erfolgreich verwendet haben, um das DOM abzurufen. npm run dev ，OK了，没报错，赶紧去组件里试一下吧，console.log($('选择器'))

Weitere Kenntnisse zum Thema Programmierung finden Sie unter:

Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonSind Vue und JQuery kompatibel?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!