在vue中使用?jquery?的兩種方法小結(jié)
vue中使用 jquery的方法
方法一
直接在vue項(xiàng)目的index.html中引入 外部鏈接即可
#index.html文件中 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
不推薦:因?yàn)橐胪獠挎溄踊蛘咭胂螺d好的js文件這種方式不參與打包,需要下載到本地的jquery文件引入才可
方法二
安裝依賴包
npm i jquery --save-d
全局引入
# 在src/main.js文件 import jquery from 'jquery' Vue.prototype.$ = jquery
局部引入
#在需要的組件中 import $ from 'jquery'
vue和jquery混用注意事項(xiàng)
拿起html的時候,在數(shù)據(jù)處理上,瘋狂懷念數(shù)據(jù)雙向綁定,vue又成了我的必選項(xiàng),但是有些業(yè)務(wù)場景其實(shí)并不適用vue,所以最終技術(shù)選型為vue+jquery混合使用,結(jié)合兩邊的優(yōu)點(diǎn),大大提高開發(fā)效率。
vue和jquery同時引入的時候,jquery操作一定要放在vue后面,要等DOM渲染完成,jquery才能進(jìn)行DOM事件操作。
vue+jquery應(yīng)該如何使用呢?
一、首先引入vue文件(cdn或者下載到本地都行),參考vue官方連接 https://cn.vuejs.org/v2/guide/installation.html
二、創(chuàng)建一個vue實(shí)例,因?yàn)槊總€vue應(yīng)用都是通過創(chuàng)建一個vue實(shí)例開始的
var vm = new Vue({ ? ? ? el:'#app', ?//實(shí)例化對象 ? ? ? data:{ ? ? ? ? ? ? ? ? ?? ?wordCardStyles:[] ? ? ? ? ?? ?//要存放的數(shù)據(jù) ?? ? ? ? }, ? ?? ? ? ? methods:{ ? ? ? ? ?? ?//存放實(shí)例方法 ? ? ? ? ? }? })
三、vue和jquery之間互相調(diào)用
例如現(xiàn)在用jq寫了一個方法,從后臺獲取數(shù)據(jù),并且把獲取到的數(shù)據(jù)要賦值給vue對象里的子對象
function getStyleSheetInfo(){ ? ? $.ajax({ ? ? ? ? type: 'post', ? ? ? ? dataType: 'json', ? ? ? ? url: serverUrl + 'api/styleSheet/findStyleSheetPage', ? ? ? ? data: { ? ? ? ? ? ? pageNumber:1, ? ? ? ? ? ? pageSize:99, ? ? ? ? ? ? styleType:'582941287137673216' ? ? ? ? }, ? ? ? ? success: function (result) { ? ? ? ? ? ? if (result.code == '0000') { ? ? ? ? ? ? ? ? vm.wordCardStyles = result.data.list //這里的vm就是代表上面的實(shí)例,wordCardStyles是vm實(shí)例里面的一個對象,然后把請求結(jié)果賦值給這里對象 ? ? ? ? ? ? } ? ? ? ? } ? ? }) }
vm實(shí)例里面如何調(diào)用外部的jq方法呢?
直接把方法寫在vm的方法里調(diào)用即可
var vm = new Vue({ ? el:'#app', ?//實(shí)例化對象 ? data:{ ? ?? ?wordCardStyles:[] ?//要存放的數(shù)據(jù) ? ?? ?}, ?? ?methods:{ ?? ??? ?//存放實(shí)例方法? ? ?? ?changeModel(event){ ? ? ?? ?console.log(event) ? ? ?? ?getMainTabelData() //外部的jq方法 ?? ??? ?}, ?? ?} })
以上為個人經(jīng)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
karma+webpack搭建vue單元測試環(huán)境的方法示例
本篇文章主要介紹了karma+webpack搭建vue單元測試環(huán)境的方法示例,這次搭建的測試環(huán)境和開發(fā)環(huán)境隔離,所以理論上適用所有使用vue的開發(fā)環(huán)境。感興趣的小伙伴們可以參考一下2018-05-05Vue.js實(shí)現(xiàn)可排序的表格組件功能示例
這篇文章主要介紹了Vue.js實(shí)現(xiàn)可排序的表格組件功能,涉及vue.js事件響應(yīng)、元素動態(tài)操作、排序、運(yùn)算等相關(guān)操作技巧,需要的朋友可以參考下2019-02-02腳手架(vue-cli)創(chuàng)建Vue項(xiàng)目的超詳細(xì)過程記錄
用vue-cli腳手架可以快速的構(gòu)建出一個前端vue框架的項(xiàng)目結(jié)構(gòu),下面這篇文章主要給大家介紹了關(guān)于腳手架(vue-cli)創(chuàng)建Vue項(xiàng)目的超詳細(xì)過程,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05vue el-form一行里面放置多個el-form-item的實(shí)現(xiàn)
本文主要介紹了vue el-form一行里面放置多個el-form-item的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08