引言

如果說(shuō)vue是前端工程化使用較多的骨架，那么JavaScript就是我們的前端的細(xì)胞。MVVM模式讓我們體驗(yàn)到前端開(kāi)發(fā)的便攜，無(wú)需再過(guò)多的考慮DOM的操作。而vue的漸進(jìn)式開(kāi)發(fā)（逐步引用組件，按需引入），也讓許多新手前端開(kāi)發(fā)人員逐步繞過(guò)對(duì)jQuery的學(xué)習(xí)。jQuery需要記憶的內(nèi)容頗多，這也讓jQuery變得不那么受新入行開(kāi)發(fā)者喜歡。

 在前端工程化的需求沒(méi)有普及的時(shí)候，許多公司使用的是后端渲染技術(shù)，為了能夠?qū)崿F(xiàn)友好的前端交互效果，需要寫好大量的jQuery、JavaScript和CSS，所以到目前還是有大量的公司維護(hù)和使用jQuery。

 前端工程化讓許多人看到了開(kāi)發(fā)的效率，但公司還是需要維護(hù)產(chǎn)品線，所以解決jQuery在vue的使用是每位前端工程師的必經(jīng)之路，畢竟從零造輪子是一個(gè)非常痛苦耗時(shí)的事。

 今天我們提供兩種方法引用，切記二選其一。

方法一：在webpage中引入JQ（推薦）

在vue中安裝jQuery組件

老鄉(xiāng)已經(jīng)默認(rèn)你的已經(jīng)使用vue-cli腳手架進(jìn)行操作了。至于如何使用vue-cli，可以進(jìn)入vue的官網(wǎng)中查看相關(guān)開(kāi)發(fā)文檔。

1.在項(xiàng)目終端中輸入npm install jquery -save-dev
2.在build文件夾中找到webpack.base.conf.js文件，打開(kāi)，在第一行添加

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.在同樣這個(gè)文件中（webpack.base.conf.js）的module.exports里添加：

plugins: [
 new webpack.ProvidePlugin({
  $:"jquery",
  jQuery:"jquery",
  "windows.jQuery":"jquery"
 })
 ],

1.在入口文件main.js中輸入：

import $ from 'jQuery'

提示：這里無(wú)需再下面注冊(cè)，有些IDE會(huì)提示標(biāo)紅，無(wú)需處理。

查看執(zhí)行效果

在app.vue中寫一個(gè)案例

這種方法是在開(kāi)發(fā)中比較看好的方法，方便易用。同樣，也有不希望在所有的頁(yè)面都引用到j(luò)Query，這樣我們就會(huì)考慮到按需引用。

方法二：按需引用jQuery方法

這種方法只在單頁(yè)面中使用jQuery時(shí)進(jìn)行操作。這種方法適用于極個(gè)別的交互頁(yè)面中。

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">請(qǐng)點(diǎn)擊我</p>
 </div>
</template>
<script>
import $ from 'jquery'
export default {
 name: 'app',
 mounted () {
  $('.jj').click(function(){
   alert(1)
  })
 }
}
</script>

結(jié)語(yǔ)

方法千萬(wàn)條，道理第一條。本文是我在開(kāi)發(fā)中遇到j(luò)q無(wú)法引入后查閱資料后整理的方法。但不論是什么方法，我們最終的目標(biāo)都是要完成項(xiàng)目的需求。技術(shù)的革新速度和時(shí)代的發(fā)展飛快，jQuery也在不斷發(fā)展，許多人覺(jué)得這類語(yǔ)言過(guò)于復(fù)雜多變，但這就如同學(xué)習(xí)python一樣，開(kāi)始“學(xué)習(xí)一時(shí)爽，一直學(xué)習(xí)一直爽”，但到達(dá)技術(shù)瓶頸時(shí)，你會(huì)發(fā)現(xiàn)總會(huì)讓人很棘手。我就多次遇到vue處理的問(wèn)題而就迫使我去閱讀底層技術(shù)。所以，學(xué)無(wú)止境，有效努力，持續(xù)輸出。

以上所述是小編給大家介紹的使vue實(shí)現(xiàn)jQuery調(diào)用的兩種方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

最新評(píng)論