vue引用外部JS并调用JS文件中的方法实例

时间：2023-12-14

以下是针对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方法。

上一篇：CSS3中利用animation属性创建雪花飘落特效 下一篇：详解HTML常用的标签中行内元素和块级元素