Does vue.js conflict with jquery?

The reasonable use of JQuery and VueJS will not cause conflict because they have different focuses. VueJS focuses on data binding and view components, while JQuery focuses on asynchronous requests and animation effects. Methods for using jquery in vue projects: 1. Use the npm tool to install jquery; 2. Configure the "webpack.base.conf.js" file; 3. Avoid eslint checks; 4. Restart the project and use jquery.

The operating environment of this tutorial: windows7 system, vue3&&jquery3.6.1 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, while JQuery focuses on asynchronous requests and animation effects.

And sometimes when I think about vue.js, I will automatically think of using vue-cli scaffolding to build a project, but sometimes business scenarios are not suitable for using vue-cli. Scaffolding, use vue jquery mixedly at this time. Combining their advantages will greatly improve development efficiency.

How to use jquery in vue project

1. Install jquery

Enter the project root directory Run under: npm install jquery --save

The project’s package.json will automatically add dependency information

2. Two usage methods

2.1 Use it directly in the component

In which component we want to use the jQuery library, we must first use the following command to introduce jquery, and then we can use it normally

import $ from 'jquery'

For example, we To use jQuery in the App.vue component, the example code is as follows:

<script>
  import $ from &amp;#39;jquery&amp;#39;
  export default {
    name: &#39;App&#39;,
    components: {},
    data: function () {
      return {}
    },
    created:function(){
      console.log($(&#39;#app&#39;));
    }
  }
</script>

2.2 Using global variables

If jquery can be used in each component, you must write: import in each component $ from 'jquery';

is more troublesome, so use global variables

1) Introduce

into the webpack.base.conf.js file and find webpack.base in the project .conf.js file, use the following code at the beginning to introduce webpack, because this file is not referenced by default.

let webpack = require('webpack')

Screenshot, as shown below

2) In the same file: webpack.base.conf.js, find module.exports and add a piece of code

// 添加代码
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
jquery: "jquery",
"window.jQuery": "jquery"
})
],

In the screenshot, part of the code is omitted

3) Avoid eslint check

Modify the .eslintrc.js file in the root directory env node, add a key-value pair jquery: true for env.

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

The screenshot is as follows

##4) Restart the project

npm run dev, you can use it directly$

No need to import to reference jQuery, you can use $ directly

console.log($( 'Selector')) , you will find that you have successfully used jQuery to obtain the DOM

or click below, you can see that jq is a function

[Related recommendations:

vuejs video tutorial]

The above is the detailed content of Does vue.js conflict with jquery?. For more information, please follow other related articles on the PHP Chinese website!