在vue中如何使用jquery

這篇文章主要介紹“在vue中如何使用jquery”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“在vue中如何使用jquery”文章能幫助大家解決問題。

vue中使用 jquery的方法

方法一

直接在vue項目的index.html中引入 外部鏈接即可

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

不推薦：因為引入外部鏈接或者引入下載好的js文件這種方式不參與打包，需要下載到本地的jquery文件引入才可

方法二

安裝依賴包

npm i jquery --save-d

全局引入

# 在src/main.js文件
import jquery from 'jquery'
Vue.prototype.$ = jquery

局部引入

#在需要的組件中
import $ from 'jquery'

vue和jquery混用注意事項

拿起html的時候，在數據處理上，瘋狂懷念數據雙向綁定，vue又成了我的必選項，但是有些業務場景其實并不適用vue，所以最終技術選型為vue+jquery混合使用，結合兩邊的優點，大大提高開發效率。

vue和jquery同時引入的時候，jquery操作一定要放在vue后面，要等DOM渲染完成，jquery才能進行DOM事件操作。

vue+jquery應該如何使用呢？

一、首先引入vue文件（cdn或者下載到本地都行），參考vue官方連接 https://cn.vuejs.org/v2/guide/installation.html

二、創建一個vue實例，因為每個vue應用都是通過創建一個vue實例開始的

var vm = new Vue({
      el:'#app',  //實例化對象
      data:{　　         
          wordCardStyles:[]  
          //要存放的數據   
      },     
      methods:{  
          //存放實例方法    
      } 
})

三、vue和jquery之間互相調用

例如現在用jq寫了一個方法，從后臺獲取數據，并且把獲取到的數據要賦值給vue對象里的子對象

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 //這里的vm就是代表上面的實例，wordCardStyles是vm實例里面的一個對象，然后把請求結果賦值給這里對象
            }
        }
    })
}

vm實例里面如何調用外部的jq方法呢？

直接把方法寫在vm的方法里調用即可

var vm = new Vue({
  el:'#app',  //實例化對象
  data:{
      wordCardStyles:[]  //要存放的數據  
    },
    methods:{
        //存放實例方法 
      changeModel(event){
        console.log(event)
        getMainTabelData() //外部的jq方法
        },
    }
})

關于“在vue中如何使用jquery”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。