欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue引用外部JS并調用JS文件中的方法實例

 更新時間：2023年02月27日 10:01:27   作者：微微一笑嚇死誰  
我們在做vue項目時,經常會需要引入js,下面這篇文章主要給大家介紹了關于vue引用外部JS并調用JS文件中的方法的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

VUE項目中引入JS文件的幾種方法

在開發(fā)Vue項目的時候，有時需要使用一些非ES6格式的沒有export的js庫，可以有如下方法實現:

1.在index.html頁面使用script標簽引入

當然也可以使用cdn的地址。這樣引入后的內容是全局的，可以在所有地方使用。

<!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>網簽合同查詢</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中，這樣組件內都可以使用。

var THREE = window.THREEvar GLTFLoader = THREE.GLTFLoader
Vue.prototype.THREE = THREE

3.手動添加export

為js庫中需要使用的方法放入export default { /要導出的方法/}，然后通過import {*} from 使用

在JS庫中：

function realconsole(){  
    alert("hello world!");  } 
 export {  
     realconsole }

在需要使用JS庫的組件中：

import realconsole from './xxx'

4. 使用import方式，把需要的js庫中的方法掛載到全局

import '@static/libs/GLTFLoader'
// 可以從全局獲取導入的方法 
let GLTFLoader = THREE.GLTFLoader

話外：若我們需要在被調用的JS文件的方法中去調用vue頁面的方法可以進行以下操作

js中調用vue中的方法

在 vue 頁面將方法注冊到 window 對象上, 之后在js頁面直接 window.xxx 調用即可

demo.vue

mounted() {
    window.functionForJs = this.functionForJs 
},
methods: {
    functionForJs(data) {
        console.log('接收參數', data)
    }
}

demo.js

export function doSomething() {
    window.functionForJs('哈哈哈')
}

總結

到此這篇關于vue引用外部JS并調用JS文件中的方法的文章就介紹到這了,更多相關vue引用外部JS內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

  • vue中路由傳參6種方式總結

    vue中路由傳參6種方式總結

    這篇文章主要為大家詳細介紹了vue中路由傳參6種方式，文中的示例代碼講解詳細，具有一定的學習價值，感興趣的小伙伴可以跟隨小編一起了解一下
    2023-08-08
  • vue實現圖片拖拽功能

    vue實現圖片拖拽功能

    這篇文章主要為大家詳細介紹了vue實現圖片拖拽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-11-11
  • vue項目中main.js的用法

    vue項目中main.js的用法

    src/main.js是入口文件,主要作用是初始化vue實例并使用需要的插件, Vue.use()的作用就是讓它里面被注冊的組件能夠被全局使用,本文通過實例代碼介紹vue項目中main.js的用法,感興趣的朋友一起看看吧
    2023-10-10
  • vue幾個常用跨域處理方式介紹

    vue幾個常用跨域處理方式介紹

    本篇文章給大家詳細介紹了vue跨域處理問題的方式以及相關知識點介紹，對此有興趣的朋友學習下。
    2018-02-02
  • Vue狀態(tài)管理工具Pinia的安裝與使用教程

    Vue狀態(tài)管理工具Pinia的安裝與使用教程

    這篇文章主要介紹了Vue狀態(tài)管理工具Pinia的安裝與使用,一步一步學習如何將pinia運用到項目實戰(zhàn)中去,文中有詳細的安裝教程和使用方法,并通過代碼示例講解的非常詳細,需要的朋友可以參考下
    2024-03-03
  • vue中動態(tài)綁定表單元素的屬性方法

    vue中動態(tài)綁定表單元素的屬性方法

    下面小編就為大家分享一篇vue中動態(tài)綁定表單元素的屬性方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-02-02
  • vue3+vite+axios?配置連接后端調用接口的實現方法

    vue3+vite+axios?配置連接后端調用接口的實現方法

    這篇文章主要介紹了vue3+vite+axios?配置連接后端調用接口的實現方法，在vite.config.ts文件中添加配置，本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下
    2022-12-12
  • Vue 兩個字段聯合校驗之修改密碼功能的實現

    Vue 兩個字段聯合校驗之修改密碼功能的實現

    本文以校驗兩次密碼的一致性應用，給出兩個可變屬性值的字段之間的聯合校驗的典型解決方案，通過實例代碼給大家介紹Vue 兩個字段聯合校驗之修改密碼功能的實現，需要的朋友一起看看吧
    2021-07-07
  • 一步步從Vue3.x源碼上理解ref和reactive的區(qū)別

    一步步從Vue3.x源碼上理解ref和reactive的區(qū)別

    vue3的數據雙向綁定,大家都明白是proxy數據代理,但是在定義響應式數據的時候,有ref和reactive兩種方式,如果判斷該使用什么方式,是大家一直不很清楚地問題,下面這篇文章主要給大家介紹了關于從Vue3.x源碼上理解ref和reactive的區(qū)別的相關資料,需要的朋友可以參考下
    2023-02-02
  • vue項目下npm或yarn下安裝echarts多個版本方式

    vue項目下npm或yarn下安裝echarts多個版本方式

    這篇文章主要介紹了vue項目下npm或yarn下安裝echarts多個版本方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-06-06

最新評論