1. 单文件组件 (SFC)
单文件组件（Single File Component, SFC）是Vue组件开发中最常见的方式。使用.vue文件来定义一个组件，包含<template>、<script>和<style>块。
示例
1 <template>
2 <div>
3 <p>{{ message }}</p>
4 </div>
5 </template>
6
7 <script>
8 export default {
9 data() {
10 return {
11 message: "Hello from SFC"
12 };
13 }
14 };
15 </script>
16
17 <style>
18 p {
19 color: blue;
20 }
21 </style>
2. 使用模板字符串
在Vue组件的定义中，可以使用模板字符串来定义模板。
示例
1 import { createApp } from 'vue';
2
3 const app = createApp({
4 data() {
5 return {
6 message: "Hello from template string"
7 };
8 },
9 template: `
10 <div>
11 <p>{{ message }}</p>
12 </div>
13 `
14 });
15
16 app.mount('#app');
3. 使用渲染函数
使用渲染函数可以完全使用JavaScript来定义模板，这在需要动态生成模板或更复杂的逻辑时非常有用。
示例
1 import { createApp, h } from 'vue';
2
3 const app = createApp({
4 data() {
5 return {
6 message: "Hello from render function"
7 };
8 },
9 render() {
10 return h('div', [
11 h('p', this.message)
12 ]);
13 }
14 });
15
16 app.mount('#app');
4. 使用X-Templates
在某些情况下，可以使用X-Templates，在HTML文件中使用<script type="x-template">标签来定义模板。
示例
<script type="x-template" id="my-template">
<div>
<p>{{ message }}</p>
</div>
</script>
<div id="app"></div>
<script>
import { createApp } from 'vue';
const app = createApp({
data() {
return {
message: "Hello from x-template"
};
},
template: '#my-template'
});
app.mount('#app');
</script>
5. 使用内联模板
在实例创建时直接在el或template选项中定义模板。
示例
<div id="app">
<p>{{ message }}</p>
</div>
<script>
import { createApp } from 'vue';
const app = createApp({
data() {
return {
message: "Hello from inline template"
};
}
});
app.mount('#app');
</script>
6. 使用动态组件
动态组件允许在运行时根据条件渲染不同的组件。
示例
1 <div id="app">
2 <component :is="currentComponent"></component>
3 </div>
4
5 <script>
6 import { createApp } from 'vue';
7
8 const ComponentA = {
9 template: `<div>Component A</div>`
10 };
11
12 const ComponentB = {
13 template: `<div>Component B</div>`
14 };
15
16 const app = createApp({
17 data() {
18 return {
19 currentComponent: 'component-a'
20 };
21 },
22 components: {
23 'component-a': ComponentA,
24 'component-b': ComponentB
25 },
26 mounted() {
27 setTimeout(() => {
28 this.currentComponent = 'component-b';
29 }, 2000);
30 }
31 });
32
33 app.mount('#app');
34 </script>
标签：Vue,createApp,六种,app,template,return,message,模板 From： https://www.cnblogs.com/basell/p/18283640