六种方式涵盖了Vue 3中定义和使用模板的主要方法

1. 单文件组件 (SFC)

单文件组件（Single File Component, SFC）是Vue组件开发中最常见的方式。使用.vue文件来定义一个组件，包含<template>、<script>和<style>块。

示例

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello from SFC"
    };
  }
};
</script>

<style>
p {
  color: blue;
}
</style>

2. 使用模板字符串

在Vue组件的定义中，可以使用模板字符串来定义模板。

示例

import { createApp } from 'vue';

const app = createApp({
data() {
return {
message: "Hello from template string"
};
},
template: `
<div>
<p>{{ message }}</p>
</div>
`
});

app.mount('#app');

3. 使用渲染函数

使用渲染函数可以完全使用JavaScript来定义模板，这在需要动态生成模板或更复杂的逻辑时非常有用。

示例

import { createApp, h } from 'vue';

const app = createApp({
  data() {
    return {
      message: "Hello from render function"
    };
  },
  render() {
    return h('div', [
      h('p', this.message)
    ]);
  }
});

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. 使用动态组件

动态组件允许在运行时根据条件渲染不同的组件。

示例

<div id="app">
  <component :is="currentComponent"></component>
</div>

<script>
import { createApp } from 'vue';

const ComponentA = {
  template: `<div>Component A</div>`
};

const ComponentB = {
  template: `<div>Component B</div>`
};

const app = createApp({
  data() {
    return {
      currentComponent: 'component-a'
    };
  },
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  },
  mounted() {
    setTimeout(() => {
      this.currentComponent = 'component-b';
    }, 2000);
  }
});

app.mount('#app');
</script>