This article mainly introduces the relevant knowledge of "how to use jquery in vue". Xiaobian shows you the operation process through actual cases. The operation method is simple, fast and practical. I hope this article "how to use jquery in vue" can help you. Help everyone solve problems.

How to use jquery in vue

method one

You can directly introduce external links in the index.html of the vue project

#index.html file
  < script src = "https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js" > </script>

Not recommended: Because the introduction of external links or the introduction of downloaded js files does not participate in packaging, it needs to be downloaded to the local jquery file for introduction.

Method Two

Install dependencies

npm  i jquery --save-d

global import

# In src/main.js file
import jquery from 'jquery'
Vue.prototype.$ = jquery

local introduction

#import  $  from  'jquery' in the required component

Notes on mixing vue and jquery

When I picked up html, in terms of data processing, I was crazy about two-way data binding, and Vue became my must-have option again. However, some business scenarios are actually not applicable to Vue, so the final technical selection is the mixed use of Vue + jQuery, combined with The advantages of both sides greatly improve the development efficiency.

When vue and jquery are introduced at the same time, jquery operations must be placed behind vue, and jquery can perform DOM event operations after DOM rendering is completed.

How should vue+jquery be used?

1. First introduce the vue file (cdn or download it locally), refer to the official vue link https://cn.vuejs.org/v2/guide/installation.html

2. Create a vue instance, because every vue application starts by creating a vue instance

var vm = new Vue({
       el: '#app' , //Instantiate the object
       data:{
           wordCardStyles:[]
           // data to store
       },
       methods:{
           // store the instance method
       }
})

3. Call each other between vue and jquery

For example, now use jq to write a method to obtain data from the background, and assign the obtained data to the sub-object in the vue object

function getStyleSheetInfo () {
     $.ajax({
         type: 'post' ,
         dataType: 'json' ,
         url: serverUrl + 'api/styleSheet/findStyleSheetPage' ,
         data: {
             pageNumber: 1 ,
             pageSize: 99 ,
             styleType: '582941287137673216'
         },
         success: function (result) {
              if (result.code == '0000' ) {
                 vm.wordCardStyles = result.data.list // The vm here represents the above instance, wordCardStyles is an object in the vm instance, and then assigns the request result to this object
             }
         }
     })
}

How to call the external jq method in the vm instance?

Write the method directly in the vm method and call it

var vm = new Vue({
   el: '#app' , //Instantiate the object
   data:{
       wordCardStyles:[] //Data to be stored
     },
     methods:{
         //Store instance method
       changeModel( event ){
         console.log( event )
         getMainTabelData() //External jq method
         },
     }
})

The content of "How to use jquery in vue" is introduced here, thank you for reading.