Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge of "can vue be compatible with jquery". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Vue is compatible with jquery. The reasonable use of JQuery and Vue will not cause conflict, because their emphasis is different, Vue focuses on data binding and view components, JQuery focuses on asynchronous requests and animation effects, and JQuery and Vue work together to accomplish asynchronous tasks very efficiently.

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

The proper use of JQuery and VueJS does not cause conflict, because they have different priorities, VueJS focuses on data binding and view components, and JQuery focuses on asynchronous requests and animation. If you are developing with JQuery + VueJS, be sure to use JQuery after Vue renders all the HTML components, and avoid directly manipulating DOM when using JQuery, but applying animation is allowed.

JQuery and VueJS cooperate with each other to complete asynchronous tasks very efficiently. First, send Ajax requests through JQuery, receive the JSON data transmitted by the server, then bind the data to components through Vue, and finally animate it by JQuery. The whole process is as natural as clouds and streams.

Methods of using jquery in vue projects

Assuming that you have built the development scaffolding using vue-cli, next, take a look at the following.

1. NPM installs jQuery, and runs the following code in the project root directory

Npm install jquery-save

2. Webpack configuration

Find the webpack.base.conf.js file in the build directory under the root of the project, and introduce webpack at the beginning with the following code, because the file has no reference by default.

Var webpack = require ('webpack')

Then add a piece of code to module.exports

/ / original code resolve: {extensions: ['.js', '.vue', '.json'], alias: {'vue$':' vue/dist/vue.esm.js','@': resolve ('src')}}, / / add code plugins: [new webpack.ProvidePlugin ({$: "jquery", jQuery: "jquery", jquery: "jquery", "window.jQuery": "jquery"})] / / original code module: {rules: [/ /. ]}

Then many other solutions are said to be imported in main.js, but the subject follows suit.

Import jQuery into main.js

Import 'jquery'

The code for operating dom is written using $or jQuery in the Vue component

Then start the project.

Npm run dev

But the compiler 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

The witty friend must have thought that it has something to do with eslint. Yes, the next step you need to do at this time is to modify the .eslintrc.js file in the root directory. In the module.exports of the modified file, add a key value pair jquery: true for env, that is:

Env: {/ / original browser: true, / / add jquery: true}

Once again, npm run dev, OK, no error, go to the component to try it, console.log ($('selector')), you will find that you have successfully used jQuery to get DOM.

This is the end of the content of "can vue be compatible with jquery". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.