如何在 Vue.js 组件中加载 JavaScript

在 Vue.js 组件中，可以使用以下几种方式来加载 JavaScript 代码：

方法一：使用 <script> 标签

可以直接在组件的模板中使用 <script> 标签来加载 JavaScript 代码。在模板中添加 <script> 标签后，JavaScript 代码会在组件被渲染时执行。

<template>
  <div>
    <h1>{{ message }}</h1>
    <script>
      // 在此处编写 JavaScript 代码
    </script>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, World!'
    };
  }
}
</script>

方法二：使用 import 语句

可以在组件的 <script> 区域使用 import 语句来导入外部的 JavaScript 文件。这种方式需要使用构建工具（如 webpack）来将导入的 JavaScript 文件打包到组件中。

首先，在组件所在目录下创建一个 JavaScript 文件，如 myScript.js，然后在组件中使用 import 语句导入该文件。

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
import myScript from './myScript.js';

export default {
  data() {
    return {
      message: myScript.getMessage()
    };
  }
}
</script>

myScript.js 文件定义了一个导出函数 getMessage，在组件中可以直接调用该函数并使用返回值。

// myScript.js
export default {
  getMessage() {
    return 'Hello, World!';
  }
}

方法三：使用 mounted 生命周期钩子

可以在组件的 <script> 区域使用 mounted 生命周期钩子函数来加载 JavaScript 代码。mounted 钩子函数会在组件挂载到 DOM 后执行。

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    // 在此处编写 JavaScript 代码
    this.message = 'Hello, World!';
  }
}
</script>

mounted 钩子函数中的 JavaScript 代码会在组件挂载到 DOM 后执行，可以在其中进行各种操作和逻辑处理。

以上是在 Vue.js 组件中加载 JavaScript 代码的几种常用方式。根据需要选择合适的方式来加载和执行 JavaScript 代码。