這篇文章將為大家詳細(xì)講解有關(guān)如何在Vue項目中使用jquery，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

10年積累的做網(wǎng)站、網(wǎng)站設(shè)計經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先做網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有合川免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

前言

在vue項目中，需要實現(xiàn)某些特定的功能時，使用mvvm模式不易實現(xiàn)。因此引入jquery包來完成需求

jquery中的觸發(fā)事件可以自己定義在mounted中，如果需要使用vue中data的數(shù)據(jù)，直接使用this.msg是無法使用的，需要另外定義const _this = this,

存儲this.之后便可以在事件中使用_this.msg數(shù)據(jù)了。

需求：在品牌處可以輸入，并且會有模糊搜索的下拉框，也可下拉選擇，在輸入完畢后檢驗值是否在下拉框中存在，聚焦時藍(lán)色邊框，change時如果不存在則紅框顯示，存在的話就綠框提示，（就是帶輸入建議的輸入框）

問題：使用element-ui中的el-autocomplete組件，開始通過失焦事件來驗證，但是如果選擇了下拉框某個值時（選中后會將下拉框的值賦給上面的輸入框），失焦事件觸發(fā)會在賦值之前，因此拿失焦時輸入框的值來進(jìn)行判斷時錯誤的，在先改變輸入框的值后再去選擇下拉框,change事件有同樣的bug，沒辦法只能自己引入jquery來完成

點(diǎn)擊輸入框后，通過placeholder判斷是否是品牌下的的輸入框，因為每個輸入框都有這個類，如果是的話則增加一個類名，如果第一次點(diǎn)擊的位置和第二次鼠標(biāo)點(diǎn)擊的位置都是品牌下的輸入框，則執(zhí)行相應(yīng)的邏輯判斷,

在邏輯執(zhí)行完后就刪除其他處同樣的類名inputList

const _this = this 
$('body').delegate('.el-input__inner', 'focus', function(e) { // 因為是動態(tài)生成的，所以選擇這種方式來監(jiān)聽事件
   if (e.target.placeholder === '請輸入品牌') { // 當(dāng)聚焦在品牌輸入框時觸發(fā)
    $(this).addClass('inputList') // 加上一個類名inputList
    if ($('.inputList').length === 2) { // 判斷下一次點(diǎn)擊的位置，當(dāng)從第一個輸入框改值后下一個聚焦位置還是品牌下的輸入框時
     if (!$('.inputList').not(this).val()) {
      $('.inputList').not(this).css('border', '1px solid #67c23a')
     } else {
      let num = 0
      for (let j = 0; j < _this.goodsBrands.length; j++) {
       if ($('.inputList').not(this).val() === _this.goodsBrands[j].value) {
        num += 1
        break
       }
      }
      if (num === 0) {
       _this.$message.error('輸入的品牌不在品牌列表中')
       $('.inputList').not(this).css('border', '1px solid #F56C6C')
      } else {
       $('.inputList').not(this).css('border', '1px solid #67c23a')
      }
     }
    }

    $('.el-input__inner').not(this).removeClass('inputList') // 邏輯執(zhí)行完之后刪除當(dāng)前聚焦位置以外的inputList類，這樣就保持.inputList長度最多為2
   }
  })

此處是為了模擬出輸入框的change事件，因為在聚焦時會添加inputList這個類名。所以這里可以判斷是否是自己想要的位置，如果是的話給一個標(biāo)志位getindex,當(dāng)點(diǎn)擊到品牌下的輸入框時，如果第二次的點(diǎn)擊位置不是品牌其他位置的輸入框，則進(jìn)行邏輯判斷

$(document).click(function(e) { // focus觸發(fā)時也會觸發(fā)這個事件，并且觸發(fā)在focus事件之后
   if (e.target.classList[1] === 'inputList') { // 判斷是否點(diǎn)擊在對應(yīng)位置
    _this.getIndex = 1 // 用于標(biāo)志在聚焦事件觸發(fā)后的下一次點(diǎn)擊是否同樣會觸發(fā)聚焦，如果是則把第二次點(diǎn)擊當(dāng)成第一次重新判斷，等到下一次點(diǎn)擊再來判斷
   } else {
    if (_this.getIndex === 1) { 
     if (!$('.inputList').eq(0).val()) {
      $('.inputList').eq(0).css('border', '1px solid #67c23a')
     } else {
      let num = 0
      for (let j = 0; j < _this.goodsBrands.length; j++) {
       if ($('.inputList').eq(0).val() === _this.goodsBrands[j].value) {
        num += 1
        break
       }
      }
      if (num === 0) {
       _this.$message.error('輸入的品牌不在品牌列表中')
       $('.inputList').eq(0).css('border', '1px solid #F56C6C')
      } else {
       $('.inputList').eq(0).css('border', '1px solid #67c23a')
      }
     }
     $('.el-input__inner').removeClass('inputList')
     _this.getIndex = 0 // 每次第二次點(diǎn)擊了其他位置時，getIndex重新計數(shù)
    }
   }
  })

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

關(guān)于如何在Vue項目中使用jquery就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。