vue引用外部JS并調(diào)用JS文件中的方法實(shí)例
更新時(shí)間：2023年02月27日 10:01:27 作者：微微一笑嚇?biāo)勒l(shuí)
我們?cè)谧鰒ue項(xiàng)目時(shí),經(jīng)常會(huì)需要引入js,下面這篇文章主要給大家介紹了關(guān)于vue引用外部JS并調(diào)用JS文件中的方法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
VUE項(xiàng)目中引入JS文件的幾種方法
在開(kāi)發(fā)Vue項(xiàng)目的時(shí)候，有時(shí)需要使用一些非ES6格式的沒(méi)有export的js庫(kù)，可以有如下方法實(shí)現(xiàn):
1.在index.html頁(yè)面使用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.手動(dòng)添加export
為js庫(kù)中需要使用的方法放入export default { /要導(dǎo)出的方法/}，然后通過(guò)import {*} from 使用
在JS庫(kù)中：
function realconsole(){
alert("hello world!"); }
export {
realconsole }在需要使用JS庫(kù)的組件中：
import realconsole from './xxx'
4. 使用import方式，把需要的js庫(kù)中的方法掛載到全局
import '@static/libs/GLTFLoader' // 可以從全局獲取導(dǎo)入的方法 let GLTFLoader = THREE.GLTFLoader
話外：若我們需要在被調(diào)用的JS文件的方法中去調(diào)用vue頁(yè)面的方法可以進(jìn)行以下操作
js中調(diào)用vue中的方法
在 vue 頁(yè)面將方法注冊(cè)到 window 對(duì)象上, 之后在js頁(yè)面直接 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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue中路由傳參6種方式，文中的示例代碼講解詳細(xì)，具有一定的學(xué)習(xí)價(jià)值，感興趣的小伙伴可以跟隨小編一起了解一下2023-08-08
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
src/main.js是入口文件,主要作用是初始化vue實(shí)例并使用需要的插件, Vue.use()的作用就是讓它里面被注冊(cè)的組件能夠被全局使用,本文通過(guò)實(shí)例代碼介紹vue項(xiàng)目中main.js的用法,感興趣的朋友一起看看吧2023-10-10
本篇文章給大家詳細(xì)介紹了vue跨域處理問(wèn)題的方式以及相關(guān)知識(shí)點(diǎn)介紹，對(duì)此有興趣的朋友學(xué)習(xí)下。2018-02-02
這篇文章主要介紹了Vue狀態(tài)管理工具Pinia的安裝與使用,一步一步學(xué)習(xí)如何將pinia運(yùn)用到項(xiàng)目實(shí)戰(zhàn)中去,文中有詳細(xì)的安裝教程和使用方法,并通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-03-03
下面小編就為大家分享一篇vue中動(dòng)態(tài)綁定表單元素的屬性方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
vue3+vite+axios?配置連接后端調(diào)用接口的實(shí)現(xiàn)方法
這篇文章主要介紹了vue3+vite+axios?配置連接后端調(diào)用接口的實(shí)現(xiàn)方法，在vite.config.ts文件中添加配置，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
Vue 兩個(gè)字段聯(lián)合校驗(yàn)之修改密碼功能的實(shí)現(xiàn)
本文以校驗(yàn)兩次密碼的一致性應(yīng)用，給出兩個(gè)可變屬性值的字段之間的聯(lián)合校驗(yàn)的典型解決方案，通過(guò)實(shí)例代碼給大家介紹Vue 兩個(gè)字段聯(lián)合校驗(yàn)之修改密碼功能的實(shí)現(xiàn)，需要的朋友一起看看吧2021-07-07
一步步從Vue3.x源碼上理解ref和reactive的區(qū)別
vue3的數(shù)據(jù)雙向綁定,大家都明白是proxy數(shù)據(jù)代理,但是在定義響應(yīng)式數(shù)據(jù)的時(shí)候,有ref和reactive兩種方式,如果判斷該使用什么方式,是大家一直不很清楚地問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于從Vue3.x源碼上理解ref和reactive的區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-02-02
vue項(xiàng)目下npm或yarn下安裝echarts多個(gè)版本方式
這篇文章主要介紹了vue項(xiàng)目下npm或yarn下安裝echarts多個(gè)版本方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06