vue 里面如何定义js文件

在 Vue.js 里面定义 JavaScript 文件有几个常见的方法：1、在单文件组件 (SFC) 中使用 <script> 标签，2、在项目目录中创建独立的 JavaScript 文件并在组件中导入，3、在 Vue 项目的全局配置中导入 JavaScript 文件。下面详细描述其中一点：

在单文件组件 (SFC) 中使用 <script> 标签是最常见和直接的方法。Vue.js 的单文件组件 (SFC) 文件通常以 .vue 作为文件扩展名，内部包含三种主要的区块：<template>、<script> 和 <style>。在 <script> 标签中，我们可以定义组件的逻辑，包括数据、方法、生命周期钩子等。例如：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: "Hello, Vue!"
    };
  },
  methods: {
    changeMessage() {
      this.message = "Message Changed!";
    }
  }
};
</script>
<style scoped>
/* 样式代码 */
</style>