使vue實現(xiàn)jQuery調(diào)用的兩種方法
引言
如果說vue是前端工程化使用較多的骨架,那么JavaScript就是我們的前端的細胞。MVVM模式讓我們體驗到前端開發(fā)的便攜,無需再過多的考慮DOM的操作。而vue的漸進式開發(fā)(逐步引用組件,按需引入),也讓許多新手前端開發(fā)人員逐步繞過對jQuery的學(xué)習(xí)。jQuery需要記憶的內(nèi)容頗多,這也讓jQuery變得不那么受新入行開發(fā)者喜歡。
在前端工程化的需求沒有普及的時候,許多公司使用的是后端渲染技術(shù),為了能夠?qū)崿F(xiàn)友好的前端交互效果,需要寫好大量的jQuery、JavaScript和CSS,所以到目前還是有大量的公司維護和使用jQuery。
前端工程化讓許多人看到了開發(fā)的效率,但公司還是需要維護產(chǎn)品線,所以解決jQuery在vue的使用是每位前端工程師的必經(jīng)之路,畢竟從零造輪子是一個非常痛苦耗時的事。
今天我們提供兩種方法引用,切記二選其一。
方法一:在webpage中引入JQ(推薦)
在vue中安裝jQuery組件
老鄉(xiāng)已經(jīng)默認(rèn)你的已經(jīng)使用vue-cli腳手架進行操作了。至于如何使用vue-cli,可以進入vue的官網(wǎng)中查看相關(guān)開發(fā)文檔。
1.在項目終端中輸入npm install jquery -save-dev
2.在build文件夾中找到webpack.base.conf.js文件,打開,在第一行添加
var webpack = require('webpack')
效果:
// webpack.base.conf.js var webpack = require('webpack') 'use strict' const path = require('path') const utils = require('./utils') const config = require('../config')
3.在同樣這個文件中(webpack.base.conf.js)的module.exports里添加:
plugins: [ new webpack.ProvidePlugin({ $:"jquery", jQuery:"jquery", "windows.jQuery":"jquery" }) ],
1.在入口文件main.js中輸入:
import $ from 'jQuery'
提示:這里無需再下面注冊,有些IDE會提示標(biāo)紅,無需處理。
查看執(zhí)行效果
在app.vue中寫一個案例
這種方法是在開發(fā)中比較看好的方法,方便易用。同樣,也有不希望在所有的頁面都引用到j(luò)Query,這樣我們就會考慮到按需引用。
方法二:按需引用jQuery方法
這種方法只在單頁面中使用jQuery時進行操作。這種方法適用于極個別的交互頁面中。
jQuery的安裝和配置
1.和“方法一”中的操作一致,在終端中輸入
npm install jquery --save-dev
2.找到build中webpack.base.conf文件
// webpack.base.conf module.exports = { resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'jquery': path.resolve(__dirname, '../node_modules/jquery/src/jquery') } } }
jq的引用
在APP.vue中或者需要使用的地方
<template> <div> <p class="jj">請點擊我</p> </div> </template> <script> import $ from 'jquery' export default { name: 'app', mounted () { $('.jj').click(function(){ alert(1) }) } } </script>
結(jié)語
方法千萬條,道理第一條。本文是我在開發(fā)中遇到j(luò)q無法引入后查閱資料后整理的方法。但不論是什么方法,我們最終的目標(biāo)都是要完成項目的需求。技術(shù)的革新速度和時代的發(fā)展飛快,jQuery也在不斷發(fā)展,許多人覺得這類語言過于復(fù)雜多變,但這就如同學(xué)習(xí)python一樣,開始“學(xué)習(xí)一時爽,一直學(xué)習(xí)一直爽”,但到達技術(shù)瓶頸時,你會發(fā)現(xiàn)總會讓人很棘手。我就多次遇到vue處理的問題而就迫使我去閱讀底層技術(shù)。所以,學(xué)無止境,有效努力,持續(xù)輸出。
以上所述是小編給大家介紹的使vue實現(xiàn)jQuery調(diào)用的兩種方法,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回復(fù)大家的!
相關(guān)文章
淺談Vue static 靜態(tài)資源路徑 和 style問題
這篇文章主要介紹了淺談Vue static 靜態(tài)資源路徑 和 style問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11vue+echarts+datav大屏數(shù)據(jù)展示及實現(xiàn)中國地圖省市縣下鉆功能
這篇文章主要介紹了vue+echarts+datav大屏數(shù)據(jù)展示及實現(xiàn)中國地圖省市縣下鉆,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-11-11vue項目keepAlive配合vuex動態(tài)設(shè)置路由緩存方式
vue項目keepAlive配合vuex動態(tài)設(shè)置路由緩存方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04Vue.js中this如何取到data和method里的屬性詳解
methods屬性是一個對象,通常我們會在這個對象中定義很多的方法,下面這篇文章主要給大家介紹了關(guān)于Vue.js中this如何取到data和method里的屬性,需要的朋友可以參考下2022-12-12Vant?Weapp組件picker選擇器初始默認(rèn)選中問題
這篇文章主要介紹了Vant?Weapp組件picker選擇器初始默認(rèn)選中問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-01-01vue uniapp 防止按鈕多次點擊的三種實現(xiàn)方式
最近的項目完成后,在性能優(yōu)化階段需要做按鈕的防止重復(fù)點擊功能,本文主要介紹了vue uniapp 防止按鈕多次點擊的三種實現(xiàn)方式,具有一定的參考價值,感興趣的可以了解一下2023-08-08