Are vue and jquery compatible?

vue is compatible with jquery. Reasonable use of JQuery and Vue will not cause conflict because they have different focuses. Vue focuses on data binding and view components, while JQuery focuses on asynchronous requests and animation effects; and JQuery and Vue can complete asynchronous tasks very efficiently when working together.

The operating environment of this tutorial: windows7 system, jquery1.10.2&&vue2.9.6 version, Dell G3 computer.

The reasonable use of JQuery and VueJS will not cause conflict because they have different focuses. VueJS focuses on data binding and view components, and JQuery focuses on asynchronous requests and animation effects. If you use JQuery for VueJS development, you must process all HTML components through JQuery after Vue has rendered them. When using JQuery, you should avoid directly manipulating the DOM, but applying animation is allowed.

JQuery and VueJS can work together to complete asynchronous tasks very efficiently. First, an Ajax request is issued through JQuery. After receiving the JSON data passed by the server, the data is then bound to the component through Vue. Finally, JQuery When performing animation processing, the whole process is as natural as flowing clouds and flowing water.

How to use jquery in the vue project

Assuming that you have used vue-cli to build the development scaffolding, next, look at the following .

1. NPM install jQuery, run the following code in the project root directory

npm install jquery --save

2. Webpack configuration

Find webpack.base in the build directory in the project root directory. conf.js file, use the following code at the beginning to introduce webpack, because this file is not referenced by default.

var webpack = require('webpack')

Then add a piece of code in 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: [// ...... ]
}

Then many other solutions say that importing it in main.js is enough, but the questioner did so .

Import jQuery in main.js

import 'jquery'

Use $ or jQuery in the Vue component to write the code to operate the dom

Then start the project

npm run dev

But the compilation reported an error:

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

What's going on? ? ?

3. eslint check

Smart friends must have thought that it is related to eslint. Yes, the next step you need to do at this time is to modify the .eslintrc.js file in the root directory. After modifying In the module.exports of the file, just add a key-value pair jquery: true for env, that is:

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

Againnpm run dev, OK, no error is reported, go quickly Try it in the component, console.log($('selector')), you will find that you can successfully use jQuery to obtain the DOM.

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of Are vue and jquery compatible?. For more information, please follow other related articles on the PHP Chinese website!