Vue3的组件SFC拼接页面语法

在Vue 3中，使用单文件组件（SFC）可以方便地拼接页面，将模板、脚本和样式组织在一个文件中。

1. 模板（Template）

• 使用 标签定义组件的模板内容。
• 可以在模板中使用Vue的模板语法，包括插值、指令等。

<template>
 <div>
   <h1>{{ title }}</h1>
   <p>{{ content }}</p>
 </div>
</template>

2. 脚本（Script）

• 使用

<script>
export default {
  data() {
    return {
      title: 'Welcome to Vue 3!',
      content: 'This is a sample Vue 3 component.'
    };
  }
};
</script>

3. 样式（Style）

• 使用

<style>
h1 {
  color: blue;
}
p {
  font-size: 16px;
}
</style>

4. 组件拼接

• 将模板、脚本和样式组合在一个单文件组件中。
• 在Vue应用中使用该组件来拼接页面。

<template>
<div>
  <h1>{{ title }}</h1>
  <p>{{ content }}</p>
</div>
</template>

<script>
export default {
data() {
  return {
    title: 'Vue 3!',
    content: 'Vue 3 component.'
  };
}
};
</script>

<style>
h1 {
color: blue;
}
p {
font-size: 16px;
}
</style>

通过这种方式，可以将页面拆分为多个组件，每个组件负责特定的功能和展示，通过组合这些组件来构建复杂的页面结构，提高代码的可维护性和可重用性。