Vue 模板
在 Vue 中，我们称 模板 为 Vue 应用的 HTML 部分。
<template> 标签稍后将用于 *.vue 文件，以便以更好的方式组织我们的代码。
可以将 模板 用作 Vue 实例中的配置选项，并将 HTML 代码放在其中。
Vue 模板
让我们看一个将 'template' 用作配置选项的例子。这是一个简单的例子，我们只是将 HTML 部分移动到 'template' 配置选项中。
示例
<div id="app"> 内部的 HTML 内容被移动到 'template' 配置选项中，并用反引号 `...` 封装起来。我们可以在反引号中编写多行 HTML 代码。
<div id="app"></div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
template
`<h1>{{ message }}</h1>
<p>这是反引号内的第二行 HTML 代码</p>`,
data() {
return {
message: "Hello World!"
}
}
})
app.mount('#app')
</script>
自己尝试 »
单文件组件 (SFC)
正如你在上面的代码示例中看到的，Vue 应用的 HTML 部分也可以放在 Vue 实例中，但这并不会使在 HTML 文件中获得概览变得更容易。
为了获得更好的概览，为了更容易处理更大的项目，并获得更好的开发环境，我们现在将切换到在 SFC 或 *.vue 文件中编写我们的 Vue 代码。
所有 *.vue 文件仅包含三个部分
<template>存放 HTML 内容。<script>存放我们的 Vue 代码。<style>存放我们的 CSS 样式。
但是，在我们可以在项目中使用 *.vue 文件之前，我们需要以不同的方式设置我们的计算机。本教程的下一页将解释这一点。
