首页
软件开发
Vue3的组件SFC拼接页面语法

Vue3的组件SFC拼接页面语法

发布于 2024-08-17
0 次阅读

在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

目录