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)簽合同查詢(xún)</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)文章
vue下的elementui輪播圖自適應(yīng)高度問(wèn)題
這篇文章主要介紹了vue下的elementui輪播圖自適應(yīng)高度問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了面試官：為什么Vue中的v-if和v-for不建議一起用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
當(dāng)協(xié)議,域名,端口其中某一個(gè)不一致的時(shí)候,就會(huì)產(chǎn)生跨域問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中該如何解決跨域問(wèn)題的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
Vant是一個(gè)強(qiáng)大的移動(dòng)端組件庫(kù),目前Vant 官方提供了 Vue 2 版本,Vue 3 版本和微信小程序版本,本文主要為大家介紹vue3中的vant組件引入使用的方法,希望對(duì)大家有所幫助2023-10-10
vue動(dòng)態(tài)加載路由的3種方式總結(jié)
這篇文章主要介紹了vue動(dòng)態(tài)加載路由的3種方式總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
vue-cli4項(xiàng)目開(kāi)啟eslint保存時(shí)自動(dòng)格式問(wèn)題
這篇文章主要介紹了vue-cli4項(xiàng)目開(kāi)啟eslint保存時(shí)自動(dòng)格式的問(wèn)題小結(jié)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
使用VUE3開(kāi)發(fā)很久了,但一直沒(méi)進(jìn)行總結(jié)和記錄,下面這篇文章主要給大家介紹了關(guān)于從零開(kāi)始搭建vue3項(xiàng)目的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
這篇文章主要介紹了Vue實(shí)現(xiàn)文本編譯詳情，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，感興趣的小伙伴可以參考一下，希望對(duì)你的學(xué)習(xí)有所幫助2022-08-08
這篇文章主要為大家介紹了Element-ui?Dialog對(duì)話框基本使用示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
Vue3使用v-if指令進(jìn)行條件渲染的實(shí)例代碼
條件渲染是根據(jù)條件的真假來(lái)有條件地渲染元素,在Vue.js 3.x中,常見(jiàn)的條件渲染包括使用v-if指令和v-show指令,本文講解使用v-if指令進(jìn)行條件渲染,需要的朋友可以參考下2024-03-03