【转】[Vue] .vue 文件的基本结构

转自：kimi.ai

一个典型的 .vue 文件通常包含三个主要部分：<template>、<script> 和 <style>。每个部分都有其特定的作用和语法。

1. <template>

<template> 是组件的 HTML 模板部分，用于定义组件的结构和布局。Vue 会将这部分内容编译为渲染函数。

HTML复制

<template>
  <div class="container">
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
    <button @click="handleClick">点击我</button>
  </div>
</template>

• 作用：
  • 定义组件的 HTML 结构。
  • 使用 Vue 的模板语法（如插值表达式 {{ }}、指令 v- 等）来绑定数据和事件。
• 注意事项：
  • <template> 中的内容必须有且仅有一个根元素（如 <div> 或 <section>）。
  • 如果需要多个根元素，可以使用 <template> 标签包裹，但不会生成实际的 DOM 元素。

2. <script>

<script> 是组件的 JavaScript 部分，用于定义组件的逻辑和数据。

HTML复制

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      title: 'Hello Vue!',
      message: 'This is a Vue component.'
    };
  },
  methods: {
    handleClick() {
      alert('Button clicked!');
    }
  }
};
</script>

• 作用：
  • 定义组件的选项（如 data、methods、computed、watch 等）。
  • 可以引入外部模块（如 import）。
• 注意事项：
  • 必须使用 export default 导出组件对象。
  • 如果需要使用 TypeScript，可以将文件扩展名改为 .vue.ts，并在 <script> 标签中添加 lang="ts"。

3. <style>

<style> 是组件的 CSS 样式部分，用于定义组件的样式。

HTML复制

<style scoped>
.container {
  text-align: center;
  padding: 20px;
  background-color: #f0f0f0;
}
button {
  padding: 10px 20px;
  font-size: 16px;
}
</style>

• 作用：
  • 定义组件的样式。
  • 使用 scoped 属性可以限制样式只作用于当前组件，避免样式冲突。
• 注意事项：
  • 默认情况下，样式是全局的。如果需要局部样式，可以添加 scoped 属性。
  • 可以使用预处理器（如 SCSS、Less、Stylus），通过添加 lang="scss" 等属性来启用。

完整示例

以下是一个完整的 .vue 文件示例，展示了如何组织模板、脚本和样式：

HTML复制

<template>
  <div class="container">
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
    <button @click="handleClick">点击我</button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      title: 'Hello Vue!',
      message: 'This is a Vue component.'
    };
  },
  methods: {
    handleClick() {
      alert('Button clicked!');
    }
  }
};
</script>

<style scoped>
.container {
  text-align: center;
  padding: 20px;
  background-color: #f0f0f0;
}
button {
  padding: 10px 20px;
  font-size: 16px;
}
</style>

.vue 文件的高级用法

1. 使用预处理器

如果需要使用 SCSS 或 TypeScript，可以在 <script> 和 <style> 标签中指定 lang 属性：

HTML复制

<template>
  <div class="container">
    <h1>{{ title }}</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
  data() {
    return {
      title: 'Hello Vue!'
    };
  }
});
</script>

<style lang="scss" scoped>
.container {
  background-color: #f0f0f0;
  padding: 20px;
  h1 {
    color: #333;
  }
}
</style>

2. 自定义块

除了 <template>、<script> 和 <style>，Vue 还支持自定义块，例如 <docs> 或 <i18n>，用于存放文档或国际化内容：

HTML复制

<template>
  <div>{{ greeting }}</div>
</template>

<script>
export default {
  data() {
    return {
      greeting: 'Hello'
    };
  }
};
</script>

<i18n>
{
  "en": {
    "greeting": "Hello"
  },
  "zh": {
    "greeting": "你好"
  }
}
</i18n>

总结

.vue 文件是 Vue 单文件组件的核心格式，将模板、脚本和样式封装在一个文件中，便于开发和维护。通过合理组织各部分的内容，可以实现清晰的代码结构和功能划分。