详解单文件组件

当你创建 Vue 单文件组件时，通常会包含三个部分：<template>、<script> 和 <style>。这三个部分分别用于定义组件的模板、逻辑和样式。让我更详细地解释一下它们的作用和用法：

<template>

<template> 标签用于定义组件的模板，即组件的 HTML 结构。在模板中，你可以使用 Vue 的模板语法来描述组件的渲染逻辑，包括插值、指令、事件绑定等。一般情况下，组件的模板应该只有一个根元素。

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script>

<script> 标签用于定义组件的逻辑部分，即组件的 JavaScript 代码。在 <script> 标签中，你可以导入其他模块、定义组件的数据和方法、监听生命周期钩子等。在 Vue 3 中，你可以使用 <script setup> 来更简洁地编写组件的逻辑。

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  methods: {
    handleClick() {
      console.log('Button clicked');
    }
  }
}
</script>
 

<style>

<style> 标签用于定义组件的样式，即组件的 CSS 样式表。在 <style> 标签中，你可以编写组件的样式规则，包括选择器、属性、值等。你可以使用普通的 CSS 语法，也可以使用预处理器（如 SASS、LESS 等）来编写样式。

<style>
h1 {
  color: blue;
}
button {
  background-color: green;
  color: white;
}
</style>

在上面的代码中，<template> 标签定义了组件的模板，包含了一个标题和一个按钮。<script> 标签定义了组件的逻辑，包含了数据 message 和方法 handleClick。<style> 标签定义了组件的样式，分别对标题和按钮进行了样式设置。

这三个部分共同构成了 Vue 单文件组件的内容，分别描述了组件的外观、行为和样式。