1.使用组件中的<template>
例如，vue3安装后的demo中，app.vue文件中的tmplate组件：
<template>
<header>
<img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
<div class="wrapper">
<HelloWorld msg="You did it!" />
</div>
</header>
<main>
<TheWelcome />
</main>
</template>
2.v-html方式
例子：
<template>
<div v - html="htmlContent"></div>
</template>
<script>
export default {
data() {
return { htmlContent: '<p>这是一段通过v - html渲染的内容。</p>' };
}
};
</script>
注意：此方式需确保数据源安全可靠，直接插入dom的未过滤恶意数据会导致xss注入风险。虽然v-html进行了简单的安全防范，但是并不能保证所有处理后的数据安全。
3.直接使用挂载点的innerHTML
例子：
<div id="app">
<p>这是在容器innerHTML中的内容，将作为模板。</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
new Vue({ el: '#app' });
</script>
说明：案例中使用id为“app”挂载点的方式设置的innerHTML。
挂载点方式的优缺点：
-
优点：
- 简单快速上手：对于初学者或者是简单的小项目，这种方式可以让开发者快速开始使用 Vue。他们可以直接在 HTML 文件中编写类似于传统 HTML 的模板内容，而不需要深入了解 Vue 的模板语法或者如何在 JavaScript 中定义复杂的模板。
- 与现有 HTML 集成方便：如果是在一个已经存在的 HTML 页面上添加 Vue 功能，这种方式可以很好地利用现有的 HTML 结构。可以将需要通过 Vue 进行动态处理的部分直接放在挂载元素中，然后让 Vue 自动将其作为模板。
-
缺点：
- 灵活性受限：与在 JavaScript 中显式定义
template选项或者使用单文件组件（.vue文件）相比，直接使用容器的innerHTML作为模板的灵活性较差。例如，很难在这种模板中方便地使用复杂的组件嵌套、动态组件加载等高级功能。 - 可维护性差：当项目规模变大时，将模板内容分散在 HTML 文件中的各个挂载元素中会导致代码难以维护。相比于将模板定义在一个集中的地方（如
template选项或者.vue文件），这种方式会让代码结构变得混乱，不便于团队协作和代码的修改。 - 性能可能受影响：在某些情况下，这种方式可能会影响性能。因为 Vue 需要在运行时去获取并解析容器的
innerHTML作为模板，而如果容器的内容比较复杂或者需要频繁更新，这个过程可能会产生额外的开销。
- 灵活性受限：与在 JavaScript 中显式定义
