以下是针对vue引用外部JS并调用JS文件中的方法实例的完整攻略和示例。
步骤一:将外部JS文件导入vue项目中
在vue项目根目录下新建assets文件夹(如果存在则跳过此步骤),将外部JS文件拷贝到该文件夹下。此外,如果外部JS文件依赖于jQuery等其他库,也需要将这些库文件一起拷贝到assets文件夹中。
步骤二:在vue组件中进行 JS 文件引用
在Vue组件中引用上述JS文件,有两种方式:
方式一:在组件的<script>
标签中使用require
函数引入
在需要使用外部JS文件的组件中,在<script>
标签中使用require
函数引入外部JS文件,并将导入的内容赋值给某个变量,以实现JS文件的调用。
示例代码如下:
<script>
const outJs = require('@/assets/xx/xx.js');
</script>
其中,require
函数中的路径表示assets文件夹下的具体位置。
方式二:在index.html
文件中通过<script>
标签动态加载
在需要使用外部JS文件的组件中,可以在index.html
文件中,通过<script>
标签动态加载JS文件。同时,为了避免JS文件被重复加载,最好将JS文件的加载放在<head>
标签中。
示例代码如下:
<head>
<script src="/assets/xx/xx.js"></script>
</head>
其中,路径依然表示在assets文件夹下的具体位置。
步骤三:在vue组件中调用JS方法
调用外部JS文件的方法方式如下:
outJs.fn();
其中,fn()
是在外部JS文件中定义的一个方法。在 Vue 中也可以将该方法设置成 Vue 的全局变量,以便在组件之间共享。
至此,引入外部JS文件并调用其中方法的过程完成。
完整示例
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue引用外部JS并调用JS文件中的方法实例</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="/assets/xx/xx.js"></script>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<script>
Vue.component('my-component',{
template: '<div>{{content}}</div>',
data() {
return {
content: '我是my-component组件'
}
},
mounted() {
outJs.fn();
}
})
var app = new Vue({
el: '#app'
})
</script>
</body>
</html>
// xx.js
function fn() {
console.log('这是外部JS文件xx.js的fn方法');
}
export default {
fn
}
这个例子中,我们建立了一个Vue项目,并在其中引入了外部JS文件,最后在Vue组件my-component
中调用了外部JS文件中的fn
方法。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vue引用外部JS并调用JS文件中的方法实例 - Python技术站