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