您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“vue能和jquery兼容嗎”的有關(guān)知識(shí),在實(shí)際案例的操作過程中,不少人都會(huì)遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
vue和jquery兼容。JQuery和Vue合理使用并不會(huì)造成沖突,因?yàn)樗麄兊膫?cè)重點(diǎn)不同,Vue側(cè)重?cái)?shù)據(jù)綁定和視圖組件,JQuery側(cè)重異步請(qǐng)求和動(dòng)畫效果;且JQuery與Vue相互配合可以非常高效的完成異步任務(wù)。
本教程操作環(huán)境:windows7系統(tǒng)、jquery1.10.2&&vue2.9.6版本、Dell G3電腦。
JQuery 和 VueJS 合理使用并不會(huì)造成沖突,因?yàn)樗麄兊膫?cè)重點(diǎn)不同,VueJS 側(cè)重?cái)?shù)據(jù)綁定和視圖組件,JQuery 側(cè)重異步請(qǐng)求和動(dòng)畫效果。如果使用JQuery + VueJS 開發(fā),一定要在 Vue 渲染完所有的 HTML組件之后再通過 JQuery 處理,而使用 JQuery 時(shí)應(yīng)避免直接操作 DOM ,但是應(yīng)用動(dòng)畫是允許的。
JQuery 與 VueJS 相互配合可以非常高效的完成異步任務(wù),首先通過 JQuery 發(fā)出 Ajax 請(qǐng)求,接受到服務(wù)端傳遞的 JSON 數(shù)據(jù)后,再通過 Vue 將數(shù)據(jù)綁定到組件上,最后由 JQuery 進(jìn)行動(dòng)畫處理,整個(gè)過程就如行云流水般自然。
vue項(xiàng)目中使用jquery的方法
假設(shè)你已經(jīng)使用vue-cli搭建好了開發(fā)的腳手架,接下來,看下面。
1、NPM 安裝 jQuery,項(xiàng)目根目錄下運(yùn)行以下代碼
npm install jquery --save
2、webpack配置
在項(xiàng)目根目錄下的build目錄下找到webpack.base.conf.js文件,在開頭使用以下代碼引入webpack,因?yàn)樵撐募J(rèn)沒有引用。
var webpack = require('webpack')
然后在module.exports中添加一段代碼,
// 原有代碼resolve: { extensions: ['.js', '.vue', '.json'], alias: {'vue$': 'vue/dist/vue.esm.js','@': resolve('src') } },// 添加代碼plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", jquery: "jquery","window.jQuery": "jquery" }) ],// 原有代碼module: { rules: [// ...... ] }
然后許多其他解決辦法到此就說在main.js里導(dǎo)入就可以了,然而題主照著做了。
main.js里導(dǎo)入jQuery
import 'jquery'
在Vue組件里使用 $ or jQuery 寫了操作dom的代碼
接著啟動(dòng)項(xiàng)目
npm run dev
但是編譯卻報(bào)錯(cuò)了:
http://eslint.org/docs/rules/no-undef '$' is not defined or http://eslint.org/docs/rules/no-undef 'jQuery' is not defined
咋回事呢???
3、eslint 檢查
機(jī)智的朋友肯定想到跟eslint有關(guān),沒錯(cuò),這時(shí)候需要做的下一步就是要修改根目錄下.eslintrc.js文件了,在改文件的module.exports中,為env添加一個(gè)鍵值對(duì) jquery: true 就可以了,也就是:
env: { // 原有 browser: true, // 添加 jquery: true }
再次 npm run dev
,OK了,沒報(bào)錯(cuò),趕緊去組件里試一下吧,console.log($('選擇器'))
,你會(huì)發(fā)現(xiàn)成功使用jQuery獲取到了DOM。
“vue能和jquery兼容嗎”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。