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