欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使vue實現(xiàn)jQuery調(diào)用的兩種方法

 更新時間:2019年05月12日 09:31:32   作者:lianjy357  
這篇文章主要介紹了使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問題

    這篇文章主要介紹了淺談Vue static 靜態(tài)資源路徑 和 style問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • vue+echarts+datav大屏數(shù)據(jù)展示及實現(xiàn)中國地圖省市縣下鉆功能

    vue+echarts+datav大屏數(shù)據(jù)展示及實現(xiàn)中國地圖省市縣下鉆功能

    這篇文章主要介紹了vue+echarts+datav大屏數(shù)據(jù)展示及實現(xiàn)中國地圖省市縣下鉆,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-11-11
  • vue項目keepAlive配合vuex動態(tài)設(shè)置路由緩存方式

    vue項目keepAlive配合vuex動態(tài)設(shè)置路由緩存方式

    vue項目keepAlive配合vuex動態(tài)設(shè)置路由緩存方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • Vue.js中this如何取到data和method里的屬性詳解

    Vue.js中this如何取到data和method里的屬性詳解

    methods屬性是一個對象,通常我們會在這個對象中定義很多的方法,下面這篇文章主要給大家介紹了關(guān)于Vue.js中this如何取到data和method里的屬性,需要的朋友可以參考下
    2022-12-12
  • Vant?Weapp組件picker選擇器初始默認(rèn)選中問題

    Vant?Weapp組件picker選擇器初始默認(rèn)選中問題

    這篇文章主要介紹了Vant?Weapp組件picker選擇器初始默認(rèn)選中問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • Vuejs實現(xiàn)購物車功能

    Vuejs實現(xiàn)購物車功能

    這篇文章主要為大家詳細介紹了Vuejs實現(xiàn)購物車功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-11-11
  • vue uniapp 防止按鈕多次點擊的三種實現(xiàn)方式

    vue uniapp 防止按鈕多次點擊的三種實現(xiàn)方式

    最近的項目完成后,在性能優(yōu)化階段需要做按鈕的防止重復(fù)點擊功能,本文主要介紹了vue uniapp 防止按鈕多次點擊的三種實現(xiàn)方式,具有一定的參考價值,感興趣的可以了解一下
    2023-08-08
  • vue 獲取元素額外生成的data-v-xxx操作

    vue 獲取元素額外生成的data-v-xxx操作

    這篇文章主要介紹了vue 獲取元素額外生成的data-v-xxx操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • Vue監(jiān)聽屬性圖文實例詳解

    Vue監(jiān)聽屬性圖文實例詳解

    監(jiān)聽屬性可以針對某個屬性進行監(jiān)聽,當(dāng)監(jiān)聽的屬性的值發(fā)生了變化,則會執(zhí)行相應(yīng)的函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue監(jiān)聽屬性的相關(guān)資料,需要的朋友可以參考下
    2021-11-11
  • vue組件生命周期詳解

    vue組件生命周期詳解

    這篇文章主要為大家詳細介紹了vue組件生命周期,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-11-11

最新評論