vue引用外部JS并調(diào)用JS文件中的方法實例
VUE項目中引入JS文件的幾種方法
在開發(fā)Vue項目的時候,有時需要使用一些非ES6格式的沒有export的js庫,可以有如下方法實現(xiàn):
1.在index.html頁面使用script標(biāo)簽引入
當(dāng)然也可以使用cdn的地址。這樣引入后的內(nèi)容是全局的,可以在所有地方使用。
<!DOCTYPE html> <html lang=zh-CN> <head> <meta charset=utf-8> <meta http-equiv=X-UA-Compatible content="IE=edge"> <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"> <title>網(wǎng)簽合同查詢</title> <link rel=stylesheet href=./static/index.b0707a6a.css> **被引入的JS** <script src=https://isdapp.shandong.gov.cn/jmopen/jssdk/index.js charset=utf-8></script> </head> <body> <div id=app></div> <script src=./static/js/chunk-vendors.9051d855.js></script> <script src=./static/js/index.d88e62c6.js></script> </body> </html>
2.在main.js中使用window.moduleName 使用
也可以放入Vue.prototype中,這樣組件內(nèi)都可以使用。
var THREE = window.THREEvar GLTFLoader = THREE.GLTFLoader Vue.prototype.THREE = THREE
3.手動添加export
為js庫中需要使用的方法放入export default { /要導(dǎo)出的方法/},然后通過import {*} from 使用
在JS庫中:
function realconsole(){ alert("hello world!"); } export { realconsole }
在需要使用JS庫的組件中:
import realconsole from './xxx'
4. 使用import方式,把需要的js庫中的方法掛載到全局
import '@static/libs/GLTFLoader' // 可以從全局獲取導(dǎo)入的方法 let GLTFLoader = THREE.GLTFLoader
話外:若我們需要在被調(diào)用的JS文件的方法中去調(diào)用vue頁面的方法可以進行以下操作
js中調(diào)用vue中的方法
在 vue 頁面將方法注冊到 window 對象上, 之后在js頁面直接 window.xxx 調(diào)用即可
demo.vue
mounted() { window.functionForJs = this.functionForJs }, methods: { functionForJs(data) { console.log('接收參數(shù)', data) } }
demo.js
export function doSomething() { window.functionForJs('哈哈哈') }
總結(jié)
到此這篇關(guān)于vue引用外部JS并調(diào)用JS文件中的方法的文章就介紹到這了,更多相關(guān)vue引用外部JS內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue3+vite+axios?配置連接后端調(diào)用接口的實現(xiàn)方法
這篇文章主要介紹了vue3+vite+axios?配置連接后端調(diào)用接口的實現(xiàn)方法,在vite.config.ts文件中添加配置,本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2022-12-12Vue 兩個字段聯(lián)合校驗之修改密碼功能的實現(xiàn)
本文以校驗兩次密碼的一致性應(yīng)用,給出兩個可變屬性值的字段之間的聯(lián)合校驗的典型解決方案,通過實例代碼給大家介紹Vue 兩個字段聯(lián)合校驗之修改密碼功能的實現(xiàn),需要的朋友一起看看吧2021-07-07一步步從Vue3.x源碼上理解ref和reactive的區(qū)別
vue3的數(shù)據(jù)雙向綁定,大家都明白是proxy數(shù)據(jù)代理,但是在定義響應(yīng)式數(shù)據(jù)的時候,有ref和reactive兩種方式,如果判斷該使用什么方式,是大家一直不很清楚地問題,下面這篇文章主要給大家介紹了關(guān)于從Vue3.x源碼上理解ref和reactive的區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-02-02vue項目下npm或yarn下安裝echarts多個版本方式
這篇文章主要介紹了vue項目下npm或yarn下安裝echarts多個版本方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06