Vue 模板

Vue 中的 模板（Templates） 就是我们所说的 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>This is a second line of HTML code, inside backtick quotes</p>`,
    data() {
      return {
        message: "Hello World!"
      }
    }
  })
app.mount('#app')
</script>

单文件组件（SFCs）

正如您在上面的代码示例中看到的，Vue 应用程序的 HTML 部分也可以收集在 Vue 实例中，但这并不能使在 HTML 文件中获得概述变得更容易。

为了获得更好的概述，更容易处理更大的项目，并获得更好的开发环境，我们现在将改用 SFCs 或 *.Vue 文件编写 Vue 代码。

所有 *.vue 文件仅由三部分组成:

• <template> 是 HTML 内容所在的位置。
• <script> 是我们 Vue 代码部分。
• <style> 是我们写 css 的地方。

但在我们可以在项目中使用 *.vue 文件之前，我们需要以不同的方式设置计算机。

本教程的下一页将对此进行解释。