在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>
通过这种方式，可以将页面拆分为多个组件，每个组件负责特定的功能和展示，通过组合这些组件来构建复杂的页面结构，提高代码的可维护性和可重用性。
原文链接: https://blog.csdn.net/2401_82884096/article/details/136968415