快捷導(dǎo)航

在vue中使用?jquery?的兩種方法小結(jié)

更新時(shí)間：2022年08月02日 08:37:55 作者：RxnNing

這篇文章主要介紹了在vue中使用?jquery?的兩種方法小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue中使用 jquery的方法

方法一

直接在vue項(xiàng)目的index.html中引入外部鏈接即可

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

不推薦：因?yàn)橐胪獠挎溄踊蛘咭胂螺d好的js文件這種方式不參與打包，需要下載到本地的jquery文件引入才可

方法二

安裝依賴包

npm i jquery --save-d

全局引入

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

局部引入

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

vue和jquery混用注意事項(xiàng)

拿起html的時(shí)候，在數(shù)據(jù)處理上，瘋狂懷念數(shù)據(jù)雙向綁定，vue又成了我的必選項(xiàng)，但是有些業(yè)務(wù)場景其實(shí)并不適用vue，所以最終技術(shù)選型為vue+jquery混合使用，結(jié)合兩邊的優(yōu)點(diǎn)，大大提高開發(fā)效率。

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

vue+jquery應(yīng)該如何使用呢？

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

二、創(chuàng)建一個(gè)vue實(shí)例，因?yàn)槊總€(gè)vue應(yīng)用都是通過創(chuàng)建一個(gè)vue實(shí)例開始的

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

三、vue和jquery之間互相調(diào)用

例如現(xiàn)在用jq寫了一個(gè)方法，從后臺(tái)獲取數(shù)據(jù)，并且把獲取到的數(shù)據(jù)要賦值給vue對(duì)象里的子對(duì)象

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就是代表上面的實(shí)例，wordCardStyles是vm實(shí)例里面的一個(gè)對(duì)象，然后把請求結(jié)果賦值給這里對(duì)象
? ? ? ? ? ? }
? ? ? ? }
? ? })
}

vm實(shí)例里面如何調(diào)用外部的jq方法呢？

直接把方法寫在vm的方法里調(diào)用即可

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

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: